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