three.js：單擊鼠標時停止自動旋轉

Question

我正在玩three.js。我建立了一個旋轉的立方體，你也可以在OrbitControls的幫助下旋轉。現在我的目標是在鼠標點擊時停止自動旋轉，所以當他想要自己旋轉立方體時用戶不會分心。所以動畫：

function animate() { 
    mesh.rotation.x += .015; 
    mesh.rotation.y += .015; 
    mesh.rotation.y += .015; 

    render(); 
    requestAnimationFrame(animate); 
} 

應停止，當鼠標停止並繼續，當鼠標被釋放時。我如何結合OrbitControls實現它？

全碼：

的Javascript：

var camera; 
var scene; 
var renderer; 
var mesh; 
var geometry; 
var material1; 
var material2; 
var material3; 
var material4; 
var material5; 
var material6; 
var materials; 
var meshFaceMaterial; 
var controls; 



init(); 
animate(); 

function init() { 

    camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.z = 25; 

    controls = new THREE.OrbitControls(camera); 
    controls.addEventListener('change', render); 

    scene = new THREE.Scene(); 

    light = new THREE.DirectionalLight(0xffffff); 
    light.position.set(1, 1, 1); 
    scene.add(light); 

    light = new THREE.DirectionalLight(0xffffff); 
    light.position.set(-1, -1, -1); 
    scene.add(light); 

    light = new THREE.AmbientLight(0x222222); 
    scene.add(light); 

    geometry = new THREE.CubeGeometry(10, 10, 10); 
    material1 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub1.jpg') }); 
    material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub2.jpg') }); 
    material3 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub3.jpg') }); 
    material4 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub4.jpg') }); 
    material5 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub5.jpg') }); 
    material6 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub6.jpg') }); 

    materials = [material1, material3, material5, material6, material4, material2]; 

    meshFaceMaterial = new THREE.MeshFaceMaterial(materials); 

    mesh = new THREE.Mesh(geometry, meshFaceMaterial); 
    mesh.position.z = 0; 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
document.getElementById('render').appendChild(renderer.domElement); 
    window.addEventListener('resize', onWindowResize, false); 

    render(); 
} 

function animate() { 
    mesh.rotation.x += .015; 
    mesh.rotation.y += .015; 
    mesh.rotation.y += .015; 

    render(); 
    requestAnimationFrame(animate); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    render(); 
} 

Answer 1

可以使用mousedown和mouseup事件偵聽器。

事情是這樣的：

var isMouseDown = false; 

function init(){ 
    window.addEventListener('mousedown', onMouseDown); 
    window.addEventListener('mouseup', onMouseUp); 
} 

function onMouseDown(){ 
    isMouseDown = true; 
} 

function onMouseUp(){ 
    isMouseDown = false; 
} 

function animate() { 
    if(!isMouseDown){ 
     mesh.rotation.x += .015; 
     mesh.rotation.y += .015; 
     mesh.rotation.y += .015; 
    } 
    render(); 
    requestAnimationFrame(animate); 
} 

Here是工作codepen。