locked
Can some one plz explain in comment on the side of the code RRS feed

  • Question

  • User186897 posted

    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 );
    				}

    Tuesday, November 15, 2016 1:22 PM

Answers

  • User281315223 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 15, 2016 3:15 PM

All replies

  • User-1877975950 posted

    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

    Tuesday, November 15, 2016 3:10 PM
  • User281315223 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 15, 2016 3:15 PM
  • User186897 posted

    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;
    

    Wednesday, November 16, 2016 9:24 AM