记录一下在vue中使用threejs遇到的一些问题
1、three对象身上没有OrbitControls
最简单的方法
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
其他方案
- 使用 @three-ts/orbit-controls, ts项目也能正常使用
- 安装
npm install --save @three-ts/orbit-controls
- 使用
import * as THREE from 'three';
import { OrbitControls } from '@three-ts/orbit-controls';
const camera = new THREE.SomeCamera(...);
const controls = new OrbitControls(camera, renderer.domElement);
// 照常使用即可
在此之前也试过其他包, three-orbit-controls, three-orbitcontrols-ts
但是时间都比较久了,我没成功。
还有其他方法https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js 下载OrbitControls源码然后自己改改,并不复杂(亲测有效)
下载后可以看见,大致内容就是一个立即执行函数, 并向THREE添加了2个对象,该文件没有引入其他文件
- 文件用到了THREE, 所以先在文件头引入 THREE
import * as THREE from 'three'
- 删除外包立即执行函数(首行,尾行)
- 删除(使用ts时不删除会有警告)
1107行 THREE.MapControls = MapControls
1108行 THREE.OrbitControls = OrbitControls
- 末尾导出文件中定义的对象,MapControls, OrbitControls
export { MapControls, OrbitControls }
使用:
import { OrbitControls } from './OrbitControls.js'