Raycast 未檢測到 GlTF 文件/Three.js

Question

我的二進制 gltf 文件（在攪拌機中建模並使用 mixamo 進行動畫處理）在光線投射上沒有檢測到。 我閱讀了一堆教程和有關它的問題以嘗試修復它，但它並沒有像以前那樣工作:(

const loader = new GLTFLoader();
let modelLoader = "/models/c2.glb";
let model, mixer, neck, waist;

loader.load(modelLoader, (gltf) => {
  model = gltf.scene;
  let fileAnimations = gltf.animations;
  model.traverse((o) => {
    // console.log(o);
    if (o.isBone && o.name === "mixamorigNeck") {
      neck = o;
    }
    if (o.isBone && o.name === "mixamorigSpine") {
      waist = o;
    }
    if (o.isMesh) {
      o.material.reflectivity = 1;
    }
  });

 document.addEventListener("click", (e) => raycast(e));
  document.addEventListener("touchend", (e) => raycast(e, true));

  function raycast(e, touch = false) {
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    e.preventDefault();

    if (touch) {
      mouse.x = 2 * (e.changedTouches[0].clientX / window.innerWidth) - 1;
      mouse.y = 1 - 2 * (e.changedTouches[0].clientY / window.innerHeight);
    } else {
      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    }

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);
    console.log(scene.children);
    if (intersects.length > 0) {
      console.log("hi");}}

它沒有錯誤，如果我在“if（相交）{}”之外 console.log scene.children 並點擊 window，它可以工作並包含它應該包含的所有內容，但是如果我把它放在“if”和點擊 3d object 它是空數組。

我還嘗試將網格推入新陣列並檢測但沒有用。

請幫忙！

Answer 1

問題是您正在對蒙皮網格執行光線投射。 three.js目前 ( r128 ) 無法為這種類型的 3D object 計算正確的邊界體積。 然而，包圍體對於光線投射很重要，因為它們用於檢測早期的輸出。

此問題的解決方法是手動定義包圍體，以便它們正確地包圍蒙皮網格。 我建議你遍歷gltf.scene並設置蒙皮網格幾何體的boundingSphere和boundingBox屬性。

GitHub 的更多信息： https://github.com/mrdoob/three.js/pull/19178