Why am I only seeing a black background using ThreeJS with VueJS?

Question

I have added a component to my project and I plan to use ThreeJS in it. I want to see a "light" background with my two boxes. I tried adding some code to render two boxes in my window but I only see a black background, do you have any idea on what i am doing wrong?

Here is my component code:

<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>

Thank you for your help!

score 0 · Answer 1 · answered May 21 '21 at 12:34

0

You can make use of vue ref to reference DOM element instead of using document.body.appendxxx. The size of the BoxGeometry is too large to display and you forget to set the camera and render the scene.

Here is the example in codesandbox based on your code:

https://codesandbox.io/s/charming-water-52r64?file=/src/components/HelloWorld.vue:863-874

// use ref to get reference of element instead of using document.getxxx/queryxxxx
this.$refs.container.appendChild(renderer.domElement);

// render
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 3;
renderer.render(scene, camera);

answered May 21 '21 at 12:34

Mic Fung

5,404
2
7
17

Great! Thank you! but now I hava another question. I want to add a method named animate at the end of mounted but I don't know how to access the cube, group etc that I have created in the mounted part – Lorine May 21 '21 at 13:29
just use back this if you want to access the cube and group in vue methods. updated the codesandbox for you to see – Mic Fung May 21 '21 at 13:39
I get a `TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#' but got '[object Object]')` when I try to do what you did – Lorine May 21 '21 at 14:09
https://codesandbox.io/s/infallible-sinoussi-h9hld?file=/src/components/HelloWorld.vue On the codesandbox I don't get the TypeError message I don't know why. I have exactly the same script on my project. And the TypeError appears when I launch the page – Lorine May 21 '21 at 14:42
no error in the code, how to reproduce your problem? – Mic Fung May 21 '21 at 14:45
I don't kow, I really don't understand where this is coming from – Lorine May 21 '21 at 14:52
I don't understand either. In the codesandbox you shared, there is no error at all. – Mic Fung May 21 '21 at 14:53
maybe you need to share your code on Github or you can export the codesandbox project to your local env and cross-check it – Mic Fung May 21 '21 at 15:12
Can you fix the final error? I think my answer already solve your problem in the question. – Mic Fung May 25 '21 at 08:13

Why am I only seeing a black background using ThreeJS with VueJS?

1 Answers1