时间戳

首页 > 解决方案 > 使用鼠标位置选择 3D 空间中的对象 (THREE.js R99)

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

问题描述

我使用了 THREE.js CSS Render 并用 6 个 CSS3DObjects 创建了一个 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 )

标签： three.js

解决方案

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

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

光线追踪更适合仅存在于 WebGL 层中的Mesh对象。您所遵循的示例在Mesh.

推荐阅读