Vue.js Three.js 错误：'container.value' 可能为 'null' 的解决方案

正如错误消息所示，`container.value` 可能为 `null`。这是因为 `ref(null)` 最初将值设置为 `null`。为了避免此错误，您可以使用可选链操作符 `?.` 来访问 `value` 属性，但前提是 `container` 不为 `null`：

<template>
  <div ref="container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as THREE from 'three';

const container = ref<HTMLDivElement | null>(null);
let scene: THREE.Scene | null = null;
let camera: THREE.PerspectiveCamera | null = null;
let renderer: THREE.WebGLRenderer | null = null;

const setScene = () => {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x001219);
};

const setCamera = () => {
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    5000
  );
  camera.position.set(0, 0, 8);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  scene.add(camera);
};

const setRenderer = () => {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.value?.appendChild(renderer.domElement);
};

const init = () => {
  setScene();
  setCamera();
  setRenderer();
};

onMounted(init);
</script>