VueJS项目使用ThreeJS渲染仅显示黑色背景该如何解决？

已定位的问题点 #

• 缺少渲染触发逻辑：完成场景、相机、模型初始化后，没有调用renderer.render()方法执行渲染，也没有启动动画渲染循环，导致画面始终没有内容输出。
• 相机位置与朝向错误：PerspectiveCamera 初始化后默认位置为(0, 0, 0)，默认朝向为Z轴负方向，而你的两个立方体都放在Z轴正方向区域，相机完全看不到模型；同时相机没有设置足够的远距，和模型位置重叠导致穿模。
• 颜色值格式错误：第二个立方体的材质颜色0x0246464为7位十六进制值，标准Web颜色为6位十六进制，多余位会导致颜色解析异常。
• DOM 挂载不规范：Vue单文件组件template中不应该出现<body>标签，同时直接把ThreeJS渲染画布挂载到document.body会覆盖页面原有内容（比如你的返回按钮），建议挂载到预留的container节点下。
• 缺少销毁逻辑：组件卸载时没有清除渲染循环、WebGL上下文等资源，会导致内存泄漏。

修正后的完整代码 #

<template>
  <div id='change'>    
      <router-link class="changepage" to='/OrdreCouches'> >Retour </router-link>    
  </div> 
  <div id="container"></div>
</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,
      animationId: null // 存储动画帧ID，用于销毁
    }
  },
  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
    )
    // 调整相机位置到Z轴正方向，足够容纳两个立方体的深度
    this.camera.position.set(0, 0, 1500)

    this.renderer = new THREE.WebGLRenderer({ antialias:true })
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    // 挂载到预留的container节点，不覆盖其他内容
    document.getElementById('container').appendChild(this.renderer.domElement)

    const geometry2 = new THREE.BoxGeometry(390, 155, 240)
    // 修正颜色值为6位十六进制
    const material2 = new THREE.MeshBasicMaterial({ color: 0x024646 })
    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()

    // 启动渲染循环
    this.animate()
    // 绑定窗口大小变化监听
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    animate() {
      this.animationId = requestAnimationFrame(this.animate)
      // 执行渲染
      this.renderer.render(this.scene, this.camera)
    },
    handleResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
    }
  },
  beforeUnmount() {
    // 组件销毁时清除资源
    cancelAnimationFrame(this.animationId)
    window.removeEventListener('resize', this.handleResize)
    this.renderer.dispose()
  }
}
</script>

<style scoped>
* {padding: 0; margin: 0}
#container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
.changepage{
  position: absolute;
  color: rgb(0, 0, 0);
  font-size: 30px;
  z-index: 9; /* 提高层级，避免被画布覆盖 */
}
.changepage:hover{
  color: rgb(53, 20, 199);
  font-size: 30px;
}
</style>

内容的提问来源于stack exchange，提问作者Lorine