Home

Index

How to use the Vector4 function from three

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

three.Vector4 is a class in the Three.js library that represents a four-dimensional vector with x, y, z, and w components used for 3D graphics calculations.

Projector.js

42
43
44
45
46
47
48
49
50
51

var RenderableVertex = function () {

        this.position = new THREE.Vector3();
        this.positionWorld = new THREE.Vector3();
        this.positionScreen = new THREE.Vector4();

        this.visible = true;

};

185

867

+ 43 other calls in file

software-renderer.js

GitHub: Tibus/TouchScreen-For-NanoDLP

55
56
57
58
59
60
61
62
63
64

var projector = new Projector.Projector();

var spriteV1 = new THREE.Vector4();
var spriteV2 = new THREE.Vector4();
var spriteV3 = new THREE.Vector4();

var spriteUV1 = new THREE.Vector2();
var spriteUV2 = new THREE.Vector2();
var spriteUV3 = new THREE.Vector2();

+ 5 other calls in file

How does three.Vector4 work?

three.Vector4 works by creating a four-dimensional vector with x, y, z, and w components that can be used for various 3D graphics calculations such as transformation matrices, colors, and lighting. The three.Vector4 class provides methods for performing mathematical operations on vectors, such as addition, subtraction, dot product, and cross product. It also has methods for normalizing, setting, and copying vectors. When creating a three.Vector4 object, the x, y, z, and w components can be set either explicitly as arguments to the constructor, or by passing another three.Vector4 object whose components will be copied. The three.Vector4 object can be accessed and modified directly using its properties (x, y, z, and w) or by calling the provided methods. three.Vector4 objects are commonly used in conjunction with other classes in the Three.js library, such as three.Matrix4, three.Quaternion, and three.Euler, to perform transformations and calculations in 3D graphics.

render.js

GitHub: hobuinc/usgs-lidar

413
414
415
416
417
418
419
420
421
var mat = getMaterial();

mat.uniforms.do_plane_clipping.value = 1; // enable clipping

mat.uniforms.planes.value = region.planes.map(function(p) {
	return new THREE.Vector4(p.normal.x, p.normal.y, p.normal.z, p.constant);
});

renderer.render(scene, camera, target, forceClear);

110

software-renderer.js

GitHub: AVGP/three-software-renderer

773
774
775
776
777
778
779
780
781
782
  mpUV31.copy(uv3).multiplyScalar(weight).add(uv1).multiplyScalar(1 / (weight + 1));
}

var mpV12, mpV23, mpV31;
if (mpVPoolCount === mpVPool.length) {
  mpV12 = new THREE.Vector4();
  mpVPool.push(mpV12);
  ++mpVPoolCount;

  mpV23 = new THREE.Vector4();

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
const { Vector4 } = require("three");

// Create a new Vector4 object with x, y, z, and w components
const vector1 = new Vector4(1, 2, 3, 4);

// Create another Vector4 object with the same components as vector1
const vector2 = new Vector4().copy(vector1);

// Add the two vectors together
const result = new Vector4().addVectors(vector1, vector2);

console.log(result.toArray()); // Output: [ 2, 4, 6, 8 ]

In this example, we start by importing the Vector4 class from the Three.js library. We create a new Vector4 object called vector1 with the components x=1, y=2, z=3, and w=4. We also create another Vector4 object called vector2 with the same components as vector1 using the copy method. Next, we use the addVectors method to add vector1 and vector2 together and store the result in a new Vector4 object called result. The addVectors method adds the x, y, z, and w components of vector1 and vector2 together and returns a new Vector4 object with the result. Finally, we use the toArray method to convert the Vector4 object result into an array and log the result to the console. The output shows that the x, y, z, and w components of result have been added together and stored in the array [2, 4, 6, 8].

Simulation.js

GitHub: shrekshao/ParticleProjector

115
116
117
118
119
120
121
122
123
124
    "uDeltaT": { type: "f", value: 0.0 },
    "uTime": { type: "f", value: 0.0 },

    "uMousePos": { type: "v3", value: new THREE.Vector3(-999, -999, 0) }
    // "uInputPos": { type: "v3v", value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()] },
    // "uInputPosAccel": { type: "v4", value: new THREE.Vector4(0,0,0,0) },
},
defines: {
    // K_VEL_DECAY: '0.99'
    K_VEL_DECAY: '0.95'

+ 9 other calls in file

cardboard-distorter.js

GitHub: arturitu/webvr-template

20
21
22
23
24
25
26
27
28
29
uniforms: {
  'tDiffuse': {type: 't', value: null},
  'distortion': {type: 'v2', value: new THREE.Vector2(0.441, 0.156)},
  'leftCenter': {type: 'v2', value: new THREE.Vector2(0.5, 0.5)},
  'rightCenter': {type: 'v2', value: new THREE.Vector2(0.5, 0.5)},
  'background': {type: 'v4', value: new THREE.Vector4(0.0, 0.0, 0.0, 1.0)},
},

vertexShader: [
  'varying vec2 vUV;',

+ 9 other calls in file

threeAddons.js

GitHub: syntheticore/realmVR

33
34
35
36
37
38
39
40
41
uniforms: {
  "tDiffuse":   { type: "t", value: null },
  "distortion": { type: "v2", value: new THREE.Vector2(0.441, 0.156) },
  "projectionLeft":    { type: "v4", value: new THREE.Vector4(1.0, 1.0, -0.5, -0.5) },
  "unprojectionLeft":  { type: "v4", value: new THREE.Vector4(1.0, 1.0, -0.5, -0.5) },
  "backgroundColor": { type: "v4", value: new THREE.Vector4(0.0, 0.0, 0.0, 1.0) },
  "showCenter": { type: "i", value: 0},
  "dividerColor": { type: "v4", value: new THREE.Vector4(0.5, 0.5, 0.5, 1.0) },
},

+ 3 other calls in file

JSONLoader.js

GitHub: alan-wu/ZincJS

1
2
3
4
5
6
7
8
9
10
11


var Loader = require('../three/Loader').Loader;
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;

+ 23 other calls in file

renderer.js

GitHub: hephaistionn/age-of-civilization-2

98
99
100
101
102
103
104
105
106
107
    _pixelRatio = 1,

    _scissor = new THREE.Vector4( 0, 0, _width, _height ),
    _scissorTest = false,

    _viewport = new THREE.Vector4( 0, 0, _width, _height ),

// frustum

    _frustum = new THREE.Frustum(),

+ 71 other calls in file

fboHelper.js

GitHub: acidburn0zzz/symphony

32
33
34
35
36
37
38
39
40
41
vertexShader = precisionPrefix + glslify('../glsl/quad.vert')

_color = new THREE.Color()
colorMaterial = new THREE.RawShaderMaterial({
  uniforms: {
    u_color: { type: 'v4', value: new THREE.Vector4() }
  },
  depthTest: false,
  depthWrite: false,
  blending: THREE.NoBlending,

+ 7 other calls in file

Lensflare.js

GitHub: BaurTokenov/three-js-editor-2

114
115
116
117
118
119
120
121
122
123
};
//
const scale = new three_1.Vector2();
const screenPositionPixels = new three_1.Vector2();
const validArea = new three_1.Box2();
const viewport = new three_1.Vector4();
this.onBeforeRender = function (renderer, scene, camera) {
    renderer.getCurrentViewport(viewport);
    const invAspect = viewport.w / viewport.z;
    const halfViewportWidth = viewport.z / 2.0;

index.js

GitHub: cale-bradbury/hedron-sketches

60
61
62
63
64
65
66
67
68
69
  type: "b",
  value: false
},
center: {
  type: "v4",
  value: new THREE.Vector4(.01, 0., 0., 0.)
},
shift: {
  type: "v4",
  value: new THREE.Vector4(0, 0, 0, 0)

+ 5 other calls in file

PointsMaterial.js

GitHub: VeinKowal/veins

170
171
172
173
174
175
176
177
178
179
/**
 * @class      PointsMaterial
 * @param      {object}  [options={}]  The options
 * @param      {number}  [options.size=0]  size point
 * @param      {number}  [options.mode=MODE.COLOR]  display mode.
 * @param      {THREE.Vector4}  [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)]  overlay color.
 * @param      {THREE.Vector2}  [options.intensityRange=new THREE.Vector2(0, 1)]  intensity range.
 * @param      {boolean}  [options.applyOpacityClassication=false]  apply opacity classification on all display mode.
 * @param      {Classification}  [options.classification] -  define points classification.
 * @property {Classification}  classification - points classification.

+ 39 other calls in file

Extent.js

GitHub: VeinKowal/veins

379
380
381
382
383
384
385
386
387
388
   */

}, {
  key: "offsetToParent",
  value: function offsetToParent(extent) {
    var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new THREE.Vector4();

    if (this.crs != extent.crs) {
      throw new Error('unsupported mix');
    }

+ 2 other calls in file

c3DEngine.js

GitHub: VeinKowal/veins

29
30
31
32
33
34
35
36
37
38
39
/**
 * Generated On: 2015-10-5
 * Class: c3DEngine
 * Description: 3DEngine est l'interface avec le framework webGL.
 */
var depthRGBA = new THREE.Vector4();


var c3DEngine = /*#__PURE__*/function () {
  function c3DEngine(rendererOrDiv) {
    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

index.js

GitHub: edyMartin2/AdonisGameTeam

1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
var controlPoints = [];
var pointsValues = geometryNode.subNodes.Points.properties.a;

for ( var i = 0, l = pointsValues.length; i < l; i += 4 ) {

	controlPoints.push( new THREE.Vector4().fromArray( pointsValues, i ) );

}

var startKnot, endKnot;

+ 88 other calls in file

ColladaLoader.js

GitHub: isjackwild/deconstruction

755
756
757
758
759
760
761
762
763
764

// hook up the skin weights
// TODO - this might be a good place to choose greatest 4 weights
for ( var i =0; i < weights.length; i ++ ) {

	var indicies = new THREE.Vector4(weights[i][0] ? weights[i][0].joint : 0,weights[i][1] ? weights[i][1].joint : 0,weights[i][2] ? weights[i][2].joint : 0,weights[i][3] ? weights[i][3].joint : 0);
	var weight = new THREE.Vector4(weights[i][0] ? weights[i][0].weight : 0,weights[i][1] ? weights[i][1].weight : 0,weights[i][2] ? weights[i][2].weight : 0,weights[i][3] ? weights[i][3].weight : 0);

	skinIndices.push(indicies);
	skinWeights.push(weight);

+ 21 other calls in file

liquid.js

GitHub: emnh/factories

163
164
165
166
167
168
169
170
171
172
});

const uniforms = {
  iResolution:  { value: new THREE.Vector2() },
  iResolutionOne:  { value: new THREE.Vector2() },
  iMouse: { value: new THREE.Vector4() },
  iTime: { value: 0 },
  iFrame: { value: 0 },
  iChannel0: { value: bufferA.texture },
  iChannel1: { value: bufferC.texture },

+ 3 other calls in file

FBXLoader.js

GitHub: fahadbakkar8510/sports-configurator

2057
2058
2059
2060
2061
2062
2063
2064
2065
var knots = geoNode.KnotVector.a;
var controlPoints = [];
var pointsValues = geoNode.Points.a;

for (var i = 0, l = pointsValues.length; i < l; i += 4) {
  controlPoints.push(new THREE.Vector4().fromArray(pointsValues, i));
}

var startKnot, endKnot;

lensflare.js

GitHub: guitar19823/solar_system

157
158
159
160
161
162
163
164
165
166
//

var scale = new THREE.Vector2();
var screenPositionPixels = new THREE.Vector2();
var validArea = new THREE.Box2();
var viewport = new THREE.Vector4();

this.onBeforeRender = function (renderer, scene, camera) {

	renderer.getCurrentViewport(viewport);

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About