vue.js Forge查看器中的着色模型给出无法读取未定义的属性(阅读“setThemingColor”)

cnjp1d6j  于 2022-12-23  发布在  Vue.js
关注(0)|答案(1)|浏览(213)

我试图给提供的inventor_sample_file.ipt一个不同的颜色。我有下面的SFC。一些代码是从另一个SO question

<template>
    <div class="viewer-container">
        <div id="forge-viewer" />
    </div>
</template>

<script>
export default {
    props: {
        object: {
            type: Object,
            required: true,
        },
    },

    mounted()
    {
        this.initializeViewer();
    },

    data()
    {
        return {
            viewer: null,
            access_token: <some token>, // No, it is not hardcoded
            options: {
                env: 'AutodeskProduction2',
                api: 'streamingV2_EU',  // for models uploaded to EMEA change this option to 'streamingV2_EU'
                getAccessToken: onTokenReady => {
                    let token = this.access_token;
                    let timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
                    onTokenReady(token, timeInSeconds);
                }
            }
        }
    },

    methods: {
        initializeViewer()
        {
            this.$loadScript('https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js')
                .then(() => {
                    Autodesk.Viewing.Initializer(this.options, () => {
                        this.viewer = new Autodesk.Viewing.GuiViewer3D(
                            document.getElementById('forge-viewer'),
                        );

                        let startedCode = this.viewer.start();
                        if( startedCode > 0 )
                        {
                            console.error('Failed to create a Viewer: WebGL not supported.');
                            return;
                        }

                        this.loadModel(<base64 encoded this.object.object_id>);
                    });

                }).catch((error) => {
                    console.warn('Autodesk not loaded', error);
                });
        },

        onDocumentLoadedSuccess(viewer_document)
        {
            let viewerapp = viewer_document.getRoot();
            let default_model = viewerapp.getDefaultGeometry();
            let viewables = viewerapp.search({'type':'geometry'});

            if(viewables.length === 0)
            {
                console.error('Document contains no viewables.');
                return;
            }

            this.viewer.loadDocumentNode(viewer_document, default_model);

            this.viewer.loadExtension('Autodesk.PDF').then( () => {
                this.viewer.loadExtension("Autodesk.Viewing.MarkupsCore")
                this.viewer.loadExtension("Autodesk.Viewing.MarkupsGui")
            });

            console.log(new THREE.Vector4(1, 0, 0, 0.5));
            this.viewer.setThemingColor(4, new THREE.Vector4(1, 0, 0, 0.5), null, true);
        },

        onDocumentLoadedFailure()
        {
            console.error('Failed fetching Forge manifest');
        },

        loadModel(urn)
        {
            const documentId = `urn:${urn}`;
            Autodesk.Viewing.Document.load(
                documentId,
                viewer_document => this.onDocumentLoadedSuccess(viewer_document),
                () => this.onDocumentLoadedFailure
            );
        },
    }
}
</script>

<style scoped>
@import 'https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css';

#forge-viewer {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #F0F8FF;
}

.viewer-container {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
</style>

模型已加载到查看器中,但现在出现以下错误:
浏览器3D.js:4872未捕获类型错误:无法读取未定义的属性(读取"setThemingColor")
此错误引用以下内容:

Viewer3D.prototype.setThemingColor = function(dbId, color, model, recursive) {
  // use default RenderModel by default
  model = model || this.model;

  model.setThemingColor(dbId, color, recursive); // this line gives the error

  // we changed the scene to apply theming => trigger re-render
  this.impl.invalidate(true);
};

我并不感到惊讶,因为null是为这里的模型this.viewer.setThemingColor(4, new THREE.Vector4(1, 0, 0, 0.5), null, true);给出的,虽然如果this.model被设置,这应该不是一个问题,但显然它不是。
我希望有人能给我指出如何给模型上色的正确方向。

更新

我根据建议补充了以下内容:

this.viewer.loadDocumentNode(viewer_document, default_model).then(model => {    
    console.log('model', model, 'color', new THREE.Vector4(1, 0, 0, 0.5));
    this.viewer.setThemingColor(4, new THREE.Vector4(1, 0, 0, 0.5), model, true);
});

这将给出如下所示的日志。错误消失了。

但它仍然没有改变模型的颜色。

icnyk63a

icnyk63a1#

据我所知,这是因为您在loadDocumentNode完成之前运行了setThemingColor
您可以尝试将viewer.setThemingColor(...)放入loadDocumentNode()的回调函数中吗?只是为了确保您在模型完全加载后设置颜色。
像这样:

this.viewer.loadDocumentNode(viewer_document, default_model)
.then(() => {
    //when document node loaded, do...
    this.viewer.setThemingColor(4, new THREE.Vector4(1, 0, 0, 0.5), this.model, true);
})

相关问题