Interactive 3D Graphics-Lesson4 Problem Set

1.机器人手臂

要求是添加机器人手臂的底座，只要理解好THREE.Object3D()就可以了。参考一下原有的代码就可以得到结果。

[javascript]   ////////////////////////////////////////////////////////////////////////////////  
/*global THREE, Coordinates, $, document, window, dat*/ 
 
var camera, scene, renderer; 
var cameraControls, effectController; 
var clock = new THREE.Clock(); 
var gridX = true; 
var gridY = false; 
var gridZ = false; 
var axes = true; 
var ground = true; 
var arm, forearm, body; 
 
function fillScene() { 
    scene = new THREE.Scene(); 
    scene.fog = new THREE.Fog( 0x808080, 2000, 4000 ); 
 
    // LIGHTS  
    var ambientLight = new THREE.AmbientLight( 0x222222 ); 
    var light = new THREE.DirectionalLight( 0xffffff, 1.0 ); 
    light.position.set( 200, 400, 500 ); 
    var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 ); 
    light2.position.set( -500, 250, -200 ); 
    scene.add(ambientLight); 
    scene.add(light); 
    scene.add(light2); 
 
    // Robot definitions  
    var robotBaseMaterial = new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } ); 
    var robotForearmMaterial = new THREE.MeshPhongMaterial( { color: 0xF4C154, specular: 0xF4C154, shininess: 100 } ); 
    var robotUpperArmMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x95E4FB, shininess: 100 } ); 
    var robotBodyMaterial = new THREE.MeshPhongMaterial( { color: 0x279933, specular: 0x279933, shininess: 100 } ); 
 
    var torus = new THREE.Mesh(  
        new THREE.TorusGeometry( 22, 15, 32, 32 ), robotBaseMaterial ); 
    torus.rotation.x = 90 * Math.PI/180; 
    scene.add( torus ); 
 
    forearm = new THREE.Object3D(); 
    var faLength = 80; 
 
    createRobotExtender( forearm, faLength, robotForearmMaterial ); 
 
    arm = new THREE.Object3D(); 
    var uaLength = 120;  
     
    createRobotCrane( arm, uaLength, robotUpperArmMaterial ); 
     
    // Move the forearm itself to the end of the upper arm.  
    forearm.position.y = uaLength;   
    arm.add( forearm ); 
    //scene.add( arm );  
 
    // YOUR CODE HERE  
    body = new THREE.Object3D(); 
    var bodyLength = 60; 
        arm.position.y = bodyLength; 
        body.add( arm ); 
        createRobotBody( body, bodyLength, robotBodyMaterial ); 
        scene.add( body ); 
} 
 
function createRobotExtender( part, length, material ) 
{ 
    var cylinder = new THREE.Mesh(  
        new THREE.CylinderGeometry( 22, 22, 6, 32 ), material ); 
    part.add( cylinder ); 
 
    var i; 
    for ( i = 0; i < 4; i++ ) 
    { 
        var box = new THREE.Mesh(  
            new THREE.CubeGeometry( 4, length, 4 ), material ); 
        box.position.x = (i < 2) ? -8 : 8; 
        box.position.y = length/2; 
        box.position.z = (i%2) ? -8 : 8; 
        part.add( box ); 
    } 
     
    cylinder = new THREE.Mesh(  
        new THREE.CylinderGeometry( 15, 15, 40, 32 ), material ); 
    cylinder.rotation.x = 90 * Math.PI/180; 
    cylinder.position.y = length; 
    part.add( cylinder ); 
} 
 
function createRobotCrane( part, length, material ) 
{ 
    var box = new THREE.Mesh(  
        new THREE.CubeGeometry( 18, length, 18 ), material ); 
    box.position.y = length/2; 
    part.add( box ); 
     
    var sphere = new THREE.Mesh(  
        new THREE.SphereGeometry( 20, 32, 16 ), material ); 
    // place sphere at end of arm  
    sphere.position.y = length; 
    part.add( sphere ); 
} 
 
function createRobotBody( part, length, material ) 
{ 
    var cylinder = new THREE.Mesh(  
        new THREE.CylinderGeometry( 50, 12, length/2, 18 ), material ); 
    cylinder.position.y = length/4; 
    part.add( cylinder ); 
     
    cylinder = new THREE.Mesh(  
        new THREE.CylinderGeometry( 12, 50, length/2, 18 ), material ); 
    cylinder.position.y = 3*length/4; 
    part.add( cylinder ); 
     
    var box = new THREE.Mesh(  
        new THREE.CubeGeometry( 12, length/4, 110 ), material ); 
    box.position.y = length/2; 
    part.add( box ); 
 
    var sphere = new THREE.Mesh(  
        new THREE.SphereGeometry( 20, 32, 16 ), material ); 
    // place sphere at end of arm  
    sphere.position.y = length; 
    part.add( sphere ); 
} 
 
function init() { 
    var canvasWidth = 846; 
    var canvasHeight = 494; 
    var canvasRatio = canvasWidth / canvasHeight; 
 
    // RENDERER  
    renderer = new THREE.WebGLRenderer( { antialias: true } ); 
    renderer.gammaInput = true; 
    renderer.gammaOutput = true; 
    renderer.setSize(canvasWidth, canvasHeight)

补充：web前端 , JavaScript ,

上一个：JS常见疑点点睛(不定期更新)
下一个：jQuery模拟QQ相册