Skip to main content

three.js

Repository: https://github.com/zestyxyz/sdk/tree/main/threejs

note

You will first need to create an ad unit on the marketplace in order to get started. Check out For Creators for more instructions.

Step 1 - Installing from NPM​

Install the SDK from NPM like so:

npm install '@zestymarket/threejs-sdk'

Once installed, import the ZestyBanner component:

import * as Zesty from '@zestymarket/threejs-sdk';

Warning: Make sure you are using the same three.js version as the Zesty package, which you can check here.

If you are using an unsupported version, you can import a specific version of three.js from CDNs like Skypack: https://cdn.skypack.dev/three@version

Step 2 - Bringing the Zesty Banner into your scene​

In the your scene setup, copy and paste:

const zestyBanner = new ZestyBanner("0", "billboard", 3);
scene.add(zestyBanner);

Replace "0" with your ad unit ID.

You can also pass the argument false if you would like to opt out of Zesty Analytics.

Adding a banner to the previous example would look like this:

const zestyBanner = new ZestyBanner("0", "billboard", 3, null, true);
scene.add(zestyBanner);

Step 3 - Customizing your banner display​

These are the available attributes for your banner:

info

adUnit required

String: The ID of your ad unit.

format required

Determines the aspect ratio of your ad unit. Valid options are billboard, medium-rectangle, or mobile-phone-interstitial.

  • Billboard - 970 x 250
  • Mobile Phone Interstitial - 750 x 1334
  • Medium Rectangle - 300 x 250

format: { type: 'string', oneOf: ['billboard', 'medium-rectangle', 'mobile-phone-interstitial'] }

height required

Integer: Scales the banner to your liking.

renderer optional

A reference to the three.js WebGLRenderer if you are making a WebXR experience. Can otherwise be omitted unless you are changing beacon settings, in which case it should be set to null.

beacon optional

Boolean: Setting beacon to false opts you out of Zesty analytics on your ad unit page.

Source Reference​

/**
   * @constructor
   * @param {string} adUnit The ad unit ID
   * @param {string} network The network to connect to ('rinkeby' or 'polygon')
   * @param {string} format The format of the default banner
   * @param {Number} height Height of the banner
   * @param {THREE.WebGLRenderer} renderer Optional field to pass in the WebGLRenderer in a WebXR project
   */
  constructor(adUnit, creator, network, format, height, renderer = null, beacon = false) {
    super();