How to use the VectorKeyframeTrack function from three

Find comprehensive JavaScript three.VectorKeyframeTrack code examples handpicked from public code repositorys.

three.VectorKeyframeTrack is a class in the Three.js library that represents a sequence of keyframe values for a three-dimensional vector.

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2588
2589
2590
2591
2592
2593
2594
2595
2596
2597
    break;

  case PATH_PROPERTIES.position:
  case PATH_PROPERTIES.scale:
  default:
    TypedKeyframeTrack = THREE.VectorKeyframeTrack;
    break;
}

var targetName = node.name ? node.name : node.uuid;

+ 14 other calls in file

index.cjs

GitHub: Brakebein/node-three-gltf

2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
        TypedKeyframeTrack = three.QuaternionKeyframeTrack;
        break;
    case PATH_PROPERTIES.translation:
    case PATH_PROPERTIES.scale:
    default:
        TypedKeyframeTrack = three.VectorKeyframeTrack;
        break;
}
const targetName = node.name ? node.name : node.uuid;
const interpolation = sampler.interpolation !== undefined ? INTERPOLATION[sampler.interpolation] : three.InterpolateLinear;

How does three.VectorKeyframeTrack work?

three.VectorKeyframeTrack is a class in the Three.js library that represents a sequence of keyframe values for a three-dimensional vector. It can be used to define an animation over time for a vector property, such as the position or scale of a 3D object. To use VectorKeyframeTrack, you create a new instance of the class with the name of the property to animate, an array of keyframe times, and an array of keyframe values. For example, to create an animation for the position of an object, you might use the following code: javascript Copy code {{{{{{{ import { Vector3, VectorKeyframeTrack } from 'three'; const positionTrack = new VectorKeyframeTrack( '.position', // the name of the property to animate [0, 1, 2], // an array of keyframe times (in seconds) [ // an array of keyframe values (three-dimensional vectors) new Vector3(0, 0, 0), new Vector3(0, 10, 0), new Vector3(0, 0, 0) ] ); In this example, we create a VectorKeyframeTrack object for the position of an object, with keyframes at times 0, 1, and 2 seconds. The keyframe values are three-dimensional vectors representing the position of the object at each time, with the object moving from the origin to a height of 10 units and back to the origin. Once you have created a VectorKeyframeTrack, you can add it to a three.AnimationClip object to define a complete animation. You can then use a three.AnimationMixer to play the animation on a three.Object3D in your scene.

browser.js

GitHub: FabricLabs/verse

162
163
164
165
166
167
168
169
170
171
  return group;
}

function createMoveAnimation (mesh, startPosition, endPosition) {
  mesh.userData.mixer = new THREE.AnimationMixer(mesh);
  const track = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [
    startPosition.x,
    startPosition.y,
    startPosition.z,
    endPosition.x,

+ 17 other calls in file

GLTFLoader.js

GitHub: VeinKowal/veins

2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
    break;

  case PATH_PROPERTIES.position:
  case PATH_PROPERTIES.scale:
  default:
    TypedKeyframeTrack = _three.VectorKeyframeTrack;
    break;
}

var targetName = node.name ? node.name : node.uuid;

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import * as THREE from "three";

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
cube.position.set(0, 0, 0);

const positionTrack = new THREE.VectorKeyframeTrack(
  ".position",
  [0, 1, 2],
  [
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 2, 0),
    new THREE.Vector3(0, 0, 0),
  ]
);

const clip = new THREE.AnimationClip("position", 3, [positionTrack]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

const scene = new THREE.Scene();
scene.add(cube);

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  mixer.update(0.01);
  renderer.render(scene, camera);
}

animate();

In this example, we create a VectorKeyframeTrack for the position of the cube object, with keyframes at times 0, 1, and 2 seconds. The keyframe values are three-dimensional vectors representing the position of the cube at each time, with the cube moving up by 2 units and back down to the original position. We then create an animation clip using the track and play it using an animation mixer. The animate function updates the mixer on every frame, causing the cube to animate smoothly over time.

index.js

GitHub: edyMartin2/AdonisGameTeam

2416
2417
2418
2419
2420
2421
2422
2423
2424
2425
function generateVectorTrack( modelName, curves, initialValue, type ) {

	var times = getTimesForAllAxes( curves );
	var values = getKeyframeTrackValues( times, curves, initialValue );

	return new THREE.VectorKeyframeTrack( modelName + '.' + type, times, values );

}

function generateRotationTrack( modelName, curves, initialValue, preRotations ) {

+ 88 other calls in file

FBXLoader.js

GitHub: fahadbakkar8510/sports-configurator

2431
2432
2433
2434
2435
2436
2437
2438
2439
2440

generateVectorTrack: function (modelName, curves, initialValue, type) {
  var times = this.getTimesForAllAxes(curves);
  var values = this.getKeyframeTrackValues(times, curves, initialValue);

  return new THREE.VectorKeyframeTrack(
    modelName + '.' + type,
    times,
    values,
  );

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About