如何使用 Typescript 添加网格以伪造查看器 v6？

Posted 2023-03-16

【中文标题】如何使用 Typescript 添加网格以伪造查看器 v6？

【英文标题】：How to add a mesh to forge viewer v6 using Typescript?

【发布时间】：2019-10-24 14:11:47

【问题描述】：

我需要知道如何使用 Type 脚本将网格添加到 Forge Viewer v6。

我浏览了所有主题和文章，它使用的是 v4。

现在当我尝试以下代码时：

    private wallGeometry: THREE.BoxBufferGeometry;

    drawWalls() 

    this.wallGeometry = new THREE.BoxBufferGeometry(4000, 4000, 100, 1, 1, 1);

    console.log('creating wall geometry');

    this.wallGeometry = new THREE.BoxBufferGeometry(4000, 4000, 100, 1, 1, 1);

    console.log('creating wall material');

    let wallMaterial = new THREE.MeshPhongMaterial( color: 0xff0000 );

    console.log('register wall material');

    this.viewer.impl.matman().addMaterial(
        'dasher-material-vertex',
        wallMaterial,
        true);

    console.log('create Overlay Scene');

    this.viewer.impl.createOverlayScene(this._overlayScene, wallMaterial);

    console.log('wall mesh');

    this.wall = new THREE.Mesh(this.wallGeometry, wallMaterial);
    this.wall.position.set(0, -1000, -2000);

    console.log('add overlay to scene');

    this.addToScene(this.wall);


private addToScene(obj: THREE.Object3D) 
    this.viewer.impl.addOverlay(this._overlayScene, obj);
    this.viewer.impl.invalidate(false, false, true);

我收到以下错误消息：

THREE.Object3D.add：对象不是 THREE.Object3D 的实例。 yr uuid: "6A27DA63-8F99-4E50-9A99-90BED6CE5B85", name: "", type: "Mesh", parent: null, children: Array(0), ... castShadow: 假 孩子们：[] 绘制模式：0 frustumCulled：真 几何：Ii uuid：“8C6C2DD2-B233-4E98-998C-2307A84D1E4B”，名称：“”，类型：“BoxBufferGeometry”，索引：pi，属性：...，... 层：Pn 掩码：1 材质：hc uuid：“9A6A3601-49F6-4D6E-98E1-21C35BF63D80”，名称：“”，类型：“MeshPhongMaterial”，雾：真，灯：真，... 矩阵：dn 元素：数组（16） 矩阵自动更新：真 矩阵世界：dn 元素：数组（16） matrixWorldNeedsUpdate：假 名称：“” 父母：空 位置：在 x: 0, y: -1000, z: -2000 四元数：Et _x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ 接收阴影：假 渲染顺序：0 旋转：Cn _x：0，_y：0，_z：0，_order：“XYZ”，onChangeCallback：ƒ 比例：在 x: 1, y: 1, z: 1 类型：“网格” 向上：在 x: 0, y: 1, z: 0 用户数据： uuid：“6A27DA63-8F99-4E50-9A99-90BED6CE5B85” 可见：真 eulerOrder: (...) 编号：3 modelViewMatrix: dn 元素: Array(16) normalMatrix: Lt 元素: Array(9) useQuaternion: (...)proto: $n

有什么想法吗？？

编辑： 这是来自我的 DevTools 的快照：

【参考方案1】：

我从控制台检查了 Three.js 版本，它说 71!!!

【参考方案2】：

根据three.js v71 source，当插入的对象缺少名为isObject3D 的属性时会引发此错误。我不确定缺少此属性是否可能是由 Forge Viewer 引起的。尝试在调用addToScene 之前放置一个断点，并确保isObject3D 属性存在。

此外，由于您在 运行时 期间遇到此错误，因此它也不应该与 TypeScript 相关。

【讨论】：

我检查了 isObject3D，它返回 true。有什么建议吗？

您到底在什么时候检查了isObject3D 是否为真？同样，基于此three.js code，仅在object 为空或object.isObject3D 为假时引发异常。尝试进入viewer.impl.addOverlay() 方法，然后调用THREE.Object3D.prototype.add() 引发错误。

我在 addToScene 函数中添加了检查。私人 addToScene(obj: THREE.Object3D) console.log('=> obj.isObject3D: ' + obj.isObject3D); //this.viewer.impl.scene.add(obj); //this.viewer.impl.invalidate(true, true, false); this.viewer.impl.addOverlay(this._overlayScene, obj); this.viewer.impl.invalidate(false, false, true);

这样我确保我进入了方法，并且对象为 isObject 属性返回 true。

问题是——你截图中的three.js代码是not从71版开始的。看看我之前贴的链接：代码有一行“if (object && object.isObject3D)”，但在您的屏幕截图中显示“if (object instanceof THREE.Object3D”...所以看起来您使用的是与 Forge Viewer 不兼容的不同版本的 three.js。