javascript - Three.js - 制作旋转动画？

Question

我已经构建了这段代码...(javascript)

现在我们在屏幕上有一个红色的球体……问题是 如何让它旋转？

var 相机，场景，渲染器， mouseX = 0, mouseY = 0;

var 几何、 Material 、网格；

init();

function init() {

// Camera params : 
// field of view, aspect ratio for render output, near and far clipping plane. 
    camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

// move the camera backwards so we can see stuff! 
// default position is 0,0,0.
camera.position.z = 300;

// the scene contains all the 3D object data
    scene = new THREE.Scene();

// and the CanvasRenderer figures out what the 
// stuff in the scene looks like and draws it!  
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

// the renderer's canvas domElement is added to the body
    document.body.appendChild( renderer.domElement );

    // creating shapes
makeShapes(); 

// add the mouse move listener
document.addEventListener( 'mousemove', onMouseMove, false );

// render 30 times a second (should also look 
// at requestAnimationFrame) 
setInterval(update,1000/30); 

}

function update(){

updateParticles();

// and render the scene from the perspective of the camera
renderer.render( scene, camera );

}

function makeShapes() { 

    // create a sphere shape        
    geometry = new THREE.SphereGeometry( 50, 16, 16 );

    // give a shape red color
    material = new THREE.MeshLambertMaterial({color: 0xFF1111});    

    // create an object
    mesh = new THREE.Mesh( geometry, material );

    mesh.position.x = 0;

    // add it to the scene
    scene.addObject( mesh );
}



function updateParticles(){

}

// called when the mouse moves
function onMouseMove( event ) {

// store the mouseX and mouseY position 
mouseX = event.clientX;
mouseY = event.clientY;
}

Answer 1

试试这个:

var halfWidth = window.innerWidth/2, halfHeight = window.innerHeight/2;

function update(){
   camera.position.x += ( mouseX - camera.position.x ) * 0.05;
   camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
   camera.lookAt( scene.position );

   mesh.rotation.y -= 0.005;

   renderer.render( scene, camera );
}

function onMouseMove( event ) {
  mouseX = event.clientX - halfWidth;
  mouseY = event.clientY - halfHeight;
}