vue3的three几何体加入材质贴图

如何引用three请看这篇文章
引入three

//贴纸

//效果

//代码

<!--  -->
<template>
    <div id="container">123</div>
</template>
  
  <script>
//导入three
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 () {
    console.log(THREE)
    const state = reactive({
        controls:null
    })
    const render = () =>{
       //1.创建场景
       scene = new THREE.Scene();
       //2.创建相机
       camera = new THREE.PerspectiveCamera(35,window.innerWidth/window.innerHeight,0.1,1000);
       //设置相机位置
       camera.position.set(0,0,10);
       scene.add(camera);
       //3.定义材质贴图
       const textureLoader = new THREE.TextureLoader();
       //这里是引入贴纸,文件放在public文件夹下面
       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);
       
       console.log(OrbitControls);
       //加入轨道控制器
       state.controls = new OrbitControls(camera,renderer.domElement);
    }
    const animate = () => {
        //需要加动画效果 否则轨道控制器无非使用
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;
        renderer.render(scene,camera);
    }
    onMounted(()=>{
        render()
        animate()
    })
    return {
        ...toRefs(state)
    };
  },

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