点击 GLTF 模型 - Threejs

Question

我正在开发一个 Threejs 项目，我正在尝试加载包含几何形状的 GLTF 文件。我正在编写一个逻辑来获取我在 GLTF 文件中单击的形状的信息，目前只是名称。目前，我只是使用 console.log() 来打印我单击的形状的名称。我还希望出现一个带有组件名称的侧面导航栏，我为导航栏提供了一个简单的 OpenNav() 函数，如下所示。我现在想使用 HTML header 标签来显示 found[index].object.name （组件的名称）。我有点被困在这里了。我如何实现这一目标？

<div id = "mySidenav" class = "sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <h2>Hello world!</h2>
</div>
    <script src = "three.js"></script>
    <script type = "module" src = "index.js"></script>
    <script>
        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }  
    </script>  

index.js中的点击事件函数

function openNav() {
  document.getElementById("mySidenav").style.width = "300px";
}

window.addEventListener('click', event => {  
  // enables object selection
  clickMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  clickMouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  // enables different object selection 
  raycaster.setFromCamera( clickMouse, camera );
  //checking mesh objects the ray are intersecting with
  const found = raycaster.intersectObjects( scene.children );
  // console.log(found);
  // console.log(found[0]);
  if(found.length > 0){
      // console.log(found);
       for (let index = 0; index < found.length; index++) {
         if (found[index].object.name === "Cone") {
            console.log(found[index].object.name);          
            openNav();
         }
    }
  }
})

Answer 1

好的，我有。

我建议您更换：

window.addEventListener('click', event => {  
  // enables object selection
  clickMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  clickMouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  // enables different object selection 
  raycaster.setFromCamera( clickMouse, camera );
  //checking mesh objects the ray are intersecting with
  const found = raycaster.intersectObjects( scene.children );
  // console.log(found);
  // console.log(found[0]);
  if(found.length > 0){
      // console.log(found);
       for (let index = 0; index < found.length; index++) {
         if (found[index].object.name === "Cone") {
            console.log(found[index].object.name);          
            openNav();
         }
    }
  }
})

有了这个：

function Listener(listener, mesh, callback) {
    let objects = [mesh];
    let raycaster = new THREE.Raycaster();
    let mouse = { x: 0, y: 0 };
    renderer.domElement.addEventListener(listener, raycast, false);
    function raycast(e) {
        mouse.x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = -(e.clientY / renderer.domElement.clientHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        let intersects = raycaster.intersectObjects(objects, true);
        let intersect = intersects[0];
        if (typeof intersect !== "undefined") {
            callback(e, intersect);
        }
    }
}
for (let i = 0; i < scene.children.length; i++) {
    Listener('click', scene.children[i], (e, intersect) => {
        let object = intersect.object;
        if (object.name === 'Cone') {
            openNav();
        }
    });
}