vue3的three怎麼做天空盒子

如何引入three請看

加入three

//圖檔

//效果

//圖檔放在public檔案夾裡面

//代碼

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

<script>
//場景 相機 物體 渲染器 軌道控制器
let scene = null,
camera = null,
cube = null,
renderer = null
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { defineComponent,onMounted,reactive,toRefs} from 'vue';
export default defineComponent({
    setup(){
        const state = reactive({
            controls:null
        })
        const render = () =>{
          //1.建立場景
          scene = new THREE.Scene();
          //場景建立天空盒子
          const textureCubeLoader = new THREE.CubeTextureLoader();
          const textureCube = textureCubeLoader.load([
            "./5.png",
            "./5.png",
            "./5.png",
            "./5.png",
            "./5.png",
            "./5.png",
          ])
          scene.background = textureCube;
          scene.environment = textureCube;
          //建立相機
          camera = new THREE.PerspectiveCamera(105,window.innerWidth/window.innerHeight,0.1,1000);
          //設定相機位置
          camera.position.set(0,0,10);
          scene.add(camera);
          //3.定義材質貼圖
          const textureLoader = new THREE.TextureLoader();
          const doorColorTexture = textureLoader.load("./1001.png");
          
       
        //4.添加物體
          const cubeGeometry = new THREE.SphereGeometry();
          //材質
          const basicMaterial = new THREE.MeshBasicMaterial({
            map:doorColorTexture
          })
          cube = new THREE.Mesh(cubeGeometry,basicMaterial);
          scene.add(cube);
          
          //5.初始化渲染器
          renderer = new THREE.WebGLRenderer();
          //設定渲染器尺寸大小
          renderer.setSize(window.innerWidth,window.innerHeight);
          //将webgl渲染的canvas内容添加到div
          let container = document.getElementById('container');
          container.appendChild(renderer.domElement);
          //使用渲染器 通過相機将場景渲染出來
          renderer.render(scene,camera);

          state.controls = new OrbitControls(camera,renderer.domElement);
        }
        const animate = () =>{
           requestAnimationFrame(animate);

           renderer.render(scene,camera);
        }
        onMounted(()=>{
            render()
            animate()
        })
        return{
            ...toRefs(state)
        }
    }
})
</script>

<style scoped>
#container{
    width:100vw;
    height:100vh;
}
</style>```