触发旋转的MouseUp事件

Three.js MouseUp event that triggers rotation

本文关键字：MouseUp 事件 旋转      更新时间：2023-09-26

作为Three.js和javascript的新手，我正在尝试测试一些鼠标事件交互。我只是从下面的页面抓取了一些Javascript，调整它，使其成为'MouseUp'，而不是'MouseOver'事件，并一般简化它:-

https://threejs.org/examples/webgl_interactive_cubes

我正在尝试实现的一件事是立方体的旋转以及一旦鼠标被点击它的颜色变化。目前，我只是有一个旋转动画，点击时改变颜色，如果我点击立方体外面的任何地方，立方体就会回到自己的位置。我只是想知道如何让它暂停和恢复?

理想情况下，我希望动画触发点击或鼠标向上。

代码如下:

    <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>

如果我没猜错的话。在animate()函数中，您可以这样做:

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

因此，你检查INTERSECTED是否不是null，如果不是，然后旋转你选择的对象

相关文章：