this.geometry 在使用 tree-mesh-bvh 加速光線投射和 ifc.js 時未定義

Question

在一個簡單的 IFC.js 應用程序中，加載 IFC 模型（以及與此相關的片段）失敗並出現TypeError: this.geometry is undefined當使用three-mesh-bvh加速光線投射時。 刪除它會使應用程序再次運行。 我嘗試了很多不同的 IFC 模型，所有這些模型在取消加速時都能正常工作。 即使是測試模型（例如 Schependomlaan.ifc）在加載它們時也會失敗。

應用程序來源： https://github.com/gjkf/simple-ifc

應用程序.js：

import { AmbientLight, AxesHelper, DirectionalLight, GridHelper, PerspectiveCamera, Scene, WebGLRenderer } from 'three';
import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { IFCLoader } from 'web-ifc-three/IFCLoader';

//Creates the Three.js scene
const scene = new Scene();

//Object to store the size of the viewport
const size = {
  width: window.innerWidth,
  height: window.innerHeight,
};

//Creates the camera (point of view of the user)
const camera = new PerspectiveCamera(75, size.width / size.height);
camera.position.z = 15;
camera.position.y = 13;
camera.position.x = 8;

//Creates the lights of the scene
const lightColor = 0xffffff;

const ambientLight = new AmbientLight(lightColor, 0.5);
scene.add(ambientLight);

const directionalLight = new DirectionalLight(lightColor, 1);
directionalLight.position.set(0, 10, 0);
directionalLight.target.position.set(-5, 0, 0);
scene.add(directionalLight);
scene.add(directionalLight.target);

//Sets up the renderer, fetching the canvas of the HTML
const threeCanvas = document.getElementById("three-canvas");
const renderer = new WebGLRenderer({ canvas: threeCanvas, alpha: true });
renderer.setSize(size.width, size.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

//Creates grids and axes in the scene
const grid = new GridHelper(50, 30);
scene.add(grid);

const axes = new AxesHelper();
axes.material.depthTest = false;
axes.renderOrder = 1;
scene.add(axes);

//Creates the orbit controls (to navigate the scene)
const controls = new OrbitControls(camera, threeCanvas);
controls.enableDamping = true;
controls.target.set(-2, 0, 0);

//Animation loop
const animate = () => {
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

animate();

//Adjust the viewport to the size of the browser
window.addEventListener("resize", () => {
  (size.width = window.innerWidth), (size.height = window.innerHeight);
  camera.aspect = size.width / size.height;
  camera.updateProjectionMatrix();
  renderer.setSize(size.width, size.height);
});

//Sets up the IFC loading
const ifcLoader = new IFCLoader();
ifcLoader.ifcManager.useWebWorkers(true, "worker/IFCWorker.js");
ifcLoader.ifcManager.setWasmPath("../wasm/");
ifcLoader.ifcManager.applyWebIfcConfig({
  USE_FAST_BOOLS: true,
  COORDINATE_TO_ORIGIN: true,
});

ifcLoader.ifcManager.setupThreeMeshBVH(
  acceleratedRaycast,
  computeBoundsTree,
  disposeBoundsTree
);

const input = document.getElementById("file-input");
input.addEventListener(
  "change",
  async (changed) => {
    const ifcURL = URL.createObjectURL(changed.target.files[0]);
    // ifcLoader.load(ifcURL, (ifcModel) => scene.add(ifcModel));
    const model = await ifcLoader.loadAsync(ifcURL, (e) => console.log(e));
    console.log(model);
    scene.add(model);
  },
  false
);

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>IFC.js</title>
</head>
<body>
    <input type="file" id="file-input" accept=".ifc, .ifcXML, .ifcZIP">
    <canvas id="three-canvas"></canvas>
    <script src="bundle.js"></script>
</body>
</html>

我制作了這個簡單的應用程序來確定問題，但在不同的（Angular）項目中我真的需要加速光線投射以確保體驗流暢。

Answer 1

問題出在您調用“setupThreeMeshBVH()”

這是具有正確順序的正確調用

ifcLoader.ifcManager.setupThreeMeshBVH(
  computeBoundsTree,
  disposeBoundsTree,
  acceleratedRaycast
);

在您的代碼中，您已將“computeBoundsTree”作為第二個參數，而它應該是第一個。

this.geometry 在使用 tree-mesh-bvh 加速光線投射和 ifc.js 時未定義

問題描述

1 個解決方案

解決方案1
1 已采納 2022-10-07 09:32:53

this.geometry 在使用 tree-mesh-bvh 加速光線投射和 ifc.js 時未定義

問題描述

1 個解決方案

解決方案1 1 已采納 2022-10-07 09:32:53

解決方案1
1 已采納 2022-10-07 09:32:53