three.js: остановить автоматическое вращение, когда мышь нажата

Question

Я играю с тремя.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.