Three.js MouseUp事件触发旋转

Question

作为一个新的Three.js和JavaScript的一般来说，我试图测试一些鼠标事件交互。我只是抓住了一些JavaScript关闭以下页面，调整它，以便它是一个“的MouseUp”，而不是“鼠标悬停”事件，一般简化它： -

https://threejs.org/examples/#webgl_interactive_cubes

一个我的东西尝试存档是一个立方体的旋转以及一旦鼠标点击它就会发生颜色变化。目前，我刚刚获得了一个旋转动画，点击时会改变颜色，如果我在任何地方点击多维数据集以外的地方，都可以让该多维数据集自行返回。我只是想知道如何让它暂停和恢复？

理想情况下，我希望动画在click或mouseUp上触发。

的代码如下：

<script> 

    var camera, scene, raycaster, renderer; 
    var mouse = new THREE.Vector2(), INTERSECTED; 

    var radius = 50; 
    var theta = 0; 

    init(); 
    animate(); 

    function init() { 

    container = document.createElement('div'); 
    document.body.appendChild(container); 

    var info = document.createElement('div'); 
    info.style.position = 'absolute'; 
    info.style.top = '10px'; 
    info.style.width = '100%'; 
    info.style.textAlign = 'center'; 


    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    scene = new THREE.Scene(); 

    scene.add(new THREE.AmbientLight(0xffffff, 0.5)); 

    var light = new THREE.DirectionalLight(0xffffff, 2); 

    light.position.set(30, 10, 1).normalize(); 
    scene.add(light); 


    camera.position.x = -25; 
    camera.position.y = 15; 
    camera.position.z = 25; 
    camera.lookAt(scene.position); 
    camera.updateMatrixWorld(); 

    var cubeGeometry = new THREE.BoxGeometry(20,20,20); 
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false}); 
    var object = new THREE.Mesh(cubeGeometry, cubeMaterial); 

     object.position.x = 0; 
     object.position.y = 0; 
     object.position.z = 0; 

     scene.add(object); 


    var cubeGeometry = new THREE.BoxGeometry(5,5,5); 
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x999999, wireframe: false}); 
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 

     cube.position.x = 10; 
     cube.position.y = 10; 
     cube.position.z = 10; 

     scene.add(cube); 

    raycaster = new THREE.Raycaster(); 
    renderer = new THREE.WebGLRenderer({ antialias: true }); 
    renderer.setClearColor(0xf0f0f0); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.sortObjects = false; 
    container.appendChild(renderer.domElement); 


    document.addEventListener('mouseup', onDocumentMouseUp, false); 
    window.addEventListener('resize', onWindowResize, false); 

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

    function onDocumentMouseUp(event) { 
    event.preventDefault(); 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

    // find intersections 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(scene.children); 
    if (intersects.length > 0) { 
     if (INTERSECTED != intersects[ 0 ].object) { 
     if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); 
     INTERSECTED = intersects[ 0 ].object; 
     INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); 
     INTERSECTED.material.emissive.setHex(Math.random() * 0x111111); 
     } 
    } else { 
     if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex); 
     INTERSECTED = null; 

     theta = -75; 
    camera.position.x = new camera.position.x; 
    camera.position.y = new camera.position.y; 
    camera.position.z = new camera.position.x; 
    //camera.lookAt(scene.position); 
    } 
    } 

    function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    } 

    function render() 
    { 
    theta += 1; 
    camera.position.x = radius * Math.sin(THREE.Math.degToRad(theta)); 
    camera.position.y = radius * Math.sin(THREE.Math.degToRad(theta)); 
    camera.position.z = radius * Math.cos(THREE.Math.degToRad(theta)); 
    camera.lookAt(scene.position); 
    renderer.render(scene, camera); 
    } 
</script> 

Answer 1

如果我给你的权利。在animate()功能，你可以做这样的：

function animate() { 
    requestAnimationFrame(animate); 
    if (INTERSECTED) INTERSECTED.rotation.y += 0.01; 
    render(); 
} 

因此，你是否INTERSECTED不null，如果它不是，然后转动您选择的对象。