使用鼠标位置选择三维空间中的对象（THREE.js R99）

我使用了THREE.js CSS渲染，并用6个CSS3dObject创建了一个3D立方体。我一直在遵循这个示例添加光线跟踪，这样我就可以知道鼠标在代码的哪一侧

function onDocumentMouseMove( event ) {    
  event.preventDefault();

    let mouse3D = new THREE.Vector2( 
      ( event.clientX / window.innerWidth ) * 2 - 1,   
      -( event.clientY / window.innerHeight ) * 2 + 1); 

    let raycaster =  new THREE.Raycaster();                                        
    raycaster.setFromCamera( mouse3D, camera );

    let intersects = raycaster.intersectObjects( scene.children, true );

    if ( intersects.length > 0 ) {               
        console.log(intersects);
    }
}

但是，即使鼠标位于立方体上，相交对象仍保持为空

---

更新

所以我尝试在场景中添加一个网格。尽管渲染器不会渲染它，但光线跟踪器似乎正在拾取它。这是否意味着CSS对象没有大小

var geometry = new THREE.BoxGeometry( 500, 500, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cubeeee = new THREE.Mesh( geometry, material );
scene.add( cubeeee )

---

您不需要带有

CSS3DObjects

的光线投射器。CSS3DRenderer只是转换DOM元素，因此它们仍然可以接收文档中的常规JavaScript事件。考虑到这一点，您可以简单地向每个面添加一个事件侦听器：

domElement.addEventListener("mouseover", function(evt){
    console.log("Mouse is over " + evt.target);
});

---

光线跟踪更适合于仅存在于WebGL层中的。下面的示例使用了网格上的光线投射

，您可以将事件侦听器直接添加到构成立方体的这6个对象中。@WestLangley的回答对我有所帮助。以下是链接：