记录一下在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);
// 照常使用即可

也可以直接看npm原文

在此之前也试过其他包， three-orbit-controls， three-orbitcontrols-ts
但是时间都比较久了，我没成功。

还有其他方法https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js 下载OrbitControls源码然后自己改改，并不复杂(亲测有效)

下载后可以看见，大致内容就是一个立即执行函数， 并向THREE添加了2个对象，该文件没有引入其他文件

1. 文件用到了THREE, 所以先在文件头引入 THREE

import * as THREE from 'three'

2. 删除外包立即执行函数（首行，尾行）
3. 删除（使用ts时不删除会有警告）

1107行  THREE.MapControls = MapControls
1108行 THREE.OrbitControls = OrbitControls

4. 末尾导出文件中定义的对象，MapControls， OrbitControls

export { MapControls, OrbitControls }

使用：import { OrbitControls } from './OrbitControls.js'