开发者问题收集

在 Autodesk Forge Viewer 中添加 ThreeJs 模型

2020-11-29
761

我无法通过 objectloader 加载 threejs 模型,我添加了最新的 ThreeJs 库版本以获得更多功能,例如使用 objectloader 创建文本...这是我的代码:

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

哪个 THREEE 是我从外部加载的 threejs 库。 obj 是场景,所以我为 object3D 获得了子项,但它总是返回 object 而不是 THREE.Object3D 的实例。 我记录结果并且类型是 object3D,它应该是正确的,但事实并非如此?

在此处输入图片描述

1个回答

看起来您正在使用另一个版本的 three.js 并全局引用它,而该版本不是由 Forge Viewer 本身提供的,并且会与 Forge Viewer 版本冲突。正如 Petr 在此处提到的( 在 autodesk forge viewer 中升级 three js 版本 ),Forge Viewer 使用自行维护的 three.js r71,删除了大多数内置的 three.js 函数。

如果您想使用 Forge Viewer 的 three.js 库中缺少的功能,我建议您使用一些现代开发工具,例如捆绑器(Webpack 是最受欢迎的)。您可以利用 ES6 模块并仅将严格需要的依赖项导入到您的应用程序中。 threejs-full-es6 软件包可让您将 Three.js 功能独立导入到您的应用中,因此在这种情况下,我们可以导入 THREEE.ObjectLoader ,所有其他所需的依赖项将由软件包实现处理。

请参阅此处的 Forge 社区博客: https://forge.autodesk.com/blog/how-add-newest-threejs-features-forge-viewer

Eason Kang
2020-11-30