Рендеринг дочерних узлов после смонтированного события жизненного цикла в Vue - PullRequest
Новая
       7

Рендеринг дочерних узлов после смонтированного события жизненного цикла в Vue

0 голосов
/ 28 сентября 2018

Мне нужна помощь по внедрению Three.js в мой проект Vue.

До сих пор мне удалось разделить части декларативного кода трех на более мелкие компоненты, которые ничего не визуализируют, поэтому код больше похож на то, что 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, но я не уверен, возможно ли это.canRenderParts есть, потому что я загружаю Three.js в mounted событии жизненного цикла (так как он использует $refs, которого нет в create событии жизненного цикла).Если я отрисовываю другие части сцены до создания холста (до того, как renderer.domElements будет добавлен к sceneContainer), я не смогу их увидеть, поэтому есть обертка, которая запускает их создание после создания холста.

Я думал об использовании функции render для рендеринга шаблонов, но я не уверен, поможет ли это.

Итак, мне интересно ... что мне делать втакая ситуация?Есть ли еще «родной» подход к динамической инициализации компонентов?

Заранее спасибо.

...