Three.js - Crea un'animazione di rotazione?

Question

Ho costruito questo pezzo di codice ... (javascript)

Ora abbiamo una sfera rossa sullo schermo ... la domanda è come farlo girare intorno?

var camera, scena, renderizzatore, mouseX = 0, mouseY = 0;

var geometria, materiale, rete;

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

Prova questo:

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; 
}