Hey there! I recently incorporated a new component into my project that utilizes ThreeJS. My intention is to create a visually appealing scene with a light background and two boxes. However, despite my efforts to render the boxes, all I see is a black background. Is there something I'm missing or doing wrong?
Below is the code snippet of my component:
<template>
<body>
<div id='change'>
<router-link class="changepage" to='/OrdreCouches'> >Retour </router-link>
</div>
<div id="container"></div>
</body>
</template>
<script>
import * as THREE from 'three'
import * as dat from 'dat.gui'
export default {
name: 'Visualisation',
data() {
return {
cube: null,
cube2: null,
renderer: null,
scene: null,
camera: null,
group: null
}
},
mounted() {
this.scene = new THREE.Scene()
this.scene.background = new THREE.Color( 0xf0f0f0)
this.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1,
10000
)
this.renderer = new THREE.WebGLRenderer({ antialias:true })
this.renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(this.renderer.domElement)
const geometry2 = new THREE.BoxGeometry(390, 155, 240)
const material2 = new THREE.MeshBasicMaterial({ color: 0x0246464 })
const geometry = new THREE.BoxGeometry(390, 155, 240)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
this.cube = new THREE.Mesh(geometry, material)
this.cube2 = new THREE.Mesh(geometry2, material2)
this.cube.position.set(170,0,485)
this.cube2.position.set(80,0,195)
this.group = new THREE.Group()
this.group.add(this.cube)
this.group.add(this.cube2)
this.scene.add(this.group)
const gui = new dat.GUI()
const camerafolder = gui.addFolder("camera")
camerafolder.add(this.camera.position, "x", 0, 300, 0.01)
camerafolder.add(this.camera.position, "y", 0, 300, 0.01)
camerafolder.add(this.camera.position, "z", 0, 1500, 0.01)
camerafolder.open()
}
}
</script>
<style>
* {padding: 0; margin: 0}
.changepage{
position: absolute;
color: rgb(0, 0, 0);
font-size: 30px;
}
.changepage:hover{
position: absolute;
color: rgb(53, 20, 199);
font-size: 30px;
}
</style>
Your insights on this issue would be greatly appreciated. Thank you!