Home

Index

How to use the PointsMaterial function from three

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

three.PointsMaterial is a class in the Three.js library that defines the material used to render particles as points.

PointsBillboard.js

105
106
107
108
109
110
111
112
113
114
    extensions: {
        fragDepth: true,
    },
});

// monkey-patching for imitate THREE.PointsMaterial
material.size = config.point_size;
material.color = new THREE.Color(1.0, 1.0, 1.0);
material.map = null;
material.isPointsMaterial = true;

115

803

primitives.js

GitHub: PrismarineJS/prismarine-viewer

38
39
40
41
42
43
44
45
46
47
    for (const p of primitive.points) {
      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

How does three.PointsMaterial work?

three.PointsMaterial is a class in the Three.js library that represents a material used to render a set of particles as points in 3D space, which defines how the particles are shaded, lit, and textured. It provides properties like color, size, opacity, and blending, which control the appearance of the particles, as well as support for various texture maps that can be used to add additional detail and complexity to the rendered particles. When applied to a set of particles, it determines the visual characteristics of each individual particle and how they interact with the surrounding environment.

main.js

GitHub: kentywang/Agamari

230
231
232
233
234
235
236
237
world.add(planetBody);

// create stars
var particleCount = 1800,
  particles = new THREE.Geometry(),
  pMaterial = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 2

+ 15 other calls in file

AddLayerFromConfig.js

GitHub: VCityTeam/UD-Viz

55
56
57
58
59
60
61
62
63
64
}

let overrideMaterial = false;
let material;
if (layer['pc_size']) {
  material = new THREE.PointsMaterial({
    size: layer['pc_size'],
    vertexColors: true,
  });
  overrideMaterial = true;

+ 69 other calls in file

Ai Example

1
2
3
4
5
6
7
8
// create a new material for a set of points
const material = new THREE.PointsMaterial({
  color: 0xffffff, // white color
  size: 5, // size of points in pixels
});

// create a set of points using the material
const points = new THREE.Points(geometry, material);

In this example, a new PointsMaterial is created with a white color and a size of 5 pixels. This material is then used to create a set of points using a geometry object. The resulting Points object can then be added to a THREE.Scene and rendered with a THREE.Renderer.

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
var cacheKey = "PointsMaterial:" + material.uuid;

var pointsMaterial = this.cache.get(cacheKey);

if (!pointsMaterial) {
  pointsMaterial = new THREE.PointsMaterial();
  THREE.Material.prototype.copy.call(pointsMaterial, material);
  pointsMaterial.color.copy(material.color);
  pointsMaterial.map = material.map;
  pointsMaterial.sizeAttenuation = false; // glTF spec says points should be 1px

+ 14 other calls in file

index.cjs

GitHub: Brakebein/node-three-gltf

1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
const useFlatShading = geometry.attributes.normal === undefined;
if (mesh.isPoints) {
    const cacheKey = 'PointsMaterial:' + material.uuid;
    let pointsMaterial = this.cache.get(cacheKey);
    if (!pointsMaterial) {
        pointsMaterial = new three.PointsMaterial();
        three.Material.prototype.copy.call(pointsMaterial, material);
        pointsMaterial.color.copy(material.color);
        pointsMaterial.map = material.map;
        pointsMaterial.sizeAttenuation = false;

scenes.js

GitHub: gracexu94/FinalProject

482
483
484
485
486
487
488
489
490
491
];
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;

+ 5 other calls in file

sceneLoader.js

GitHub: alan-wu/ZincJS

285
286
287
288
289
290
291
292
293
294

//Internal loader for a regular zinc geometry.
const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
  return (geometry, materials) => {
    const newPointset = new (require('./primitives/pointset').Pointset)();
    let material = new THREE.PointsMaterial({ alphaTest: 0.5, size: 10, sizeAttenuation: false });
    if (materials && materials[0]) {
      if (1.0 > materials[0].opacity) {
        material.transparent = true;
      }

+ 25 other calls in file

t.js

GitHub: 52black/scratch-vm

1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
	materialLine.lights = false; // TOFIX
	material = materialLine;

} else if ( isPoints && material && ! ( material instanceof THREE.PointsMaterial ) ) {

	var materialPoints = new THREE.PointsMaterial( { size: 10, sizeAttenuation: false } );
	materialLine.copy( material );
	material = materialPoints;

}

+ 37 other calls in file

PolyhedralDiagram.js

GitHub: shrekshao/Polyhedron3D

115
116
117
118
119
120
121
122
123
// arrow: new THREE.LineBasicMaterial( { 
//     color: 0x000000
// } ),
arrow: 0x009600,

vertex: new THREE.PointsMaterial({
    color: 0x000000,
    size: 0.5
}),

obj-loader.js

GitHub: workbee49/home_planner

439
440
441
442
443
444
445
446
447
448
}
if (!material) {
  if (isLine) {
    material = new THREE.LineBasicMaterial();
  } else if (isPoints) {
    material = new THREE.PointsMaterial({ size: 1, sizeAttenuation: false });
  } else {
    material = new THREE.MeshPhongMaterial();
  }
  material.name = sourceMaterial.name;

Feature2Mesh.js

GitHub: VeinKowal/veins

131
132
133
134
135
136
137
138
139
140
141
142
      indices[++j] = i + 1;
    }
  }
}


var pointMaterial = new THREE.PointsMaterial();


function featureToPoint(feature, options) {
  var ptsIn = feature.vertices;
  var normals = feature.normals;

hero.js

GitHub: angeal185/animated-agency-webapp-using-GSAP-threejs-json-jquery

66
67
68
69
70
71
72
73
74
75

color  = parameters[i][0];
sprite = parameters[i][1];
size   = parameters[i][2];

materials[i] = new THREE.PointsMaterial({
	size: size,
	map: sprite,
	depthTest: false,
	transparent : true

GLTFLoader.js

GitHub: VeinKowal/veins

2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
if (mesh.isPoints) {
  var cacheKey = 'PointsMaterial:' + material.uuid;
  var pointsMaterial = this.cache.get(cacheKey);

  if (!pointsMaterial) {
    pointsMaterial = new _three.PointsMaterial();

    _three.Material.prototype.copy.call(pointsMaterial, material);

    pointsMaterial.color.copy(material.color);

main.js

GitHub: fagan2888/EuroGridLayer

55
56
57
58
59
60
61
62
63
64
    const color = new THREE.Color(valueToColor(cell[2]));
    colors.push(color);
}

pointsGeometry.colors = colors;
pointsMaterial = new THREE.PointsMaterial({
    // map: spriteMap,
    size: viewerOptions.point_size,
    // transparent: true,
    // blending: THREE.AdditiveBlending,

+ 9 other calls in file

old.js

GitHub: jereddanielson/chaos-equations

411
412
413
414
415
416
417
418
419
minY = geometry.boundingBox.min.y;
maxY = geometry.boundingBox.max.y;

//

var material = new THREE.PointsMaterial({
  size: 1,
  vertexColors: THREE.VertexColors
});

index.js

GitHub: jereddanielson/chaos-equations

125
126
127
128
129
130
131
132
133
134
geometry.computeBoundingSphere();
geometry.computeBoundingBox();
this.geometry = geometry;

const { attenuation = 0.85 } = this.props;
const pointsMaterial = new THREE.PointsMaterial({
  size: pointSize,
  vertexColors: THREE.VertexColors,
  transparent: true,
  opacity: 1 - attenuation,

transformation.js

GitHub: rendoir/feup-thesis

146
147
148
149
150
151
152
153
154
155
    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 ) {
    // Compare bounding box to first state

+ 3 other calls in file

game.js

GitHub: avocadojesus/hackaholics

129
130
131
132
133
134
135
136
137
138

}

var stars;
var starsMaterials = [
  new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
  new THREE.PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
  new THREE.PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
  new THREE.PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
  new THREE.PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),

+ 11 other calls in file

THREE.WebAR.js

GitHub: magr1725/jeromeetienne-AR.js

86
87
88
89
90
91
92
93
94
95
* @return {THREE.BufferGeometry} The buffer geometry that represents the points in the point cloud.
*
* NOTE: A possible way to render the point cloud could be to use the THREE.BufferGeometry instance returned by this method along with THREE.Points and THREE.PointMaterial.

  var pointCloud = new THREE.VRPointCloud(vrDisplay, true);
  var material = new THREE.PointsMaterial( { size: 0.01, vertexColors: THREE.VertexColors } );
  var points = new THREE.Points( pointCloud.getBufferGeometry(), material );
*/
THREE.WebAR.VRPointCloud.prototype.getBufferGeometry = function() {
  return this._bufferGeometry;

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About