three.js — gltf raycaster 问题

Question

我在搅拌机中制作了一些简单的形状，并将它们导入到我的场景中。正如您在这里看到的那样，它就像一个魅力：

我只想在悬停我的形状后立即获得一个 console.log()。 但什么也没发生，我不知道为什么。它可能与我的 gltf 文件有关，因为我尝试使用另一个文件并且它有效。

我也创建了这个 codepen，但似乎无法在其上调用 gltf 文件： https://codepen.io/michaelgrc/pen/oNeMBGJ

这是我的请求动画帧内的内容：

  raycaster.setFromCamera(mouse, camera)
  const intersects = this.raycaster.intersectObjects( myGltf, true);

  for ( let i = 0; i < intersects.length; i ++ ) {
    console.log("OKAY")
  }
  
  renderer.render(scene, camera)

这是我的 gltf：https://michaelg.fr/gltf/forme1.glb

您认为这与我的文件有关吗？如果是这样，您知道将 gltf 文件从 blender 导出到 three.js 的正确设置是什么？非常感谢

Answer 1

问题出在这一行：

const intersects = this.raycaster.intersectObjects(myGltf, true);

intersectObjects() 需要一个数组作为第一个参数。请改用intersectObject()。所以：

const intersects = this.raycaster.intersectObject(myGltf);

另外，第二个参数默认为true。

Answer 2

您的 codepen 有一些错误：

• 您永远不会调用 animate() 循环，因此您的光线投射器永远不会被触发。
• 您使用的是this.raycaster，但您的代码中不存在this，只有raycaster。

这是您的修复演示：

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three";
import { GLTFLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/GLTFLoader";

const scene = new THREE.Scene();

const W = window.innerWidth;
const H = window.innerHeight;

const aspectRatio = W/H;

const listOfObjects = [];
let myGltf;

const raycaster = new THREE.Raycaster()

const mouse = new THREE.Vector2(-2. -2)
window.addEventListener('mousemove', (event) =>
{
    mouse.x = event.clientX / W * 2 - 1
    mouse.y = - (event.clientY / H) * 2 + 1
})

const camera = new THREE.OrthographicCamera(-0.5 * aspectRatio, 0.5 * aspectRatio, 0.5, -0.5, -10, 10);

const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))       
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );

// test to see something
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 0.2), new THREE.MeshNormalMaterial());
scene.add(mesh)

renderer.render(scene, camera)

function animate() {
  requestAnimationFrame(animate)
  
  raycaster.setFromCamera(mouse, camera)
  const intersects = raycaster.intersectObjects( scene.children, true);

  for ( let i = 0; i < intersects.length; i ++ ) {
    console.log("OKAY")
  }
  
  renderer.render(scene, camera)
}

    animate()
</script>