Question

我使用了THREE.js CSS渲染器，并用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

更新

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

Answer 1

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

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

射线跟踪更适合Mesh objects，后者仅存在于WebGL层中。您遵循的示例在Mesh上使用光线投射。

使用鼠标位置在3D空间中选择对象（THREE.js R99）

1 个答案: