如何旋转相机three.js

Question

我是three.js的新手，我想旋转相机以便在不同的地方观看一个轮子。我该怎么做？

我查找了演示变体，但它没有帮助我，因为我无法将其绑定到我的代码。我希望有人可以帮助我。

DEMO

javascript代码

var scene, camera, renderer;  // Three.js rendering basics.

var canvas;  // The canvas on which the image is rendered.

var axleModel;  // A wheel
var currentModel;   // Contains the visible objects in the scene

var animating = false;  // This is set to true when an animation is running.


/* Create graph of scene */
function createWorld() {
  renderer.setClearColor(0x99CCFF);  // background-color
    scene = new THREE.Scene();

    // create camera. camera isn't scene
    camera = new THREE.PerspectiveCamera(45, canvas.width/canvas.height, 1, 30);
    camera.position.z = 30;

    // create some lights and add them to the scene.
    scene.add( new THREE.DirectionalLight(0xffffff, 0.4)); // dim light shining from above
    var viewpointLight = new THREE.DirectionalLight(0x000000, 0.8);  // a light to shine in the direction the camera faces
    viewpointLight.position.set(0, 0, 1);  // shines down the z-axis
    scene.add(viewpointLight);

    // Create the wheels and axles.
    var wheel = new THREE.Mesh(  // This is the tire; the wheel object also contains the spokes
        new THREE.TorusGeometry(2.5, 0.35, 16, 32),
        new THREE.MeshLambertMaterial({ color: 0x000000 })
    );
    var black = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x101010, shininess: 16 });
    var cylinder = new THREE.Mesh(  // black cylinder with parameters (long, thin etc)
      new THREE.CylinderGeometry(1, 0.75, 1, 32, 1),
        black
    );
    cylinder.scale.set(0.15, 4.25, 0.2); // Make it thin and long for use as a spoke
    wheel.add(cylinder.clone());  // Add a copy of the cylinder
    cylinder.rotation.z = Math.PI/3;  // Add a rotation about the z-axis for the second spoke
    wheel.add(cylinder.clone());
    cylinder.rotation.z = -Math.PI/3; // For third spoke, use a negative rotation about z-axis
    wheel.add(cylinder.clone());

    axleModel = new THREE.Object3D();     // A model containing two wheels and a cylinder.
    cylinder.scale.set(0.2, 4.3, 0.2);  // scale the cylinder for use as an axle
    cylinder.rotation.set(Math.PI/2,0,0);     // rotate its axis onto the z-axis

    wheel.position.z = 2;          // the wheels are positioned at the top and bottom of cylinder
    axleModel.add(wheel.clone());
    wheel.position.z = -2;

    axleModel.scale.set(2, 2, 2);  // Needs to be bigger when it's displayed alone.

    scene.add(currentModel);
}


/*  Render the scene.  This is called for each frame of the animation. */
function render() {
    renderer.render(scene, camera);
}

/* Animation render */
function updateForFrame() {
    if (currentModel == axleModel) {
        axleModel.rotation.z += 1;
    }
}


function doFrame() {
    if (animating) {
        updateForFrame();
        render();
        requestAnimationFrame(doFrame);
    }
}

/* Responds when the setting of the "Animate" checkbox is changed.  This
 * function will start or stop the animation, depending on its setting.
 */
function doAnimateCheckbox() {
  var anim = document.getElementById("animate").checked;
    if (anim != animating) {
        animating = anim;
        if (animating) {
            doFrame();
        }
    }
}

//------------------ handle the radio buttons that select the model-------------
function doChangeModel() {
  var axle = document.getElementById("axle").checked;
    var newModel = axle ? axleModel : true;
    if (newModel != currentModel) {
        scene.remove(currentModel);
        currentModel = newModel;
        currentModel.rotation.set(0.2, 0, 0);
        scene.add(currentModel);
        if (!animating) {
            render();
        }
    }
}


/* This init() function is called when by the onload event when the document has loaded. */
function init() {
    try {
        canvas = document.getElementById("glcanvas");
          renderer = new THREE.WebGLRenderer( {
          canvas: canvas,
          antialias: true
        } );
    }
    catch (e) {
        document.getElementById("canvas-holder").innerHTML = "<h3><b> WebGL is needed</b><h3>";
        return;
    }
    document.addEventListener("keydown", render(), false);
    document.getElementById("animate").checked = false;
    document.getElementById("animate").onchange = doAnimateCheckbox;
    document.getElementById("axle").onchange = doChangeModel;
    createWorld();
    render();
}

HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> Wheel  </title>
<script src="three.min.js"></script>
<style>
    .wrapper {
        margin: 0 auto;
        width: 600px;
     }
</style>
</head>
<body onload="init()">
    <div class="wrapper">
        <h2 style="text-align:center;"> A Wheel </h2>

        <p>
        <label><input type="checkbox" id="animate" />Animate</label>
          <label style="float:right;"><input type="radio" id="axle" name="model">Show wheel</label>

        </p>

        <div id="canvas-holder">
        <canvas id="glcanvas" width="600" height="600"></canvas>
        </div>
    </div>

</body>
</html>