three.js - How to add a mesh to forge viewer v6 using Typescript?

Question

I need to know how to add meshes to Forge Viewer v6 using Type script.

I went through all the topics and articles and it was working with v4.

Now when I try the following code:

    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);
}

I got the following error message:

THREE.Object3D.add: object not an instance of THREE.Object3D.
yr {uuid: "6A27DA63-8F99-4E50-9A99-90BED6CE5B85", name: "", type: "Mesh", parent: null, children: Array(0), …}
castShadow: false
children: []
drawMode: 0
frustumCulled: true
geometry: Ii {uuid: "8C6C2DD2-B233-4E98-998C-2307A84D1E4B", name: "", type: "BoxBufferGeometry", index: pi, attributes: {…}, …}
layers: Pn {mask: 1}
material: hc {uuid: "9A6A3601-49F6-4D6E-98E1-21C35BF63D80", name: "", type: "MeshPhongMaterial", fog: true, lights: true, …}
matrix: dn {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: dn {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: ""
parent: null
position: At {x: 0, y: -1000, z: -2000}
quaternion: Et {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ?}
receiveShadow: false
renderOrder: 0
rotation: Cn {_x: 0, _y: 0, _z: 0, _order: "XYZ", onChangeCallback: ?}
scale: At {x: 1, y: 1, z: 1}
type: "Mesh"
up: At {x: 0, y: 1, z: 0}
userData: {}
uuid: "6A27DA63-8F99-4E50-9A99-90BED6CE5B85"
visible: true
eulerOrder: (...)
id: 3
modelViewMatrix: dn {elements: Array(16)}
normalMatrix: Lt {elements: Array(9)}
useQuaternion: (...)
proto: $n

any ideas??

Edit: This a snapshot from my DevTools:

Answer 1

According to three.js v71 source, this error is thrown when the inserted object is missing a property called isObject3D. I'm not sure if the lack of this property could be caused by Forge Viewer. Try putting a breakpoint right before calling addToScene and make sure that the isObject3D property is there.

Also, since you're getting this error during runtime, it should not be related to TypeScript either.