Vue.js 在VUE中呈现three.js画布，而不在其子级之外使用let变量

我尝试在vue设置中渲染三个js画布。 但由于Vue的状态管理模式，只有在 我在vue状态管理之外设置了与画布相关的变量

我看到了一个在vue状态环境中实现这一点的示例，但是 在这种情况下，DOM元素必须在vue中创建，而不是在html/模板中创建

有没有一种方法可以在vue中创建三个画布，而不使用vue之外的变量 （它的意思是使用let场景，而不是这个场景）

或

使用vue状态管理，但不使用

document.body.appendChild(this.renderer.domElement);

宁用

this.renderer=new THREE.WebGLRenderer({canvas:this.canvas})

多谢各位

我的Vue代码如下所示

<template>
    <div>
        <canvas id="myCanvas"></canvas>
    </div>
</template>

<script>
import * as THREE from 'three'



export default {
data(){
    return{
        canvas:null,
        pointArr:[],
        scene:null,
        camera:null,
        renderer:null,
        cube:null

    }
},
computed:{

},
methods:{

init(){
this.scene =new THREE.Scene();
this.canvas=document.querySelector('#myCanvas');
this.canvas.width=innerWidth;
this.canvas.height=innerHeight;

this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
this.renderer=new THREE.WebGLRenderer({canvas:this.canvas})
this.renderer.setSize( window.innerWidth, window.innerHeight );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

this.cube= new THREE.Mesh( geometry, material );
this.camera.position.z = 5
this.scene.add(this.cube);


},

animate(){
    requestAnimationFrame( this.animate );
    this.cube.rotation.x += 0.1;
    this.cube.rotation.y += 0.1;
    this.renderer.render(this.scene, this.camera);
}

},

mounted(){


this.init()
this.animate();
// window.addEventListener()
},
created(){



},

unmounted(){
//window.removeEvenetListener()
}




}
</script>

---

感谢您提供的错误屏幕截图。您似乎无法使用状态变量存储值

这是因为Vue实际上将状态变量转换为可观测值，以便反应性工作。Three.js抱怨您分配的变量将其值从#更改为[object object]，这表明，一旦您将其分配给类变量，Vue更改了其值，现在Three.js将不再使用它

---

这就是为什么您看到的所有其他示例都是在Vue组件之外定义它的原因。

您能将代码发布到您尝试过的地方吗？没有附加的代码，问题就不清楚了。@ChaseDeAnda我刚刚附上了代码和屏幕截图。非常感谢。

this.renderer.render(this.scene, this.camera);