在TypeScript中使用Threejs + OrbitControls

Question

在TypeScript中使用Threejs + OrbitControls

19

我无法在TypeScript中使用上述组合的这个示例。

我在我的HTML <head> 中有 <script src="lib/three.min.js"></script> 和 <script src="lib/OrbitControls.js"></script>，以及在 <body> 中有 TypeScript 文件：

/// <reference path="lib\three.d.ts" />
...
this.controls = new THREE.OrbitControls(this.camera); //there's the error
this.controls.addEventListener('change', this.render);
...

和

this.controls.update();

在被周期性调用的render()函数中。据我所知，设置与示例相同，但在编译OrbitControls构造函数行时给我一个庞大的错误（缩写）：

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

我猜这个错误涉及到整个Threejs，因为当我点击它时，Visual Studio立刻崩溃了：）感谢你的帮助。

- asdf

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Potential Guacamole · Answer 1

我也曾经尝试过一些建议的解决方案，但都没有让 TypeScript 编译器满意。因为 THREE.OrbitControls 被设置为只读，所以无法在编译时覆盖它。我的解决方案如下：

使用 npm 安装 'three' 和 'three-orbit-controls' 两个库。（这有点愚蠢，但必要，因为 'three' 已经包含了 examples/js/controls/OrbitControl.js 文件中轨道控制器的所有代码，但并没有以 TypeScript 理解的方式导出它。如果你不想搞乱你的第三方库，只需安装 'three-orbit-controls' 并与 'three' 一起使用，它包含了重复的代码，但以一种好的方式导出它。）

现在像下面这样使用：

import * as THREE from 'three';
import * as OrbitControlsFunction from 'three-orbit-controls';
const OrbitControls = OrbitControlsFunction(THREE); // OrbitControls 现在是你的构造函数
const controls: THREE.OrbitControls = new OrbitControls(camera, element); // 从这里开始按照你的代码进行。

- ice.huli · Answer 2

解决方案来自于这个问题。只需安装three-full和@types/three，并将类型定义添加到tsconfig.json中的“compilerOptions”即可。

  "compilerOptions": {
    /* ... */
    "baseUrl": ".",        // needed to use path aliases!
    "paths": {
      "three-full": ["node_modules/@types/three"]
  }
}

然后像这样导入THREE

import * as THREE from 'three-full';

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

没有 @types/three，它仍然可以工作，但是您将无法获得智能感知。

- Dejay · Answer 3

这个答案在Eclipse TypeScript中对我不起作用，因为它与之前的引用语句冲突了。但是以下方法可以解决：

declare module THREE {export var OrbitControls}

- Normal · Answer 4

外部 ts：

var THREEa = THREE;

inside ts:

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