vue集成three.js加载外部模型

版本号：

vue:2.6.10
vue-cli3.x
three.js:0.115.0

引入方式：

import * as THREE from 'three'
import Stats from 'stats.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

模型目录：

.glb经过了webpack的处理，需要把.obj文件放到vue中处理静态文件的文件夹中，在vue-cli3中public文件夹下的文件不需要经过webpack处理，在vue-cli3.0之前就是放在static静态文件文件夹下，在vue-cli3.0中需要放在public文件夹下，并且在组件中通过process.env.BASE_URL+public文件夹下的.obj文件的路径来引用。

组件引用：

通过全局process.env.BASE_URL直接引入及可`${process.env.BASE_URL}model/Soldier.glb`
this.gltfLoader.load(
            `${process.env.BASE_URL}model/Soldier.glb`,
            gltf => {
                alert('11')
                gltf.scene.name = 'Soldier'
                gltf.scene.rotation.y = Math.PI
                this.scene.add(gltf.scene)
                this.treeData = [gltf.scene]
                this.scene.add(new AmbientLight(0xffffff, 2))

                this.orbitControls.target.set(0, 1, 0)

                const animationClip = gltf.animations.find(
                    animationClip => animationClip.name === 'Walk'
                )
                this.walkAction = this.animationMixer.clipAction(
                    animationClip
                )
                this.walkAction.play()
            }
        )

其他：

赠送一个官方的glb格式的文件
http://www.webgl3d.cn/threejs/examples/models/gltf/Soldier.glb
附上代码

还在摸索中可以交流哈