{{ message }}

Instantly share code, notes, and snippets.

# nbriz/multiplyMesh.js Secret

Last active Oct 3, 2020
multiply the mesh in your scene by placing it in a 'for loop', for threejs_playGnd
 /* ------------------- INSTRUCTIONS ----- to multiply your mesh place it in a for(){} 'loop' and place the for(){} 'loop' inside of your setup() function if you want to create more than 300 or less than 300, change the number -------------------------------------- */ for ( var i = 0; i < 300; i ++ ) { // your mesh code (from the geometry GUI) goes here } /* -------------------------------------- cube geometry EXAMPLE bleow, NOTICE: he color property is set to 'Math.random() * 0xffffff' this will generate a random color for each of the 500 cubes NOTICE: the mesh's position and rotation are also set to random variables, because otherwise the cubes would all render in the same spot. -------------------------------------- */ for ( var i = 0; i < 300; i ++ ) { geometry = new THREE.CubeGeometry( 25, 25, 25 ); material = new THREE.MeshBasicMaterial( { color: Math.random()*0xffffff } ); mesh = new THREE.Mesh( geometry, material); mesh.position.x = Math.random() * 1000 - 500; mesh.position.y = Math.random() * 1000 - 500; mesh.position.z = Math.random() * 1000 - 500; mesh.rotation.x = Math.random() * 2 * Math.PI; mesh.rotation.y = Math.random() * 2 * Math.PI; mesh.rotation.z = Math.random() * 2 * Math.PI; scene.add( mesh ); } /* -------------------------------------- try moving the camera around the scene place the following into your draw() -------------------------------------- */ camera.position.z = Math.sin( Date.now() * 0.002 ) * 500; camera.position.y = Math.sin( Date.now() * 0.002 ) * 300; camera.lookAt(mesh.position); /* -------------------------------------- try also leaving trails replace the 'renderer = new ...' on line 27 in the setup() function, with the code below -------------------------------------- */ renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } ); renderer.autoClearColor = false;

### mrdoob commented Aug 6, 2013

 You can reuse the geometry for this snippet (less memory usage, better practice): ```geometry = new THREE.CubeGeometry( 25, 25, 25 ); for ( var i = 0; i < 300; i ++ ) { material = new THREE.MeshBasicMaterial( { color: Math.random()*0xffffff } ); mesh = new THREE.Mesh( geometry, material); mesh.position.x = Math.random() * 1000 - 500; mesh.position.y = Math.random() * 1000 - 500; mesh.position.z = Math.random() * 1000 - 500; mesh.rotation.x = Math.random() * 2 * Math.PI; mesh.rotation.y = Math.random() * 2 * Math.PI; mesh.rotation.z = Math.random() * 2 * Math.PI; scene.add( mesh ); }```

### denizezgikurt commented Oct 3, 2020

 How can we use this snippet for torus geometry?

### nbriz commented Oct 3, 2020

 @denizezgikurt replace `geometry = new THREE.CubeGeometry()` with `geometry = new THREE.TorusGeometry()`