Vue3 使用 Three.js 创建 3D 场景：解决 'container.value' 可能为 'null' 错误

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import * as THREE from 'three'
const container = ref<HTMLDivElement|null>(null) // 添加类型注解
let scene:any= null
let camera:any= null
let renderer:any = 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()
}
onMounted(()=>{ // 在组件挂载后调用 setRenderer
    setRenderer()
})
</script>
<template>
    <div ref="container"></div>
</template>