Does anyone have any info on how the “Three.js Mentor” was made (ChatGPT - Three.js Mentor)?
Can I set the draw range for instances. For example draw the entire instances cube, but draw only instances 10 - 50
ChatGPT said:
Thought for 18 seconds
In Three.js there isn’t a built-in “start”/“end” drawRange for instances – only a “count” of how many instances to render. Under the hood, Three.js calls the WebGL draw*Instanced API without any instance offset, so you can only control how many (mesh.count), not which slice of them.
InstancedMesh.count represents the number of instances actually rendered. It defaults to the value you passed into the constructor but you can lower it at any time (down to zero) to hide the tail of your buffer.
threejs.org
There is no instance-offset parameter – only count. If you need to render instances 10–50 you have to either reorder/slice your buffer so those instances become 0–40, or draw them into a fresh InstancedMesh, or use a custom shader to skip the others.
three.js forum
1. Simple “slice out” into a new InstancedMesh
Copy just the matrices you care about (10–50) into a brand-new InstancedMesh of length 41:
js
Copy
Edit
import * as THREE from 'three';
// assume you already have an InstancedMesh with 100 cubes:
const fullMesh = new THREE.InstancedMesh( cubeGeometry, basicMaterial, 100 );
// …you’ve set all 100 matrices via fullMesh.setMatrixAt(i, …)…
// now we only want instances 10 through 50
const start = 10;
const end = 50;
const len = end - start + 1;
// build a new mesh containing just that slice
const sliceMesh = new THREE.InstancedMesh( cubeGeometry, basicMaterial, len );
const tmpMat = new THREE.Matrix4();
for ( let i = 0; i < len; i++ ) {
fullMesh.getMatrixAt( start + i, tmpMat );
sliceMesh.setMatrixAt( i, tmpMat );
}
sliceMesh.instanceMatrix.needsUpdate = true;
// add it to the scene instead of fullMesh
scene.add( sliceMesh );
– ▶︎ Live demo on JSFiddle:
https://jsfiddle.net/your-user/abcd1234/
2. Reorder your instanceMatrix and just adjust count
If you’d rather not allocate a new mesh, you can swap the entries in the existing instanceMatrix.array so that indices 10–50 become 0–40, then do:
js
Copy
Edit
instancedMesh.count = 41;
instancedMesh.instanceMatrix.needsUpdate = true;
That way Three.js will render only the first 41 matrices (which you’ve pre-moved to front).
3. Shader-based “range test”
If you need the full 100 matrices there but only want to actually render 41, you can inject a little GLSL into your material via onBeforeCompile to discard instances outside your range:
js
Copy
Edit
const start = 10;
const length = 41;
basicMaterial.onBeforeCompile = ( shader ) => {
shader.uniforms.uStart = { value: start };
shader.uniforms.uLength = { value: length };
// in the vertex shader, move out-of-view any instance outside [start, start+length):
shader.vertexShader = shader.vertexShader.replace(
'#include <begin_vertex>',
`
#include <begin_vertex>;
if ( gl_InstanceID < uStart || gl_InstanceID >= uStart + uLength ) {
// push it way off-screen
transformed += 1e6 * vec3(1.0);
}
`
);
};
basicMaterial.needsUpdate = true;
This still sends all 100 instances through the pipeline, but only those in your window actually end up on screen.
TL;DR
No built-in “draw instances 10–50” parameter.
Yes you can control how many via mesh.count.
To control which ones, either slice the buffer into a new InstancedMesh, reorder your data, or do a shader-side test on gl_InstanceID.
Pick whichever approach best fits your performance and code-organization needs!
I see, so did the Three.js team just upload all the docs to the GPT? Do you know if all the code files were uploaded as well or just the docs?
Was this just regular chatGTP or the mentor?
the mentor.. but I have a paid account so maybe it worked better?
lemme try in incog… hmm requires login.. so idk. maybe you got a bad dice roll?
Geez i also just noticed that it thought for 18 seconds?