Home

Index

How to use the Points function from three

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

three.Points is a Three.js object that renders particles as small points, each having their own material and position.

particles.js

69
70
71
72
73
74
75
76
77
78
});

material.uniforms.color1.value = _color1;
material.uniforms.color2.value = _color2;

var mesh = new THREE.Points( geometry, material );

mesh.customDistanceMaterial = new THREE.ShaderMaterial( {
    uniforms: {
        lightPos: { type: 'v3', value: new THREE.Vector3( 0, 0, 0 ) },

160

993

Node.js

GitHub: stephensmitchell-forks/sketch-threejs

45
46
47
48
49
50
51
52
53
54
});

// Create Object3D
this.obj = new THREE.Mesh(geometry, material);
this.objWire = new THREE.Mesh(geometry, materialWire);
this.objPoints = new THREE.Points(geometry, materialPoints);

this.obj.position.set(0, 0, -1200);
this.objWire.position.set(0, 0, -1200);
this.objPoints.position.set(0, 0, -1200);

260

How does three.Points work?

three.Points is a class in the Three.js library that represents a set of points in 3D space, which can be used to create point clouds or other visualizations of discrete data. It is essentially a group of three.Sprite objects that share a common material and geometry. Each three.Sprite represents a single point, which can be rendered with a custom texture or color. The three.Points class provides methods for manipulating the points, such as adding or removing them, and for setting their position, size, and other properties.

PointsBillboard.js

GitHub: K3D-tools/K3D-jupyter

111
112
113
114
115
116
117
118
119
material.size = config.point_size;
material.color = new THREE.Color(1.0, 1.0, 1.0);
material.map = null;
material.isPointsMaterial = true;

const object = new THREE.Points(
    getGeometry(pointPositions, colors, opacities, sizes, useColorMap ? attribute : null),
    material,
);

115

803

primitives.js

GitHub: PrismarineJS/prismarine-viewer

39
40
41
42
43
44
45
46
47
48
      points.push(p.x, p.y, p.z)
    }
    const geometry = new THREE.BufferGeometry()
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(points, 3))
    const material = new THREE.PointsMaterial({ color, size, sizeAttenuation: false })
    return new THREE.Points(geometry, material)
  }
  return null
}

163

+ 5 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
26
27
28
29
30
31
32
33
34
35
// Create a Three.js scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a group of particles
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 100;
const positionArray = new Float32Array(particlesCount * 3);

// Populate the position array with random values
for (let i = 0; i < particlesCount * 3; i++) {
  positionArray[i] = (Math.random() - 0.5) * 10;
}

particlesGeometry.setAttribute(
  "position",
  new THREE.BufferAttribute(positionArray, 3)
);
const particlesMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
});
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);

// Move the camera back a bit and render the scene
camera.position.z = 5;
renderer.render(scene, camera);

In this example, three.Points is used to create a group of particles, represented by points in Three.js space. The THREE.BufferGeometry class is used to define the particle positions, and the THREE.PointsMaterial class is used to define their appearance. Finally, the THREE.Points class is used to create the particle system, and it is added to the scene using the add method.

KeplerParticles.js

GitHub: typpo/spacekit

113
114
115
116
117
118
119
120
121
122
        depthWrite: false,
        transparent: true
    });
    this.shaderMaterial = shader;
    this.geometry = geometry;
    this.particleSystem = new THREE.Points(geometry, shader);
}
/**
 * Add a particle to this particle system.
 * @param {Ephem} ephem Kepler ephemeris

398

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

635
636
637
638
639
640
641
642
643
644
});
material.extensions.fragDepth = true;

let materialShader = null;

const particles = new THREE.Points(geometry, material);
particles.userData = { indexLookup, materialShader };

material.onBeforeCompile = shader => {
  shader.uniforms.alpha = { value: 0 };

+ 3 other calls in file

main.js

GitHub: fagan2888/EuroGridLayer

63
64
65
66
67
68
69
70
71
72
    // transparent: true,
    // blending: THREE.AdditiveBlending,
    sizeAttenuation: viewerOptions.point_attenuation,
    vertexColors: THREE.VertexColors,
});
pointCloud = new THREE.Points(pointsGeometry, pointsMaterial);
pointCloud.geometry.boundingBox = null;
const pointsContainer = new THREE.Object3D();
pointsContainer.add(pointCloud);
viewer.scene.add(pointsContainer);

+ 9 other calls in file

index.js

GitHub: shrekshao/ParticleProjector

200
201
202
203
204
205
206
207
208
// var geometry = new THREE.BufferGeometry();
// geometry.addAttribute( 'position', new THREE.BufferAttribute( data, 4 ).setDynamic( true ) );



// pointMesh = new THREE.Points(geometry, particleMaterial);

// // scene.add( sphere );
// scene.add( pointMesh );

+ 2 other calls in file

scenes.js

GitHub: gracexu94/FinalProject

483
484
485
486
487
488
489
490
491
492
var color, size; 
for ( var i = 0; i < parameters.length; i ++ ) {
  color = parameters[i][0];
  size  = parameters[i][1];
  materials[i] = new THREE.PointsMaterial( { size: size } );
  particles = new THREE.Points( geometry, materials[i] );
  particles.rotation.x = Math.random() * 6;
  particles.rotation.y = Math.random() * 6;
  particles.rotation.z = Math.random() * 6;
  scene.add( particles );

+ 5 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2410
2411
2412
2413
2414
2415
2416
2417
2418
2419
} else if (primitive.mode === WEBGL_CONSTANTS.LINE_STRIP) {
  mesh = new THREE.Line(geometry, material);
} else if (primitive.mode === WEBGL_CONSTANTS.LINE_LOOP) {
  mesh = new THREE.LineLoop(geometry, material);
} else if (primitive.mode === WEBGL_CONSTANTS.POINTS) {
  mesh = new THREE.Points(geometry, material);
} else {
  throw new Error(
    "THREE.GLTFLoader: Primitive mode unsupported: " + primitive.mode
  );

+ 14 other calls in file

index.js

GitHub: OpenSlicer/OpenSlicer

358
359
360
361
362
363
364
365
366
367
if (options.contours) {
    currentLayer.add(currentLayer.contourLines)
}

if (options.points) {
    currentLayer.points = new THREE.Points(geom, new THREE.PointsMaterial({
        color: 0xffff00,
        size: 0.5,
    }))
    currentLayer.add(currentLayer.points)

+ 2 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3328
3329
3330
3331
3332
3333
3334
3335
3336
3337

    mesh = new THREE.LineLoop( geometry, material );

} else if ( primitive.mode === WEBGL_CONSTANTS.POINTS ) {

    mesh = new THREE.Points( geometry, material );

} else {

    throw new Error( 'THREE.GLTFLoader: Primitive mode unsupported: ' + primitive.mode );

t.js

GitHub: 52black/scratch-vm

1345
1346
1347
1348
1349
1350
1351
1352
1353
1354

	mesh = new THREE.LineSegments( buffergeometry, createdMaterials[ 0 ] );

} else if ( isPoints ) {

	mesh = new THREE.Points( buffergeometry, createdMaterials[ 0 ] );

} else {

	mesh = new THREE.Mesh( buffergeometry, createdMaterials[ 0 ] );

+ 37 other calls in file

PBVRenderer.js

GitHub: nagyist/PBVR-client

132
133
134
135
136
137
138
139
140
141
      });
    });
    this.setVertexCoords(Float32Array.from(particleCoords), idx);
    this.setVertexValues(Float32Array.from(particleValues), idx);
    this.setVertexAlphaZeros(Float32Array.from(particleAlphaZeros), idx);
    scene.add(new THREE.Points(this.geometries[idx], this.materials[idx]));
  });

  this.updateTransferFunction(params);
}

+ 9 other calls in file

FireSystem.js

GitHub: piscis/xmas2016

169
170
171
172
173
174
175
176
177
178
  // depthTest: false,
  depthWrite: false,
});


this.system = new THREE.Points(this.geom, this.mat);

Mediator.on('freqDark:update', ({ total }) => {
  this.uniforms.volume.value = total / 200;
});

old.js

GitHub: jereddanielson/chaos-equations

416
417
418
419
420
421
422
423
424
425
var material = new THREE.PointsMaterial({
  size: 1,
  vertexColors: THREE.VertexColors
});

points = new THREE.Points(geometry, material);
points.scale.x = plotScale;
points.scale.y = -plotScale;
camera.lookAt(0, 0, 0);
scene.add(points);

index.js

GitHub: jereddanielson/chaos-equations

133
134
135
136
137
138
139
140
141
142
  transparent: true,
  opacity: 1 - attenuation,
  // blending: THREE.AdditiveBlending,
});

const points = new THREE.Points(geometry, pointsMaterial);
points.scale.x = scaleFactor;
points.scale.y = -scaleFactor;
camera.lookAt(0, 0, 0);
scene.add(points);

index.cjs

GitHub: Brakebein/node-three-gltf

2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
}
else if (primitive.mode === WEBGL_CONSTANTS.LINE_LOOP) {
    mesh = new three.LineLoop(geometry, material);
}
else if (primitive.mode === WEBGL_CONSTANTS.POINTS) {
    mesh = new three.Points(geometry, material);
}
else {
    throw new Error('THREE.GLTFLoader: Primitive mode unsupported: ' + primitive.mode);
}

transformation.js

GitHub: rendoir/feup-thesis

145
146
147
148
149
150
151
152
153
154
let line = new THREE.Line( geometryPoints, 
    new THREE.LineBasicMaterial( { color: 0x000000, transparent: true, opacity: 1 } ) );
group.add( line );

// Setup points
let points = new THREE.Points( geometryPoints, 
    new THREE.PointsMaterial( { color: 0x000000, size: 2, transparent: true, opacity: 1 } ) );
group.add( points );

if ( this.isochronMap ) {

+ 3 other calls in file

game.js

GitHub: avocadojesus/hackaholics

139
140
141
142
143
144
145
146
147
148
  new THREE.PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
];

for ( i = 10; i < 30; i ++ ) {

  stars = new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );

  stars.rotation.x = Math.random() * 6;
  stars.rotation.y = Math.random() * 6;
  stars.rotation.z = Math.random() * 6;

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About