Question

我需要在我的Vue项目中实施Three.js。

到目前为止，我设法将三者的声明性代码的部分划分为较小的组件，这些组件不呈现任何内容，因此该代码看起来更像WebGL使用HTML向场景中添加部分。

当前，它看起来像这样：

<template>
    <div class="scene" ref="sceneContainer">
        <div v-if="canRenderParts" class="scene__parts">
            <Camera></Camera>
            <Light></Light>
            <Controls></Controls>
        </div>
    </div> 
<template>

<script>
    data () {
        return { 
            canRenderParts: false
        };
    },
    mounted () {
        // Scene
        this.$store.commit('setScene', new THREE.Scene());

        // Renderer
        this.$store.commit('setRenderer', new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        }));
        this.$store.state.renderer.setSize(
            this.$refs.sceneContainer.offsetWidth,
            this.$refs.sceneContainer.offsetHeight
        );
        this.$refs.sceneContainer.appendChild(
            this.$store.state.renderer.domElement
        );

        this.animate(); // basic animation loop

        // Bootstrap other parts of the scene
        this.canRenderParts = true;
    }
    // ...
</script>

现在，我想删除canRenderParts hack，但是我不确定是否可行。之所以有canRenderParts是因为我正在mounted生命周期事件中引导Three.js（因为它正在使用$refs生命周期事件中不可用的create）。如果在创建画布之前渲染场景的其他部分（在renderer.domElements附加到sceneContainer之前），我看不到它们，这就是为什么有一个包装器在创建画布后触发它们的创建的原因

我当时正在考虑使用render函数进行模板渲染，但是不确定是否有帮助。

所以，我想知道……在这种情况下我该怎么办？有没有更多的“本机”方法可以动态地初始化组件？

谢谢。

在Vue中安装生命周期事件后渲染子节点

0 个答案: