 # How to use theVector3function fromthree

## Find comprehensive JavaScriptthree.Vector3code 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.

``````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 0

+ 11 other calls in file

``````62
63
64
65
66
67
68
69
70
71
``````    1,

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

lineVertices,`````` 117 808 24

+ 23 other calls in file

### How doesthree.Vector3work?

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.

``````122
123
124
125
126
127
128
129
130
131
``````
const zone = Pathfinding.createZone(geometry);
pathfinding.setZoneData(ZONE, zone);
t.equal(zone.groups.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 0

+ 43 other calls in file

``````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 0

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

const otherVector = new Vector3(2, 3, 4);

// 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.

``````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 0

+ 3 other calls in file

``````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) {
} else {`````` 115 803 0

+ 11 other calls in file

``````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; 115 803 0

+ 5 other calls in file

``````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) {`````` 75 468 0

+ 33 other calls in file

``````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'])`````` 60 222 23

+ 11 other calls in file

``````107
108
109
110
111
112
113
114
115
``````var phiDelta = 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 };
`````` 34 216 8

+ 9 other calls in file

``````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();`````` 34 216 8

+ 13 other calls in file

``````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, position, position);
pos.project(camera);
return {
x: ((pos.x + 1) * canvas.clientWidth) / 2,
y: ((-pos.y + 1) * canvas.clientHeight) / 2`````` 32 398 15

``````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;
`````` 15 55 0

+ 4 other calls in file

``````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 );
`````` 26 28 0

+ 2 other calls in file

``````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();`````` 4 26 11

+ 119 other calls in file

``````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;`````` 1 5 3

+ 239 other calls in file

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

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

}
},
startOrbit: function() {`````` 0 4 2

+ 3 other calls in file

``````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();`````` 0 2 1

+ 211 other calls in file

``````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 0 1

+ 29 other calls in file

``````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 0 2

Other functions in three

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

Other popular packages: