After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image:
https://i.stack.imgur.com/3kigr.png
In the screenshot, you can see that opening the three.js animation view multiple times results in multiple instances of the canvas appearing stacked below each other.
Switching to another component resolved the duplication problem, leading me to believe it might be related to how the rendering is handled in my code. Do I need to make changes to my three.js code implementation?
If interested, you can access the full repo for download here: https://github.com/reppoper/routerthree
Here's the essential parts of my code:
App.vue<template>
<div id="app">
<router-link to="/">Page1</router-link> |
<router-link to="/page2">Page2</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
Page1.vue
<template>
<div>
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
components: {
HelloWorld
}
}
</script>
Page2.vue
<template>
<div>
<HelloThree />
</div>
</template>
<script>
import HelloThree from "../components/HelloThree.vue";
export default {
components: {
HelloThree,
},
};
</script>
And here are the component details:
HelloWorld.vue <template>
<div class="hello">
<h1>HELLO</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
HelloThree.vue
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three'
export default {
name: 'HelloThree',
data() {
return {
cube: null,
renderer: null,
scene: null,
camera: null
}
},
methods: {
init: function() {
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight)
this.container = document.getElementById("container");
this.container.appendChild(this.renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
this.cube = new THREE.Mesh(geometry, material)
this.scene.add(this.cube)
this.camera.position.z = 5
},
animate: function() {
requestAnimationFrame(this.animate)
this.cube.rotation.x += 0.01
this.cube.rotation.y += 0.01
this.renderer.render(this.scene, this.camera)
}
},
mounted() {
this.init()
this.animate()
}
}
</script>
router.js
import Vue from "vue";
import Router from "vue-router";
import Page1 from "./views/Page1.vue";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "page1",
component: Page1
},
{
path: "/page2",
name: "page2",
component: () =>
import(/* webpackChunkName: "home" */ "./views/Page2.vue")
}
]
});
UPDATE I attempted to address memory leakage by adding:
beforeDestroy() {
this.container.destroy();
}
Unfortunately, this resulted in an error message:
Error in beforeDestroy hook: "TypeError: this.container.destroy is not a function"
It seems like I may need to properly destroy all instances created in the component such as materials, scenes, and cameras? Any suggestions on how to resolve this issue would be greatly appreciated.