Add ThreeJs model in Autodesk Forge Viewer

Question

I have problem with load threejs model by objectloader, i add newest ThreeJs library version to get more feature like create text, using objectloader... Here is my code:

    loadThreeJs() {
        const loader = new THREEE.ObjectLoader();

        loader.load('./assets/MVP-TW-CCTV TOWER.json', (obj) => {
            console.log(obj)
            var object3DInside = obj.children[0].children[0];
            console.log(object3DInside)
            setTimeout(() => {this.addScene(object3DInside)},1000)
        }, (xhr) => {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        });
    }
    addScene(obj:any)
    {
        this.viewer.impl.createOverlayScene('load-scene');
        this.viewer.impl.addOverlay('load-scene', obj );
        this.viewer.impl.invalidate(true);
    }

which THREEE is threejs library i loaded from outside. obj is scene so i get children for object3D but it always return object not an instance of THREE.Object3D. i log the result and type is object3D, it supposed to be correct but it not?

Answer 1

It looks like you're using another version of three.js and referencing it globally, which is not delivered by Forge Viewer itself, and it will conflict with Forge Viewer one. As Petr mentioned here ( upgrade three js version in autodesk forge viewer ), Forge Viewer uses self-maintained three.js r71 removed most of the built-in three.js functions.

If you want to use missing features from Forge Viewer's three.js libraries, I would advise you to use some modern development tools such as bundlers (Webpack is the most popular one). You can leverage ES6 modules and import to your app only the strictly needed dependencies. The threejs-full-es6 package lets you import Three.js features to your app independently, so in that case, we can import THREEE.ObjectLoader, and all other required dependencies will be taken care of by the package implementation.

See Forge community blog here: https://forge.autodesk.com/blog/how-add-newest-threejs-features-forge-viewer