Can't add to scene - forge viewer. error: 'THREE.Object3D.add: object not an instance of THREE.Object3D.'

Question

I create an application with react, three.js and forge-viewer. With forge viewer just started working, and now I can't to add a new object to the scene. I get an error:

THREE.Object3D.add: object not an instance of THREE.Object3D.

I am tried add Mesh, Line and Points to scene. But I getting this error and scene was with the previous model unchanged. if you share the working code viewer.js and tall me which version of three.js & forge-apis you use - I will be very grateful)

        import {getForgeToken} from "../libs/tokenQueries";
        import {Vector3, LineBasicMaterial, Line, Geometry} from "three";

        const Autodesk = window.Autodesk;
        let viewer

        function onDocumentLoadSuccess(doc) {
            const viewables = doc.getRoot().getDefaultGeometry();

            viewer.loadDocumentNode(doc, viewables).then(i => {
                //can't add in this place
                const material = new LineBasicMaterial({color: 0xffff00, linewidth: 2});
                const geometry = new Geometry();
                geometry.vertices.push(
                    new Vector3(-10, 0, 0),
                    new Vector3(0, 10, 0),
                    new Vector3(10, 0, 0)
                );

                const line = new Line(geometry, material);

                viewer.impl.createOverlayScene('pointclouds');
                viewer.impl.addOverlay('pointclouds', line);

                viewer.addEventListener(
                    Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, (args) => {
                        //and can't add in this place
                        const material = new LineBasicMaterial({color: 0xffff00, linewidth: 2});
                        const geometry = new Geometry();
                        geometry.vertices.push(
                            new Vector3(-10, 0, 0),
                            new Vector3(0, 10, 0),
                            new Vector3(10, 0, 0)
                        );

                        const line = new Line(geometry, material);

                        viewer.impl.createOverlayScene('pointclouds');
                        viewer.impl.addOverlay('pointclouds', line);
                    })
            });
        }

        function onDocumentLoadFailure(viewerErrorCode) {
            console.error("onDocumentLoadFailure() - errorCode:" + viewerErrorCode);
        }

        function launchViewer(urn) {
            const options = {
                env: "AutodeskProduction",
                getAccessToken: getForgeToken
            };

            viewer = new Autodesk.Viewing.GuiViewer3D(
                document.getElementById("forgeViewer")
            );

            Autodesk.Viewing.Initializer(options, () => {
                viewer.start();
                const documentId = "urn:" + urn;
                Autodesk.Viewing.Document.load(
                    documentId,
                    onDocumentLoadSuccess,
                    onDocumentLoadFailure
                );
            });
        }

        const Helpers = {
            launchViewer
        };

        export default Helpers;

Error: THREE.Object3D.add: object not an instance of THREE.Object3D.

Answer 1

it was because I connected three.js. Three.js is out of the box in forge, we do not need to connect it separately.

Answer 2

First, in your code snippet you're adding a points object to the scene (viewer.impl.addOverlay('pointclouds', points);) but I don't see that object defined anywhere...?

Second, I've seen a similar issue happen in the past (How to add a mesh to forge viewer v6 using Typescript?), and it was caused by two different versions of three.js being used in the same application. The Forge Viewer is built on top of three.js version 71, and it's possible that your code is adding an object from a different version of three.js where the check for "is this an instance of THREE.Object3D" fails.