Javascript 使用Threejs+；TypeScript中的轨道控件

我无法得到在TypeScript中使用上述组合的示例

我的html中有

和

以及

中的typescript文件：

在定期调用的

render（）

函数中。据我所知，该设置与expample相同，但在编译OrbitControls构造函数行时给了我一个巨大的错误（缩写）：

The property 'OrbitControls' does not exist on value of type '{REVISION:string;   
CullFace: {[x: number ...

---

我猜这个错误中有整整三个JS，因为我一点击VisualStudio就崩溃了：）。谢谢你的帮助。

感觉有点傻，因为解决方案（或至少解决方法）非常简单

只需声明

OrbitControls

变量：

declare var THREE.OrbitControls: any; // even "declare var THREE.OrbitControls;" will do the trick

---

仍然存在一些编译错误，但它可以工作。

在eclipse typescript中，答案对我来说不起作用，因为它与前面的引用语句冲突。但以下工作：

declare module THREE {export var OrbitControls}

---

虽然前面的答案可能在某种程度上有效，但你应该选择现成的答案。它们还定义了OrbitControl的属性和方法。

在添加了三个orbitcontrols类型和三个orbitcontrols npm包（为什么它们的名称不一样？）之后，我仍然无法让它在Typescript中工作。这最终对我有用，以防对不想使用此解决方案的其他人有所帮助：

import * as three from 'three';
three.OrbitControls = require('three-orbit-controls')(three);

let camera = new three.PerspectiveCamera(75, aspectRatio, 1, 1000);
let renderer = new three.WebGLRenderer();
let controls = new three.OrbitControls(camera, renderer.domElement);

---

截至今天，OrbitControls npm软件包似乎正在使用一种老式的导出，它需要一个老式的require语句，并在Three library中传递。

我尝试了一些建议的解决方案，但无法使其正常工作，因此经过一些实验后，我最终得出以下结论：

import * as THREE from 'three';
import OrbitControlsLibrary = require('three-orbit-controls');
var OrbitControls = OrbitControlsLibrary(THREE);
...
this.controls = new OrbitControls(this.camera);

---

我正在使用webpack捆绑，因此我不必在HTML模板中添加脚本标记。

花了几个小时解决这个问题后，我创建了一个新的包：

ts外：

var THREEa = THREE;

ts内部：

var controls = new THREEa.OrbitControls(pCamera, pContainer);

---

导入三个OrbitControls后直接从源文件导入OrbitControls对我来说非常有用（不使用

THREE OrbitControls ts

包）：

---

仅使用

three

和

@types/three

软件包，我无法从这里得到任何信息。这篇文章实际上起到了作用，而且似乎是一致的，或者有足够的细节可以操作。希望这个答案能给其他人一些启示

在我的objects中，我已经有了三个使用打字来提取三个ts文件的工作。这非常合理，将ts文件放在typings/globals/three中

以下是假设您已下载并安装node.js的步骤。这还将安装npm（节点项目管理器），您可以在命令提示符下运行它，以便执行以下所有步骤

npm install typings --global
typings install dt~three --global --save

此时，只要我在对象中“包含”ts文件，所有三种基本类型都可用：

/// <reference path="typings/globals/three/index.d.ts" />

它将ts文件放在这里：

node_modules\three-orbitcontrols-ts\dist\index.d.ts

我尝试了很多方法让它工作，但我错过了一些东西。通常错误是没有定义3.0个控件。如果我删除了这三个，那么它将生成无法工作的JavaScript

我最后考虑的是编辑类型/全局/三/索引.D.TS，并将类型/全局/ /三/ OrthPrime/Dex.D.Ts的内容剪切并粘贴到结尾的三命名空间。

---

在OrbitControls/index.d.ts的顶部，它会调出

，但这不起作用，因为在该上下文中它找不到“三”。一旦我解决了这个问题，它就编译了，但它生成了不工作的代码。

不幸的是，上面的答案都不能解决我的问题。通过创建包含以下内容的

three.js

文件，我找到了无需安装第三方软件包的解决方案：

import * as THREE from 'three';
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls');

export default THREE;

---

然后

从“/THREE”导入三个
 我在实现建议的解决方案时也遇到了一些坏运气，因为它们都没有让typescript编译器满意。无法在编译时覆盖三个.OrbitControl，因为它已设置为只读。我的解决办法如下：

使用npm安装“三个”和“三个轨道控制”。（这有点愚蠢，但却是必要的，因为'three'已经包含了examples/js/controls/OrbitControl.js文件中的orbit控件的所有代码，但没有以typescript可以理解的方式导出。如果你不想弄乱你的第三方库，只需在'three'旁边安装'three orbit Control'，其中包含一个重复的o。）f代码，但以一种良好的方式导出它

现在使用它，如下所示：

从“三”中将*作为三导入；

从“三个轨道控制”导入*作为轨道控制功能；

const OrbitControls=OrbitControlsFunction（三）；//OrbitControls现在是您的构造函数

const controls:THREE.OrbitControls=新的OrbitControls（摄影机、元素）；//从现在开始按您的方式编码

解决办法就是从这个角度出发。
只需安装并将类型定义添加到
tsconfig.json
中的“编译器选项”

“编译器选项”：{
/* ... */
baseUrl:“.”，//需要使用路径别名！
“路径”：{
“三个完整”：[“节点\模块/@types/three”]
}
}

然后输入三个类似的

import*作为“三满”中的三个；

之后一切正常，包括智能感知

如果没有，`它仍然工作，但您无法获得intellisense。
如中所述，请执行以下操作：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

重要的是，您使用的是文件夹
jsm
，而不是
js
。请记住，并非所有模块都在jsm文件夹中可用
如果您确实仍然希望从
THREE
访问
OrbitControls
，以下内容似乎对我有用：

import * as __THREE from 'three';
import * as X from 'three/examples/jsm/controls/OrbitControls.js';

type THREE = typeof __THREE & typeof X

唯一真正的区别是，如果您指定控件的类型，它看起来就像

const controls: X.OrbitControls = new THREE.OrbitControls(camera, renderer.domElement)

链接是Brokersory，这里是更新的链接：这并没有回答如何引入OrbitControls本身的问题
node_modules\three-orbitcontrols-ts\dist\index.d.ts

import * as THREE from 'three';
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls');

export default THREE;

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

import * as __THREE from 'three';
import * as X from 'three/examples/jsm/controls/OrbitControls.js';

type THREE = typeof __THREE & typeof X

const controls: X.OrbitControls = new THREE.OrbitControls(camera, renderer.domElement)