话不多说直接上代码：



----start


import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
    name: "three",
    data() {
        return {
            camera: '',  // 相机
            scene: '',   // 场景
            renderer: '',// 渲染器
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const THREE = this.$three

            // 创建相机
            this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
            this.camera.position.set(0,0,5)

            // 创建场景
            this.scene = new THREE.Scene()
            // this.scene.background =  new THREE.Color(0xffffff)

            // 设置灯光
            // const directionalLight =  new THREE.DirectionalLight(0xffffff, 0.5)
            // this.scene.add(directionalLight)

            // 设置场景灯光
            // const light =  new THREE.AmbientLight(0x404040)
            // this.scene.add(light)

            // 实例化渲染器  【antialias:true ---> 去除菱角】
            this.renderer = new THREE.WebGLRenderer({antialias:true})
            this.renderer.setSize( window.innerWidth, window.innerHeight )

            // 渲染后添加到页面上
            document.body.appendChild( this.renderer.domElement )
            // 随窗口大小变化
            window.addEventListener('resize',()=>{this.onwindowResize()})

            // 添加材质
            const textureLoader = new THREE.TextureLoader()
            const boxtextture = textureLoader.load('./api/box.jpg')

            // 添加立方体图形
            const boxGeometry = new THREE.BoxGeometry(1,1,1)
            // 创建环境立方体
            const skyboxGeometry = new  THREE.BoxGeometry(200,200,200)

            // 创建贴图---材质
            // const meshBasicMaterial = new THREE.MeshBasicMaterial({color:'white'} )
            const meshBasicMaterial = new THREE.MeshBasicMaterial({map: boxtextture, side: 2} )
            const skyboxMaterial = [
                new THREE.MeshBasicMaterial({map: textureLoader.load('./api/skybox/rt.png'), side: 2} ),
                new THREE.MeshBasicMaterial({map: textureLoader.load('./api/skybox/lf.png'), side: 2} ),
                new THREE.MeshBasicMaterial({map: textureLoader.load('./api/skybox/up.png'), side: 2} ),
                new THREE.MeshBasicMaterial({map: textureLoader.load('./api/skybox/dn.png'), side: 2} ),
                new THREE.MeshBasicMaterial({map: textureLoader.load('./api/skybox/bk.png'), side: 2} ),
                new THREE.MeshBasicMaterial({map: textureLoader.load('./api/skybox/ft.png'), side: 2} )
            ]
            // 组合几何图形 和 材质
            const mesh = new THREE.Mesh( boxGeometry, meshBasicMaterial )
            const skymesh = new THREE.Mesh( skyboxGeometry, skyboxMaterial )
            mesh.name = 'box'
            skymesh.name = 'skybox'
            // 添加到舞台中
            this.scene.add(mesh)
            this.scene.add(skymesh)

            // 增加鼠标的控制
            new OrbitControls(this.camera, this.renderer.domElement);

            // const  _th = this
            // 加载外部模型
            // const OBJLoad = new OBJLoader()
            // const MTLLoad = new MTLLoader()
            // const loader = new GLTFLoader()
            // const loader = new FBXLoader()
            // const loader  = new this.$three.;
            // const loader = new THREE.ObjectLoader()
            // loader.load('./api/bd.fbx', function (obj) {

                //加载路径fbx文件
                // obj.traverse( function ( child )
                // {
                //     if ( child instanceof THREE.Mesh )
                //     {
                //         child.castShadow = true
                //         child.receiveShadow = true
                //     }
                // } )

            // MTLLoad.setResourcePath('./api/sourceimages/')
            // MTLLoad.load('./api/wx.mtl',function (materials) {
                // materials.preload()
                // console.log(materials)
                // OBJLoad.setMaterials(materials)
                // OBJLoad.setPath('./api/')
                // OBJLoad.load('nv.obj', function (obj) {
                //     console.log(obj)
                    // obj.traverse((child) => {
                    //     if (child instanceof THREE.Mesh) {
                    //         child.material.side = THREE.DoubleSide
                    //         child.scale.set(50, 50, 50)
                    //     }
                    // })
                    // _th.scene.add(obj)
                    // _th.render()
                // }, undefined, function (error) {
                //     console.error(error)
                // })
            // })

            // 监听页面点击事件
            // this.renderer.domElement.addEventListener('click', event =>{
            //     console.log(event)
                // const raycaster = new  Raycaster()
                // raycaster.intersec
            // })

            // 模型渲染
            this.render()

        },
        render(){
            window.requestAnimationFrame(()=>this.render())

            // 旋转动画
            // const box = this.scene.getObjectByName('box')
            // box.rotation.x += 0.001
            // box.rotation.y += 0.001
            // box.rotation.z += 0.001

            // 环境动画
            const skybox = this.scene.getObjectByName('skybox')
            skybox.rotation.y +=0.0001

            this.renderer.render(this.scene, this.camera)
        },
        onwindowResize(){
            this.renderer.setSize( window.innerWidth, window.innerHeight )

            this.camera.aspect = window.innerWidth / window.innerHeight
            this.camera.updateProjectionMatrix()  // 透视矩阵
        },
    }





-----end