Sets how the position of an animation
Description
no description
Parameters
Name |
Type |
Description |
mode |
integer |
sets the mode of the position. It can either be relative or absolute |
relativeTo |
integer |
if sets to relative, sets if it is relative to the start or end |
offset |
float |
offset |
Edit code in
JsFiddle
,
Codepen
,
view in a new tab
or
Open in the Editor
// create a scene
const scene = new PolyScene();
const root = scene.root();
// create a objects to animate
const geo = root.createNode('geo');
const roundedBox = geo.createNode('roundedBox');
const objectProperties = geo.createNode('objectProperties');
const plane = geo.createNode('plane');
const copy = geo.createNode('copy');
objectProperties.setInput(0, roundedBox);
copy.setInput(0, objectProperties);
copy.setInput(1, plane);
roundedBox.p.size.set([0.8, 0.8, 0.8]);
plane.p.size.set([3, 3]);
objectProperties.p.tname.set(true);
objectProperties.p.name.set('animTarget');
copy.flags.display.set(true);
// setup the animation
const animations = root.createNode('animationsNetwork');
// set the target of the animation.
// In this case, we target all objects of the THREE scene graph
// which care called "anim_target" (which is how we call them with the objectProperties above)
const target = animations.createNode('target');
target.p.objectMask.set('*animTarget');
target.p.updateMatrix.set(1);
// set the name of the property updated by the animation.
// In this case, we will update the Y axis of the rotation
const propertyName = animations.createNode('propertyName');
propertyName.setInput(0, target);
propertyName.p.name.set('rotation.z');
// set the name of the property value we will animate to
const propertyValue = animations.createNode('propertyValue');
propertyValue.setInput(0, propertyName);
propertyValue.p.size.set(1);
propertyValue.p.value1.set(0.5 * Math.PI);
// sets the duration
const duration = animations.createNode('duration');
duration.setInput(0, propertyValue);
duration.p.duration.set(0.5);
// sets the operation, in this case we will add to the value
// everytime the animation plays
const operation = animations.createNode('operation');
operation.setInput(0, duration);
operation.p.operation.set(1);
// add an easing
const easing = animations.createNode('easing');
easing.setInput(0, operation);
// and sets the position of each animation
// as the default would be that they play one after the other.
// But while we want some delay, we want to adjust it.
const position = animations.createNode('position');
position.setInput(0, easing);
position.p.offset.set(0.02);
// finally we add add a null node, to give us a button to start and pause the animation
const null1 = animations.createNode('null');
null1.setInput(0, position);
// add a light
root.createNode('hemisphereLight');
// create a camera
const perspectiveCamera1 = root.createNode('perspectiveCamera');
perspectiveCamera1.p.t.set([5, 5, 5]);
// add orbitControls
const events1 = perspectiveCamera1.createNode('eventsNetwork');
const orbitsControls = events1.createNode('cameraOrbitControls');
perspectiveCamera1.p.controls.setNode(orbitsControls);
// mount the viewer
const element = document.getElementById('app');
perspectiveCamera1.createViewer({element});