Three.js - Tạo hoạt ảnh xoay?

Question

Tôi đã tạo đoạn mã này ... (javascript)

Bây giờ chúng tôi có một quả cầu màu đỏ trên màn hình ... câu hỏi là làm thế nào để làm cho nó quay vòng?

var camera, cảnh, trình kết xuất, mouseX = 0, mouseY = 0;

var hình học, vật liệu, lưới;

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

Hãy thử điều này:

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