Naker Form Viewer #

A standalone library to add interaction to your form #

Getting Started #

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

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

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

Usage #

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

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

Same thing with the form which will be linked to the 3D content, let’s select it by its tag name :

var form = document.getElementByTagName('FORM');

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

nakerform.render({
    container: document.getElementById('container'),
    form: document.getElementByTagName('FORM')
});

Options #

You must also add some options to the render function. Type rgbArray:[r, g, b] and Vector3:{x:number, y:number, z:number}

Particle #

Name	Type	Description
url	string	The image url used to create effect
size	number	Size of the image
shape	string	The shape of the particles (cube, sphere, etc)
pieces	number	The number of particle to draw
positionFusion	Vector3	Position change when form is filled in
rotationFusion	Vector3	Rotation change when form is filled in
scalingFusion	Vector3	Scaling change when form is filled in
alphaFusion	boolean	Alpha change when form is filled in
gravityExplosion	Vector3	Gravity on particle when form validation
powerExplosion	number	Power of particle movement when form validation

Environment #

Name	Type	Description
sensitivity	number	Sensitivity of the camera when the mouse move
colorStart	rgbArray	Color of the top background
colorEnd	rgbArray	Color of the top background
gradient	‘horizontal’, ‘vertical’ or ‘radial’	The way the gradient is drawn

Result #

At the end your render function will work like this:

nakerform.render({
    container: document.getElementById('container'),
    particle:{
        url: "https://asset.naker.io/image/main/Logo_Naker_NEW.png",
        shape: "cube",
        pieces: 756,
        size: 20,
        positionFusion: {x: 1,y: 1,z: 1},
        rotationFusion: {x: 1,y: 1,z: 1},
        scalingFusion: {x: -1,y: -1,z: -1},
        alphaFusion: false,
        gravityExplosion: {x: 0,y: 0,z: 0},
        powerExplosion: 0.1
    },
    environment: {
        sensitivity: 0.96,
        colorStart: [0,0,0,1],
        colorEnd: [234,0,255,1],
        gradient: 'vertical'
    }
});

Note that the container object will need to have a position style defined, as we use absolute position of the canvas which draw the 3D scene, without a position on the container the canvas could go outside.

Plus if you need specific options, we are open to it. Send us an email to support@naker.io

Examples #

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