关于three.js:vue使用threejs加载glb或者gltf模型以及踩坑

须要在组件内引入下列的货色

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'

创立 scene

this.scene = new THREE.Scene()

而后引入模型

const loader = new GLTFLoader()

loader.load(
    '/glb/aaa.glb',
    gltf => {this.scene.add(gltf.scene)
    },
    undefined,
    undefined
)

文件门路

提醒：千万别写 public/glb/aaa.glb
不然会报这个错unexpected token < in json at position 0，因为你加载不到动态资源