vue 中使用Three.js 加载模型
加载 gltf 模型
加载模型时我们引用的是three中封装好的方法
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
引入后使用 url 为模型地址 可以使用在线模型也可以使用本地模型
我们使用的是
https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf
官网给的一个例子
let loader = new GLTFLoader() loader.load(url, (obj) => { scene.add(obj.scene) })
结合前面代码可以实现这个功能
结合three 中提供的 OrbitControls 相机控件我们可以实现鼠标控制 三维场景进行缩放、平移、旋转操作控制相机的视角来观察模型
viewcontrols = new OrbitControls(camera, renderer.domElement)viewcontrols.enableRotate = true // 启用相机的水平和垂直旋转
同理加载fbx等类型模型可以通过引入不同类型的模型加载控件来实现该模型的加载
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
使用时和加载gltf的是一样的，根据需求自行添加
