使用鼠标位置选择 3D 空间中的对象 (THREE.js R99)答案

【问题标题】：Select objects in 3D space using mouse position (THREE.js R99)使用鼠标位置选择 3D 空间中的对象 (THREE.js R99)
【发布时间】：2019-05-17 23:51:00
【问题描述】：

我使用了 THREE.js CSS Render，并从 6 个 CSS3DObjects 中创建了一个 3D 立方体。我一直在关注这个(code) 示例来添加光线跟踪，以便我可以确定鼠标在代码的哪一侧。

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);
    }
}

但是，即使鼠标悬停在立方体上，相交对象仍为空

Codepen

更新

所以我尝试在场景中添加一个网格。尽管渲染器不会渲染它，但光线追踪器似乎正在拾取它。这是否意味着 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 )

【问题讨论】：

您可以将事件侦听器直接添加到构成立方体的这 6 个对象。
@WestLangley 的回答帮助了我。这是链接：stackoverflow.com/questions/21531745/…

标签： three.js

【解决方案1】：

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

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

光线追踪更适合Mesh objects，它只存在于 WebGL 层中。您所遵循的示例在 Mesh 上使用了光线投射。

【讨论】：