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 ,