Question

我在three.js场景中遇到了mousemove功能的问题。目标是当鼠标悬停在对象上时文本会改变颜色。我从网上跟踪了很多examples，并且raycaster没有注册该对象。我尝试在函数animate（）中添加update（），如上面的链接，但控制台指示错误，“未定义更新”。我无法在init函数之后放置mousemove函数，因为它无法识别对象变量。

var mouse = { x: 0, y: 0 }, INTERSECTED;
var projector = new THREE.Projector();
var scene, camera,renderer; 

function init(font){...
//loaded the font, camera, etc.

var option="object";
var geometry_option= new THREE.TextGeometry( option{font:font, size:200,height:20,  curveSegments:2});
var material_option = new THREE.MeshBasicMaterial( { color: 0x0000000, side: THREE.BackSide } );
var option1= new THREE.Mesh(geometry_option, material_option); //added the position and added it to the scene.

//added other functions under function init such as mousedown,mousemove, etc.


document.addEventListener( 'mousemove', onDocumentMouseMove, false );
function update()
{
   // find intersections
   // create a Ray with origin at the mouse position
   //   and direction into the scene (camera direction)
   var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
   projector.unprojectVector( vector, camera );
   var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

   // create an array containing all objects in the scene with which the ray intersects
   var intersects_option= ray.intersectObjects([option1] );

   if ( intersects_option.length > 0 )
   {
      if ( intersects_option[ 0 ].object != INTERSECTED )
      {
         if ( INTERSECTED )
            INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
         INTERSECTED = intersects_option[ 0 ].object;

         INTERSECTED.currentHex = INTERSECTED.material.color.getHex();

         INTERSECTED.material.color.setHex( 0xffff00 );
      }
   }
   else 
   {
       if ( INTERSECTED )
           INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
       INTERSECTED = null;
   }
}

} // close init function

在Three.js中使用Mousemove的问题

0 个答案: