javascript - 在 TypeScript 中使用 Threejs + OrbitContols

Question

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

我在我的 html<script src="lib/three.min.js"></script>和typescript 文件中有：<script src="lib/OrbitControls.js"></script><head><body>

/// <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 在我点击它的那一刻就崩溃了:)。谢谢你的帮助。

score 20 · Accepted Answer

在这个问题上花费了几个小时后，我最终创建了一个新包：three-orbitcontrols-ts

import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';

const controls = new OrbitControls(camera, renderer.domElement);

score 17 · Accepted Answer

如文档中所述，请执行以下操作：

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

重要的是您使用文件夹jsm而不是js. 请记住，并非所有模块都在 jsm 文件夹中可用

score 8 · Accepted Answer

导入三个后直接从源文件导入 OrbitControls 对我来说效果很好（不使用three-orbitcontrols-ts包）：

import * as THREE from 'three';
import 'three/examples/js/controls/OrbitControls';

仅使用threeand@types/three包

score 4 · Accepted Answer

不幸的是，以上答案都没有为我解决问题。three.js通过创建具有以下内容的文件，我找到了无需安装第三方软件包的解决方案：

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

export default THREE;

然后import THREE from './three';

score 3 · Accepted Answer

虽然以前的答案可能在一定程度上可行，但您应该使用来自 DeveloplyTyped 的现成定义文件。他们还定义OrbitControl了的属性和方法。

score 1 · Accepted Answer

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

只需声明OrbitControls变量：

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

如果您实际上仍想OrbitControls从访问THREE，以下似乎对我有用：

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)

score 0 · Accepted Answer

答案在 Eclipse 打字稿中对我不起作用，因为它与之前的参考声明冲突。但以下工作：

declare module THREE {export var OrbitControls}

score 0 · Accepted Answer

在添加了三轨道控制类型和三轨道控制 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 包似乎正在使用旧样式的导出，它需要在 Three 库中传递的旧样式 require 语句。

score 0 · Accepted Answer

外部 ts：

var THREEa = THREE;

ts内部：

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

score 0 · Accepted Answer

我无法从这里得到任何东西，这篇文章实际上有效并且看起来一致或有足够的细节可以操作。希望这个答案可以为其他人提供一些见解。

在我的对象中，我已经通过使用类型提取三个 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" />

此时没有定义OrbitControls，因为基本的三包不包括它。但是，typings 数据库中有 ts 数据。所以我也安装了它：

typings install --globals three-orbitcontrols --save

它将 ts 文件放在这里：

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

我尝试了很多方法来让它工作，但我错过了一些东西。通常错误是未定义 THREE.OrbitControls。如果我删除了三个，那么它会生成不工作的 JavaScript。

我最终所做的我认为一种解决方法是编辑 typings/globals/three/index.d.ts 并将 typings/globals/three/OrbitControls/index.d.ts 的内容剪切并粘贴到最后的 THREE 命名空间中。

在 OrbitControls/index.d.ts 的顶部，它会指出<reference types="three" />哪个不起作用，因为在这种情况下它找不到“三”。一旦我解决了它编译但它生成了非工作代码。

score 0 · Accepted Answer

我在实施建议的解决方案时也遇到了一些不幸，因为它们都没有让 typescript 编译器满意。无法在编译时覆盖 THREE.OrbitControls，因为它被设置为只读。我的解决方案如下：

使用 npm 安装“三个”和“三个轨道控制”。（这有点愚蠢但很有必要，因为 'three' 已经包含了 examples/js/controls/OrbitControl.js 文件中轨道控制的所有代码，但不会以打字稿理解的方式导出它。如果你不想要弄乱您的 3rd 方库，只需在“三个”旁边安装“三轨道控制”，其中包含代码的副本，但以一种很好的方式导出它。

现在像下面这样使用它：

从'三'导入*作为三；
从“三轨道控制”导入 * 作为 OrbitControlsFunction；
常量 OrbitControls = OrbitControlsFunction（三）；// OrbitControls 现在是你的构造
函数 const 控件： THREE.OrbitControls = new OrbitControls(camera, element); // 从这里开始编写代码。

score 0 · Accepted Answer

解决方案来自这个问题。只需安装three-full和@types/three并将类型定义添加到tsconfig.json.

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

然后像导入三个

import * as THREE from 'three-full';

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

没有@types/three，` 它仍然有效，但你不会得到智能感知。

javascript - 在 TypeScript 中使用 Threejs + OrbitContols

14 回答 14

Related

Reference