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，如果它不是，然後轉動您選擇的對象。