Three.js - एक रोटेशन एनीमेशन बनाएं?

Question

मैं कोड के इस टुकड़े ... (जावास्क्रिप्ट) का निर्माण किया है

अब हम स्क्रीन पर एक लाल क्षेत्र है ... सवाल है कि यह कैसे चारों ओर कताई बनाने के लिए?

var कैमरा, दृश्य, प्रस्तुतकर्ता, माउसएक्स = 0, माउसवाई = 0;

var ज्यामिति, सामग्री, जाल;

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