Three.js 触发旋转的 MouseUp 事件

Question

一般来说，作为 Three.js 和 javascript 的新手，我正在尝试测试一些鼠标事件交互。我刚刚从下一页抓取了一些 Javascript，对其进行了调整，使其成为“MouseUp”，而不是“MouseOver”事件，并且通常对其进行了简化：-

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

我想要实现的一件事是旋转立方体以及单击鼠标后的颜色变化。目前，我刚刚制作了一个旋转动画，它在点击时会改变颜色，如果我点击立方体外部的任何地方，我都会让立方体回到自身。我只是想知道如何让它暂停和恢复？

理想情况下，我希望动画在单击或 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，如果不是，则旋转您选择的对象。