更改 three.js 动画中的 z 旋转

Question

我需要添加一个额外的函数来从 updateTeapot 函数中更改茶壶的 Z 旋转值。我看到了这个答案 Three.js camera tilt up or down and keep horizon level，但是如何在这个函数中加入 z 旋转函数？

function updateTeapot() {
        if (teapot != null) {
        teaPotHeight+=1;
        teapot.position.y = teaPotHeight%200;
        } 
    }

(function ( lab3 , $, undefined) {

lab3.init = function(hook) {
    // Create a renderer
    var WIDTH = 600,
    HEIGHT = 500;
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    hook.append(renderer.domElement);
    var scene = new THREE.Scene();

    // Create lights
    var pointLight =
    new THREE.PointLight(0xFFFFFF);
    pointLight.position = new THREE.Vector3(-10, 100, 100);
    scene.add(pointLight);

    // Add ambient light
    var ambient = new THREE.AmbientLight( 0x555555 ); 
    scene.add( ambient ); 

    // Create a camera
    var VIEW_ANGLE = 65, //65 FOV is most 'natural' FOV
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1, //these elements are needed for cameras to
    FAR = 10000; //partition space correctly
    var camera = new THREE.PerspectiveCamera(
        VIEW_ANGLE,
        ASPECT,
        NEAR,
        FAR);
    camera.position.z = 300;
    scene.add(camera);

    // Create and add controls
    var controls = new THREE.TrackballControls( camera );
    controls.target.set( 0, 0, 0 ); 

    // Create a cube
    var material =
    new THREE.MeshLambertMaterial(
    {
    color: 0x00bbcc
    }); 
    var cube = new THREE.Mesh(
    new THREE.CubeGeometry(
    40, 55, 30),
    material);
    scene.add(cube);

    // Animation
    function renderLoop() {
        renderer.render(scene, camera);
        controls.update();
        window.requestAnimationFrame(renderLoop);
        updateTeapot();
    }
    window.requestAnimationFrame(renderLoop);   

////////////////////////////////////////////////    

    var teapot = null;
    var teaPotHeight=0;

    loader = new THREE.JSONLoader();
    loader.load( "models/utah-teapot.json", function( geometry ) {
    teapot = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({
          color: 0x00bb00,
          side: THREE.DoubleSide
        }));
    teapot.scale.set( 20, 20, 20 );
    teapot.position = new THREE.Vector3(-30, 100, 20); 
    function updateTeapot() {
        if (teapot != null) {
        teaPotHeight+=1;
        teapot.position.y = teaPotHeight%200;
        } 
    }    
    //add it to the scene
    scene.add(teapot);
    });

}

})(window.lab3 = window.lab3 || {} , jQuery)

Answer 1

添加

teapot.rotation.z = numInRadians;

更改 three.js 动画中的 z 旋转

Changing z rotation in three.js animation

javascript

3d

three.js