Naker Pearl Viewer #

A standalone library to add 3D model as illustration on your website #

Getting Started #

Import the Javascript Pearl Viewer in the header of your website :

<script data-who='💎 Made with naker.io 💎' src='https://d23jutsnau9x47.cloudfront.net/pearl/v1.0.4/viewer.js' ></script>

This line will import the nakerpearl global variable to your website.

Usage #

You then need to choose the html element which will be used to draw your model. You can just select this node by its id like this :

var container = document.getElementById('container');

Use the render function of the viewer and your model url in order to automatically create your 3D illustration like so :

nakerpearl.render({
  container: document.getElementById('container'),
  model: 'https://asset.naker.io/model/icosphere.gltf',
});

Options #

You can also add some options to the render function. Here is the list of the available once :

Name	Type	Default	Description
modelFollowMouseRapidity	number	`1`	Choose how fast the model rotates when the mouse is moving. Set it to 0 if you don’t want it to rotate at all
lightFollowMouseRapidity	number	`0`	Choose how fast the light moves when the mouse is moving. Set it to 0 if you don’t want it to move at all
hdr	boolean	`false`	Choose if the pearl should use an hdr texture in order to have a lightmap

nakerpearl.render({
  container: document.getElementById('container'),
  model: 'https://asset.naker.io/model/icosphere.gltf',
  modelFollowMouseRapidity: 1,
  lightFollowMouseRapidity: 1,
  hdr: true
});

If you need a specific options, we are open to it. Juste create an issue to share your idea and discuss it.

Callback #

It is possible to add a callback as a second argument of the render function, this function will be called when the model is loaded. The callback returns the pearl object :

nakerpearl.render({
  container: document.getElementById('container'),
  project: 'your-project-id',
}, (pearl) => {
  // model loaded, do what you need!
});

Check the pearl to see what you can do with it pearl Class

Examples #

To see it in action, follow this link:
Pearl viewer