Home

Index

How to use the Vector2 function from three

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

three.Vector2 is a class in the three.js library that represents a two-dimensional vector with an x and y component.

primitives.js

2
3
4
5
6
7
8
9
10
11
12
13
const { dispose3 } = require('./dispose')


function getMesh (primitive, camera) {
  if (primitive.type === 'line') {
    const color = primitive.color ? primitive.color : 0xff0000
    const resolution = new THREE.Vector2(window.innerWidth / camera.zoom, window.innerHeight / camera.zoom)
    const material = new MeshLineMaterial({ color, resolution, sizeAttenuation: false, lineWidth: 8 })


    const points = []
    for (const p of primitive.points) {

158

+ 5 other calls in file

THREE.MeshLine.js

GitHub: szu-advtech/AdvTech

381
382
383
384
385
386
387
388
389
390
this.far = check( parameters.far, 1 );
this.dashArray = check( parameters.dashArray, [] );
this.useDash = ( this.dashArray !== [] ) ? 1 : 0;
this.visibility = check( parameters.visibility, 1 );
this.alphaTest = check( parameters.alphaTest, 0 );
this.repeat = check( parameters.repeat, new THREE.Vector2( 1, 1 ) );

var material = new THREE.RawShaderMaterial( {
	uniforms:{
		lineWidth: { type: 'f', value: this.lineWidth },

398

+ 11 other calls in file

How does three.Vector2 work?

three.Vector2 is a class provided by the three.js library that represents a two-dimensional vector with an x and y component. To create a three.Vector2 object, you can call the constructor and pass in two arguments representing the x and y components of the vector. For example: javascript Copy code {{{{{{{ const vector = new THREE.Vector2(3, 4); This code creates a new three.Vector2 object with an x component of 3 and a y component of 4. Once you have a three.Vector2 object, you can access its components using the x and y properties: javascript Copy code {{{{{{{ class="!whitespace-pre hljs language-javascript">console.log(vector.x); // prints 3 console.log(vector.y); // prints 4 You can also perform operations on three.Vector2 objects, such as adding or subtracting them. For example: javascript Copy code {{{{{{{ class="!whitespace-pre hljs language-javascript">const vector1 = new THREE.Vector2(1, 2); const vector2 = new THREE.Vector2(3, 4); const sum = vector1.add(vector2); console.log(sum.x); // prints 4 console.log(sum.y); // prints 6 In this code, we create two three.Vector2 objects, vector1 and vector2, and add them together using the add method. This returns a new three.Vector2 object representing the sum of the two vectors. three.Vector2 is one of many classes provided by the three.js library that make it easy to work with 2D and 3D graphics in JavaScript. It is particularly useful when you need to perform geometric operations on 2D vectors, such as in games or other interactive applications.

THREE.MeshLine.js

GitHub: szu-advtech/AdvTech

396
397
398
399
400
401
402
403
404
405
opacity: { type: 'f', value: this.opacity },
resolution: { type: 'v2', value: this.resolution },
sizeAttenuation: { type: 'f', value: this.sizeAttenuation },
near: { type: 'f', value: this.near },
far: { type: 'f', value: this.far },
dashArray: { type: 'v2', value: new THREE.Vector2( this.dashArray[ 0 ], this.dashArray[ 1 ] ) },
useDash: { type: 'f', value: this.useDash },
visibility: {type: 'f', value: this.visibility},
alphaTest: {type: 'f', value: this.alphaTest},
repeat: { type: 'v2', value: this.repeat }

398

+ 11 other calls in file

Projector.js

GitHub: jupyter-widgets/pythreejs

84
85
86
87
88
89
90
91
92
93
        this.x = 0;
        this.y = 0;
        this.z = 0;

        this.rotation = 0;
        this.scale = new THREE.Vector2();

        this.material = null;

};

185

866

+ 21 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Create a new Vector2 object
const vector = new THREE.Vector2(3, 4);

// Access the x and y components
console.log(vector.x); // prints 3
console.log(vector.y); // prints 4

// Add two Vector2 objects together
const vector1 = new THREE.Vector2(1, 2);
const vector2 = new THREE.Vector2(3, 4);

const sum = vector1.add(vector2);

console.log(sum.x); // prints 4
console.log(sum.y); // prints 6

In this example, we first create a new three.Vector2 object vector with an x component of 3 and a y component of 4. We then access the x and y components using the x and y properties, respectively. We then create two additional three.Vector2 objects, vector1 and vector2, and use the add method to add them together. This returns a new three.Vector2 object sum representing the sum of the two vectors. We then access the x and y components of sum using the x and y properties, respectively. This example demonstrates how you can use three.Vector2 to create and manipulate 2D vectors in a three.js application.

Scene.js

GitHub: K3D-tools/K3D-jupyter

406
407
408
409
410
411
412
413
414
415
    color: new THREE.Color(1.0, 1.0, 1.0),
    opacity: 0.75,
    sizeAttenuation: true,
    transparent: true,
    lineWidth: minorScale * 0.05,
    resolution: new THREE.Vector2(K3D.getWorld().width, K3D.getWorld().height),
    side: THREE.DoubleSide,
});

iterableAxes.forEach((iterateAxis) => {

116

804

Volume.js

GitHub: K3D-tools/K3D-jupyter

159
160
161
162
163
164
165
166
167
168
        config.volume.shape[2],
        config.volume.shape[1],
        config.volume.shape[0],
    ),
},
lightMapRenderTargetSize: {value: new THREE.Vector2(lightMapRenderTargetSize, lightMapRenderTargetSize)},
low: {value: colorRange[0]},
high: {value: colorRange[1]},
samples: {value: samples},
alpha_coef: {value: config.alpha_coef},

115

803

geo-three.cjs

GitHub: tentone/geo-three

354
355
356
357
358
359
360
361
362
363
class UnitsUtils {
    static datumsToSpherical(latitude, longitude) {
        const x = longitude * UnitsUtils.EARTH_ORIGIN / 180.0;
        let y = Math.log(Math.tan((90 + latitude) * Math.PI / 360.0)) / (Math.PI / 180.0);
        y = y * UnitsUtils.EARTH_ORIGIN / 180.0;
        return new three.Vector2(x, y);
    }
    static sphericalToDatums(x, y) {
        const longitude = x / UnitsUtils.EARTH_ORIGIN * 180.0;
        let latitude = y / UnitsUtils.EARTH_ORIGIN * 180.0;

468

+ 3 other calls in file

software-renderer.js

GitHub: AVGP/three-software-renderer

741
742
743
744
745
746
747
748
749
750
  color: face.color
};
var mpUV12, mpUV23, mpUV31;
if (bHasUV) {
  if (mpUVPoolCount === mpUVPool.length) {
    mpUV12 = new THREE.Vector2();
    mpUVPool.push(mpUV12);
    ++mpUVPoolCount;

    mpUV23 = new THREE.Vector2();

+ 5 other calls in file

THREEUtil.js

GitHub: VCityTeam/UD-Viz

62
63
64
65
66
67
68
69
70
71

// Add lights
const { directionalLight } = this.addLights(scene);

// Configure shadows based on a config files
directionalLight.shadow.mapSize = new THREE.Vector2(
  configToApply.shadowMapSize,
  configToApply.shadowMapSize
);
directionalLight.castShadow = true;

+ 4 other calls in file

render.js

GitHub: hobuinc/usgs-lidar

438
439
440
441
442
443
444
445
446
this.textureHeight = 0;

this.uniforms = {
	pointSize: {type: 'f', value: currentPointSize() },
	xyzScale: { type: 'v3', value: new THREE.Vector3(1, 1, 1) },
	zrange: { type: 'v2', value: new THREE.Vector2(0, 0) },
	offsets: { type: 'v3', value: new THREE.Vector3(0, 0, 0) },
	which: { type: 'v3', value: new THREE.Vector3(0, 0, 0) }
};

110

+ 4 other calls in file

JSONLoader.js

GitHub: alan-wu/ZincJS

3
4
5
6
7
8
9
10
11
12
var LoaderUtils = THREE.LoaderUtils;
var AnimationClip = THREE.AnimationClip;
var Vector3 = THREE.Vector3;
var Vector4 = THREE.Vector4;
var Color = THREE.Color;
var Vector2 = THREE.Vector2;
var Face3 = require('../three/Geometry').Face3;
var Geometry = require('../three/Geometry').Geometry;
var FileLoader = THREE.FileLoader;
var DefaultLoadingManager = THREE.DefaultLoadingManager;

+ 23 other calls in file

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

670
671
672
673
674
675
676
677
678
  sphereTexture: { type: "t", value: sphereImg }
};
const uvs = [
  new THREE.Vector2(0.5, 0),
  new THREE.Vector2(0.5, 1),
  new THREE.Vector2(0.5, 1)
];
const coneGeom = new THREE.BufferGeometry();
let ix21 = 0;

+ 15 other calls in file

OrbitControls.js

GitHub: MozillaReality/mred

259
260
261
262
263
264
265
266
267
268
var panOffset = new THREE.Vector3();
var zoomChanged = false;

var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();

var panStart = new THREE.Vector2();
var panEnd = new THREE.Vector2();
var panDelta = new THREE.Vector2();

+ 8 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

648
649
650
651
652
653
654
655
656
657
    pending.push( parser.assignTexture( materialParams, 'clearcoatNormalMap', extension.clearcoatNormalTexture ) );

    if ( extension.clearcoatNormalTexture.scale !== undefined ) {

        const scale = extension.clearcoatNormalTexture.scale;
        materialParams.clearcoatNormalScale = new THREE.Vector2( scale, scale );

    }

}

+ 3 other calls in file

OBJExport.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

8
9
10
11
12
13
14
15
16
let indexVertexUvs = 0;
let indexNormals = 0;
const vertex = new THREE.Vector3();
const color = new THREE.Color();
const normal = new THREE.Vector3();
const uv = new THREE.Vector2();
const face = [];

function parseMesh( mesh ) {

+ 2 other calls in file

morpheusview.js

GitHub: audunsh/evince

173
174
175
176
177
178
179
180
181
182

const renderPass = new RenderPass( this.scene, this.camera );
const composer = new EffectComposer( this.renderer );
composer.addPass( renderPass );

const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = 0.5;
bloomPass.strength = 0.5;
bloomPass.radius = 0.5;
composer.addPass( bloomPass );

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
    "normalMap",
    materialDef.normalTexture
  )
);

materialParams.normalScale = new THREE.Vector2(1, 1);

if (materialDef.normalTexture.scale !== undefined) {
  materialParams.normalScale.set(
    materialDef.normalTexture.scale,

+ 14 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

2779
2780
2781
2782
2783
2784
2785
2786
2787

let position = pointerPositions[ event.pointerId ];

if ( position === undefined ) {

	position = new THREE.Vector2();
	pointerPositions[ event.pointerId ] = position;

}

+ 359 other calls in file

spotlightview_old.js

GitHub: audunsh/evince

2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
const spherical = new THREE.Spherical();
const sphericalDelta = new THREE.Spherical();
let scale = 1;
const panOffset = new THREE.Vector3();
let zoomChanged = false;
const rotateStart = new THREE.Vector2();
const rotateEnd = new THREE.Vector2();
const rotateDelta = new THREE.Vector2();
const panStart = new THREE.Vector2();
const panEnd = new THREE.Vector2();

+ 339 other calls in file

fashionview.js

GitHub: audunsh/evince

122
123
124
125
126
127
128
129
130
131

      composer.addPass( renderPass );
      

      let raycaster = new THREE.Raycaster();
let pointer = new THREE.Vector2();

      const gui = new GUI();

      let options  = this.model.get('options');

+ 2 other calls in file

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About