How to use the InstancedMesh function from three

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

Core.js

41
42
43
44
45
46
47
48
49
50
geometry.setAttribute('radian', radian);
geometry.setAttribute('hsv', hsv);
geometry.setAttribute('noiseDiff', noiseDiff);
geometry.setAttribute('speed', speed);

return new THREE.InstancedMesh(
  geometry,
  new THREE.RawShaderMaterial({
    uniforms: this.uniforms,
    vertexShader: require('./glsl/core.vs').default,

260

PointsMesh.js

GitHub: K3D-tools/K3D-jupyter

109
110
111
112
113
114
115
116
117
118
    lights: true,
    clipping: true,
    vertexColors: THREE.VertexColors,
});

const object = new THREE.InstancedMesh(geometry, material, positions.length / 3);
object.instanceMatrix.setUsage(THREE.DynamicDrawUsage);

modelMatrix.set.apply(modelMatrix, config.model_matrix.data);
object.applyMatrix4(modelMatrix);

115

803

fashionview.js

GitHub: audunsh/evince

379
380
381
382
383
384
385
386
387
388
let material = new THREE.MeshStandardMaterial( );

material.roughness = 0.2;
material.metalness = 0.2;

let imesh = new THREE.InstancedMesh( baseGeometry, material, 10000);
imesh.count = this.pos.length;
imesh.instanceMatrix.needsUpdate = true;

this.scene.add(imesh);

+ 5 other calls in file

latticeview.js

GitHub: audunsh/evince

296
297
298
299
300
301
302
303
304
material.side = THREE.FrontSide;

//console.log(THREE);


let imesh = new THREE.InstancedMesh( instancedGeometry, material, instanceCount );
imesh.instanceMatrix.needsUpdate = true;
this.scene.add(imesh);

moving_head.js

GitHub: ASLS-org/studio

962
963
964
965
966
967
968
969
970
971

baseGeo.setAttribute('highlight', emissive_buffer_attribute);
yokeGeo.setAttribute('highlight', emissive_buffer_attribute);
headGeo.setAttribute('highlight', emissive_buffer_attribute);

baseMesh = new THREE.InstancedMesh(baseGeo, MODEL_MATERIAL, MAX_INSTANCES);
yokeMesh = new THREE.InstancedMesh(yokeGeo, MODEL_MATERIAL, MAX_INSTANCES);
headMesh = new THREE.InstancedMesh(headGeo, MODEL_MATERIAL, MAX_INSTANCES);

baseMesh.instanceCount = instanceCount;

+ 23 other calls in file

glyphset.js

GitHub: alan-wu/ZincJS

87
88
89
90
91
92
93
94
95
96
baseSize = glyphsetData.metadata.base_size;
offset = glyphsetData.metadata.offset;
scaleFactors = glyphsetData.metadata.scale_factors;
const loader = new JSONLoader();
this.geometry = new THREE.BufferGeometry();
this.morph = new THREE.InstancedMesh(this.geometry, undefined, numberOfVertices);
if (isInline) {
  var object = loader.parse(glyphURL);
  (meshloader(finishCallback, displayLabels))(object.geometry, object.materials);
  object.geometry.dispose();

+ 9 other calls in file

index.js

GitHub: ZhYGuoL/ThreeJSBackground

127
128
129
130
131
132
133
134
135
  clearcoatNormalMap: normalMapTexture,
  clearcoatNormalScale: new THREE.Vector2(options.clearcoatNormalScale)
});

const MESH_COUNT = 400;
const mesh = new THREE.InstancedMesh(geometry, material, MESH_COUNT);
scene.add(mesh);

const matrixDummy = new THREE.Object3D();

+ 2 other calls in file

index.js

GitHub: nvianin/genetic-algorithm

251
252
253
254
255
256
257
258
259
260
)
this.wolves.castShadow = true;
this.wolves.receiveShadow = true;
this.scene.add(this.wolves)

this.grass = new THREE.InstancedMesh(
    this.grass_model.geometry.scale(4, 4, 4),
    this.grass_model.material,
    MAX_GRASS
)

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