can someone plz look at the code below and explain how to calculate these mesaurements...if u can just put a comment line on the side of each line of code..it will be great help...
are you after an explanation of the existing code or are you looking for code improvements? I can perhaps help with the former.
//set up the geometry for a box of side length = 40. The THREE class contains the different methods.// var geometry
=new THREE.BoxGeometry(40,40,40); // plot 200 boxes on the scene //for(var i
=0; i
<200; i
++){ //create a new object for each of the 200 for loops and set a random colour// varobject=new THREE.Mesh( geometry,new THREE.MeshLambertMaterial({ color:Math.random()*0xffffff}));
// set the various 3D coordinates using a random number - placing the new box in each loop in different places on the scene// object.position.x
=Math.random()*1000-500; object.position.y
=Math.random()*600-300; object.position.z
=Math.random()*800-400; object.rotation.x
=Math.random()*2*Math.PI; object.rotation.y
=Math.random()*2*Math.PI; object.rotation.z
=Math.random()*2*Math.PI; // now scale the object to make the 3D cube different sizes on the scene//object.scale.x
=Math.random()*2+1; object.scale.y
=Math.random()*2+1; object.scale.z
=Math.random()*2+1; // add its own shadow //object.castShadow
=true; // show shadow from another object(s)// object.receiveShadow
=true;
// add the object to the scene array//scene.add(object);
//add the object to the objects collection //objects.push(object); }
Be sure to look up the difference between .add and .push
I haven't worked with 3.js previously, but the code itself seems quite readable already :
var geometry = new THREE.BoxGeometry(40, 40, 40);
// Execute a loop 200 times
for ( var i = 0; i < 200; i ++ ){
// For each iteration, create a new object with a random color (Math.random() * White color)
var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
// Set random positional information (in all three dimensions)
object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 600 - 300;
object.position.z = Math.random() * 800 - 400;
// Set random rotation (on a per axis basic)
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
// Scale each axis at random
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
// Set other properties related to if the given object will cast a shadow
// and if it can be affected by the shadows of other objects
object.castShadow = true;
object.receiveShadow = true;
// Place this object on the current scene
scene.add(object);
// Add this object to a collection of objects (to keep track of them all)
objects.push( object );
}
It basically looks as though it will create a scene with 200 random objects (i.e. random size, color, position, etc.) that all rotate at random rates and cast shadows upon one another.
Yes I was actually looking on how to calculate these these positions and rotations and stuff...how do I need where to place the cube I am defining...
As shown above if I change a slightest range the cubes are here and there for example below I have created a small measurement but the cubes intersect each other
Member
200 Points
691 Posts
Can some one plz explain in comment on the side of the code
Nov 15, 2016 01:22 PM|Lexi85|LINK
Hello All...
I am learning 3js...
can someone plz look at the code below and explain how to calculate these mesaurements...if u can just put a comment line on the side of each line of code..it will be great help...
Thanks a lot...
var geometry = new THREE.BoxGeometry( 40, 40, 40 ); for ( var i = 0; i < 200; i ++ ) { var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) ); object.position.x = Math.random() * 1000 - 500; object.position.y = Math.random() * 600 - 300; object.position.z = Math.random() * 800 - 400; object.rotation.x = Math.random() * 2 * Math.PI; object.rotation.y = Math.random() * 2 * Math.PI; object.rotation.z = Math.random() * 2 * Math.PI; object.scale.x = Math.random() * 2 + 1; object.scale.y = Math.random() * 2 + 1; object.scale.z = Math.random() * 2 + 1; object.castShadow = true; object.receiveShadow = true; scene.add( object ); objects.push( object ); }Member
66 Points
157 Posts
Re: Can some one plz explain in comment on the side of the code
Nov 15, 2016 03:10 PM|Stewa11|LINK
are you after an explanation of the existing code or are you looking for code improvements? I can perhaps help with the former.
//set up the geometry for a box of side length = 40. The THREE class contains the different methods.// var geometry = new THREE.BoxGeometry( 40, 40, 40 );
// plot 200 boxes on the scene //for ( var i = 0; i < 200; i ++ ) {
//create a new object for each of the 200 for loops and set a random colour// var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
// set the various 3D coordinates using a random number - placing the new box in each loop in different places on the scene// object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 600 - 300;
object.position.z = Math.random() * 800 - 400;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
// now scale the object to make the 3D cube different sizes on the scene//object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
// add its own shadow //object.castShadow = true;
// show shadow from another object(s)// object.receiveShadow = true;
// add the object to the scene array//scene.add( object );
//add the object to the objects collection //objects.push( object );
}
Be sure to look up the difference between .add and .push
Good luck with the course!! :-)
Stew
All-Star
114593 Points
18503 Posts
MVP
Re: Can some one plz explain in comment on the side of the code
Nov 15, 2016 03:15 PM|Rion Williams|LINK
I haven't worked with 3.js previously, but the code itself seems quite readable already :
var geometry = new THREE.BoxGeometry(40, 40, 40); // Execute a loop 200 times for ( var i = 0; i < 200; i ++ ){ // For each iteration, create a new object with a random color (Math.random() * White color) var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })); // Set random positional information (in all three dimensions) object.position.x = Math.random() * 1000 - 500; object.position.y = Math.random() * 600 - 300; object.position.z = Math.random() * 800 - 400; // Set random rotation (on a per axis basic) object.rotation.x = Math.random() * 2 * Math.PI; object.rotation.y = Math.random() * 2 * Math.PI; object.rotation.z = Math.random() * 2 * Math.PI; // Scale each axis at random object.scale.x = Math.random() * 2 + 1; object.scale.y = Math.random() * 2 + 1; object.scale.z = Math.random() * 2 + 1; // Set other properties related to if the given object will cast a shadow // and if it can be affected by the shadows of other objects object.castShadow = true; object.receiveShadow = true; // Place this object on the current scene scene.add(object); // Add this object to a collection of objects (to keep track of them all) objects.push( object ); }It basically looks as though it will create a scene with 200 random objects (i.e. random size, color, position, etc.) that all rotate at random rates and cast shadows upon one another.
Member
200 Points
691 Posts
Re: Can some one plz explain in comment on the side of the code
Nov 16, 2016 09:24 AM|Lexi85|LINK
Yes I was actually looking on how to calculate these these positions and rotations and stuff...how do I need where to place the cube I am defining...
As shown above if I change a slightest range the cubes are here and there for example below I have created a small measurement but the cubes intersect each other
var geometry = new THREE.BoxGeometry(150, 150, 150); for (var i = 0; i < 2; i++) { var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })); var ax = ay = az = 0 object.position.x = ax; object.position.y = ay; object.position.z = az; object.scale.x = 3; object.scale.y = 3; object.scale.z = 3; object.position.x = Math.random() * 150 - 70; object.position.y = Math.random() * 80 - 30; object.position.z = Math.random() * 80 - 40; object.rotation.x = Math.random() * 1 * Math.PI; object.rotation.y = Math.random() * 1 * Math.PI; object.rotation.z = Math.random() * 1 * Math.PI; object.scale.x = Math.random() * 2 + 1; object.scale.y = Math.random() * 2 + 1; object.scale.z = Math.random() * 2 + 1;