Home

Index

How to use the Vector3 function from three

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

three.Vector3 is a class in the Three.js library that represents a 3D vector with x, y, and z components.

animations-baker.js

386
387
388
389
390
391
392
393
394
rootBone.updateMatrixWorld(true);

const fbxScale = 100;
const rootY = new THREE.Vector3().setFromMatrixPosition(rootBone.matrixWorld).divideScalar(fbxScale).y;
const leftFootY = new THREE.Vector3().setFromMatrixPosition(leftFootBone.matrixWorld).divideScalar(fbxScale).y;
const rightFootY = new THREE.Vector3().setFromMatrixPosition(rightFootBone.matrixWorld).divideScalar(fbxScale).y;

const leftFootYDelta = leftFootY - rootY;
const rightFootYDelta = rightFootY - rootY;

223

301

+ 11 other calls in file

Vectors.js

GitHub: K3D-tools/K3D-jupyter

62
63
64
65
66
67
68
69
70
71
    1,
).translate(0, -0.1 * headSize, 0);

for (i = 0; i < vectors.length; i += 3) {
    origin = new THREE.Vector3(origins[i], origins[i + 1], origins[i + 2]);
    destination = new THREE.Vector3(vectors[i], vectors[i + 1], vectors[i + 2]).add(origin);

    heads = generateArrow(
        useHead ? singleConeGeometry : null,
        lineVertices,

117

808

+ 23 other calls in file

How does three.Vector3 work?

three.Vector3 is a class in the Three.js library that represents a 3D vector with x, y, and z components. When you create a new three.Vector3 object, you can optionally pass in values for the x, y, and z components. If you don't provide any values, the vector is initialized with all components set to 0. three.Vector3 provides a variety of methods for performing operations on vectors, such as adding, subtracting, multiplying, dividing, and normalizing vectors. You can also access and set the components of a vector directly using properties like x, y, and z. One common use case for three.Vector3 is in 3D graphics applications, where it is used to represent positions and directions in 3D space. For example, you might use a three.Vector3 to represent the position of a camera or the direction that an object is facing. three.Vector3 also provides a variety of utility methods for working with vectors, such as computing the dot product and cross product of two vectors, and computing the distance between two points in 3D space. Overall, three.Vector3 is a fundamental building block of 3D graphics applications and provides a convenient and powerful interface for working with vectors in 3D space.

index.test.js

GitHub: donmccurdy/three-pathfinding

122
123
124
125
126
127
128
129
130
131

const zone = Pathfinding.createZone(geometry);
pathfinding.setZoneData(ZONE, zone);
t.equal(zone.groups[1][0].centroid.y, 1, 'centroid of node in group 1 should be at y=1');

const a = new THREE.Vector3(0.2, 1, 0.2);
const groupID = pathfinding.getGroup(ZONE, a, true);
t.equal(groupID, 1, 'point on node at y=1 should be in group 1');

t.end();

109

888

+ 43 other calls in file

CanvasRenderer.js

GitHub: jupyter-widgets/pythreejs

110
111
112
113
114
115
116
117
118
	_directionalLights = new THREE.Color(),
	_pointLights = new THREE.Color(),

	_vector3 = new THREE.Vector3(), // Needed for PointLight
	_centroid = new THREE.Vector3(),
	_normal = new THREE.Vector3(),
	_normalViewMatrix = new THREE.Matrix3();

// dash+gap fallbacks for Firefox and everything else

183

861

+ 8 other calls in file

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
// Import the Vector3 class from the Three.js library
import { Vector3 } from "three";

// Create a new vector with x=1, y=2, and z=3
const myVector = new Vector3(1, 2, 3);

// Access the x, y, and z components of the vector
console.log(myVector.x); // Output: 1
console.log(myVector.y); // Output: 2
console.log(myVector.z); // Output: 3

// Set the x, y, and z components of the vector
myVector.x = 4;
myVector.y = 5;
myVector.z = 6;

// Add two vectors together
const otherVector = new Vector3(2, 3, 4);
const sumVector = myVector.clone().add(otherVector);

// Compute the length of the vector
const length = myVector.length();

// Normalize the vector (i.e., scale it to have length 1)
myVector.normalize();

In this example, we create a three.Vector3 object with components x=1, y=2, and z=3, and then access and set the components using the x, y, and z properties. We then create another vector, add it to the original vector, and store the result in a third vector using the add method. We also compute the length of the vector using the length method, and normalize the vector using the normalize method.

PointsMesh.js

GitHub: K3D-tools/K3D-jupyter

146
147
148
149
150
151
152
153
154
155
    obj.setMatrixAt(
        i,
        (new THREE.Matrix4())
            .identity()
            .setPosition(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2])
            .scale(new THREE.Vector3(s, s, s)),
    );
}

obj.instanceMatrix.needsUpdate = true;

115

803

+ 3 other calls in file

Volume.js

GitHub: K3D-tools/K3D-jupyter

250
251
252
253
254
255
256
257
258
259
sceneRTT.add(quadRTT);

object.refreshLightMap = function (direction) {
    if (textureRTT) {
        const {renderer} = K3D.getWorld();
        const cameraPosition = new THREE.Vector3();

        if (direction) {
            quadRTT.material.uniforms.lightDirection.value.fromArray(direction).normalize();
        } else {

115

803

+ 11 other calls in file

MIP.js

GitHub: K3D-tools/K3D-jupyter

22
23
24
25
26
27
28
29
30
31
config.interpolation = typeof (config.interpolation) !== 'undefined' ? config.interpolation : true;

const randomMul = typeof (window.randomMul) !== 'undefined' ? window.randomMul : 255.0;
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const modelMatrix = new THREE.Matrix4();
const translation = new THREE.Vector3();
const rotation = new THREE.Quaternion();
const scale = new THREE.Vector3();
const colorMap = (config.color_map && config.color_map.data) || null;
let mask = null;

115

803

+ 5 other calls in file

geo-three.cjs

GitHub: tentone/geo-three

484
485
486
487
488
489
490
491
492
493
let normalAttribute = this.getAttribute('normal');
const normalLength = heightSegments * widthSegments;
for (let i = 0; i < normalLength; i++) {
    normalAttribute.setXYZ(i, 0, 0, 0);
}
const pA = new three.Vector3(), pB = new three.Vector3(), pC = new three.Vector3();
const nA = new three.Vector3(), nB = new three.Vector3(), nC = new three.Vector3();
const cb = new three.Vector3(), ab = new three.Vector3();
const indexLength = heightSegments * widthSegments * 6;
for (let i = 0; i < indexLength; i += 3) {

468

+ 33 other calls in file

bakelines.js

GitHub: cogentlabs/cloud-vision-explorer

20
21
22
23
24
25
26
27
28
29
const data = outputJson.points

// Do some post-processing
data.forEach((n) => {
  // Add a real THREE vector for easy access later
  n.vec = new THREE.Vector3(n.x, n.y, n.z)
})

// First sort by the group ID ascending
const sortedData = _.orderBy(data, ['g'], ['asc'])

222

+ 11 other calls in file

OrbitControls.js

GitHub: edankwan/hyper-mix

107
108
109
110
111
112
113
114
115
var phiDelta = 0;
var thetaDelta = 0;
var scale = 1;
var pan = new THREE.Vector3();

var lastPosition = new THREE.Vector3();
var lastQuaternion = new THREE.Quaternion();

var STATE = { NONE : -1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 };

216

+ 9 other calls in file

simulator.js

GitHub: edankwan/hyper-mix

30
31
32
33
34
35
36
37
38
39
exports.initAnimation = 0;

function init(renderer) {

    _renderer = renderer;
    _followPoint = new THREE.Vector3();

    var rawShaderPrefix = 'precision ' + settings.capablePrecision + ' float;\n';

    var gl = _renderer.getContext();

216

+ 13 other calls in file

SpaceObject.js

GitHub: typpo/spacekit

78
79
80
81
82
83
84
85
86
87
/**
 * @private
 * Converts [X, Y, Z] position in visualization to pixel coordinates.
 */
function toScreenXY(position, camera, canvas) {
    var pos = new THREE.Vector3(position[0], position[1], position[2]);
    pos.project(camera);
    return {
        x: ((pos.x + 1) * canvas.clientWidth) / 2,
        y: ((-pos.y + 1) * canvas.clientHeight) / 2

398

software-renderer.js

GitHub: AVGP/three-software-renderer

45
46
47
48
49
50
51
52
53
var blockShift = 3;
var blockSize = 1 << blockShift;
var maxZVal = ( 1 << 24 ); // Note: You want to size this so you don't get overflows.
var lineMode = false;
var lookVector = new THREE.Vector3(0, 0, 1);
var crossVector = new THREE.Vector3();

var rectx1 = Infinity, recty1 = Infinity;
var rectx2 = 0, recty2 = 0;

+ 4 other calls in file

index.js

GitHub: ASSERT-KTH/ci-hackathon

26
27
28
29
30
31
32
33
34
var camera = new THREE.PerspectiveCamera( 45, roomCanvas.width / roomCanvas.height, 0.1, 1000 );

camera.position.x = 0;
camera.position.y = 50;
camera.position.z = 300;
camera.lookAt(new THREE.Vector3(0,  100, 0));

var renderer = new THREE.WebGLRenderer({canvas: roomCanvas});
renderer.setSize( roomCanvas.width, roomCanvas.height, false );

+ 2 other calls in file

TransformControls.js

GitHub: MozillaReality/mred

75
76
77
78
79
80
81
82
83
84
var worldQuaternionStart = new THREE.Quaternion();
var worldScaleStart = new THREE.Vector3();

var worldPosition = new THREE.Vector3();
var worldQuaternion = new THREE.Quaternion();
var worldScale = new THREE.Vector3();

var eye = new THREE.Vector3();

var _positionStart = new THREE.Vector3();

+ 119 other calls in file

init.js

GitHub: hanbollar/Odin

87
88
89
90
91
92
93
94
95
96
97


// Initialize camera
export const camera = new PerspectiveCamera(120, canvas.clientWidth / canvas.clientHeight, 0.1, 2000);
console.log(camera.getWorldDirection());
camera.position.applyQuaternion( new THREE.Quaternion().setFromAxisAngle(
        new THREE.Vector3( 0, 1, 0 ), // The positive y-axis
        Math.PI
    ));
export const cameraControls = new OrbitControls(camera, canvas);
cameraControls.enableDamping = false;

+ 239 other calls in file

controls.js

GitHub: funwithtriangles/polyop-ceremony

42
43
44
45
46
47
48
49
50
51
      innerObject.children[0].children[0].rotation.z = 0;



      // camera.params.object.children[0].rotation.set(new THREE.Vector3( 0, 0, 0));
      // camera.params.object.children[0].children[0].rotation.set(new THREE.Vector3( 0, 0, 0));

  }
},
startOrbit: function() {

+ 3 other calls in file

MeshLine.js

GitHub: manzanillo/reise-in-die-quantenzeit

81
82
83
84
85
86
87
88
89
90

return function raycast( raycaster, intersects ) {

	var precision = raycaster.linePrecision;
	var precisionSq = precision * precision;
	var interRay = new THREE.Vector3();

	var geometry = this.geometry;

	if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();

+ 211 other calls in file

trois.js

GitHub: Kamsou/trois

46
47
48
49
50
51
52
53
54
55
var afterResizeCallbacks = [];
var beforeRenderCallbacks = [];

// mouse tracking
var mouse = new three.Vector2();
var mouseV3 = new three.Vector3();
var mousePlane = new three.Plane(new three.Vector3(0, 0, 1), 0);
var raycaster = new three.Raycaster();

// raycast objects

268

+ 29 other calls in file

Land.js

GitHub: stephensmitchell-forks/sketch-threejs

22
23
24
25
26
27
28
29
30
31
createObj() {
  // Define Geometry
  const simplex = new SimplexNoise(Math.random);
  const geometry = new THREE.OctahedronBufferGeometry(50, 5);
  for (var i = 0; i < geometry.attributes.position.count; i++) {
    const v3 = new THREE.Vector3(
      geometry.attributes.position.getX(i),
      geometry.attributes.position.getY(i),
      geometry.attributes.position.getZ(i),
    );

260

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About