Doc > Nodes > ANIM > Position

Doc > Nodes > ANIM > Position

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);