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; |
This comment has been minimized.
This comment has been minimized.
How can we use this snippet for torus geometry? |
This comment has been minimized.
This comment has been minimized.
@denizezgikurt geometry = new THREE.CubeGeometry() with geometry = new THREE.TorusGeometry() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
You can reuse the geometry for this snippet (less memory usage, better practice):