在 TypeScript 中使用 Threejs + OrbitContols
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19444592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Threejs + OrbitContols in TypeScript
提问by asdf
I'm not able to get thisexample of using the aforementioned combo going in TypeScript.
我不能让这种使用上述组合中的打字稿去的例子。
I have <script src="lib/three.min.js"></script>and <script src="lib/OrbitControls.js"></script>in my html <head>and the typescript file in <body>:
我在我的 html和 typescript 文件中有<script src="lib/three.min.js"></script>和：<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);
...
and
和
this.controls.update();
in periodically called render()function. For all I know, the setup is identical to the expample, but gives me a huge error (abbreviated) on compilation of the OrbitControls constructor line:
在定期调用的render()函数中。据我所知，设置与示例相同，但在编译 OrbitControls 构造函数行时给了我一个巨大的错误（缩写）：
The property 'OrbitControls' does not exist on value of type '{REVISION:string;
CullFace: {[x: number ...
I guess there's whole Threejs in that error, since Visual Studio crashes the moment I click on it :). Thanks for your help.
我想那个错误中有整个 Threejs，因为 Visual Studio 在我点击它的那一刻崩溃了 :)。谢谢你的帮助。
采纳答案by asdf
Feeling kind of silly since the solution (or workaround at least) turns out to be quite simple...
感觉有点傻，因为解决方案（或至少解决方法）结果很简单......
Just declare the OrbitControlsvariable:
只需声明OrbitControls变量：
declare var THREE.OrbitControls: any; // even "declare var THREE.OrbitControls;" will do the trick
There are still some compilation errors but it works.
仍然有一些编译错误，但它有效。
回答by nicolaspanel
After few hours spend on this problem, I ended up creating a new package: three-orbitcontrols-ts
在这个问题上花了几个小时后，我最终创建了一个新包：three-orbitcontrols-ts
import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';
const controls = new OrbitControls(camera, renderer.domElement);
回答by kenny
As described in the docsdo the following:
如文档中所述，请执行以下操作：
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
Important is that you use the folder jsminstead of js. And keep in mind that not all modules are available in the jsm folder yet
重要的是您使用文件夹jsm而不是js. 请记住，并非所有模块都在 jsm 文件夹中可用
回答by sporsh
Importing the OrbitControls directly from the source file after importing THREE worked great for me (without using the three-orbitcontrols-tspackage):
在导入三个之后直接从源文件导入 OrbitControls 对我来说非常有用（不使用three-orbitcontrols-ts包）：
import * as THREE from 'three';
import 'three/examples/js/controls/OrbitControls';
Using only the threeand @types/threepackages
仅使用three和@types/three包
回答by BenR
While previous answers may work out to some degree, you should go with the ready made definition files from DefinitelyTyped. They also define OrbitControl's properties and methods.
虽然以前的答案在某种程度上可能会奏效，但您应该使用来自 absoluteTyped的现成定义文件。它们还定义了OrbitControl的属性和方法。
回答by mtx
Unfortunately none of above answers solved problem for me. I have found solution without installing third party packages by creating three.jsfile with below content:
不幸的是，以上答案都没有为我解决问题。我通过创建three.js具有以下内容的文件找到了无需安装第三方软件包的解决方案：
import * as THREE from 'three';
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls');
export default THREE;
and then import THREE from './three';
然后import THREE from './three';
回答by Aaron Boteler
I tried some of the suggested solutions and could not get it to work right so after some experimentation, I ended up with:
我尝试了一些建议的解决方案，但无法正常工作，因此经过一些实验，我得到了：
import * as THREE from 'three';
import OrbitControlsLibrary = require('three-orbit-controls');
var OrbitControls = OrbitControlsLibrary(THREE);
...
this.controls = new OrbitControls(this.camera);
I am using webpack bundling and with this I did not have to add the script tag in the HTML template.
我正在使用 webpack 捆绑，因此我不必在 HTML 模板中添加脚本标记。
回答by Dejay
The answer didn't work for me in eclipse typescript, since it conflicted with the reference statement earlier. But the following works:
答案在 eclipse 打字稿中对我不起作用，因为它与之前的参考声明相冲突。但以下工作：
declare module THREE {export var OrbitControls}
回答by Dave
After adding the three-orbitcontrols typings and three-orbit-controls npm package (why aren't these named the same?), I was still having issues getting it to work in Typescript. This ended up working for me in case it's helpful for anyone else who doesn't want to use the workaround:
在添加了三轨道控件类型和三轨道控件 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);
As of today, it seems that the OrbitControls npm package is using an old style of exports that requires an old-style require statement that passes in the Three library.
截至今天，OrbitControls npm 包似乎正在使用旧样式的导出，该样式需要在 Three 库中传递的旧样式 require 语句。
回答by Ken Cowsiwin
I was not able to get anything from here this post actually worked and seemed consistent or had enough detail to be actionable. Hopefully, this answer might provide some insight to others.
我无法从这里得到任何东西，这篇文章实际上有效并且看起来一致或有足够的细节可以操作。希望这个答案可以为其他人提供一些见解。
In my objects I already had three working by using typings to extract the THREE ts file. This was very reasonable and put the ts file in typings/globals/three.
在我的对象中，我已经通过使用类型提取三个 ts 文件进行了三个工作。这是非常合理的，并将 ts 文件放在typings/globals/three.js 中。
Here are the steps assuming that you have downloaded and installed node.js. This also installs npm (Node Project Manager) which you can run from a command prompt to so all the steps below.
以下是假设您已下载并安装 node.js 的步骤。这还会安装 npm（节点项目管理器），您可以从命令提示符运行它以执行以下所有步骤。
npm install typings --global
typings install dt~three --global --save
At this point all the basic THREE types are available once I "include" the ts file in my object:
此时，一旦我在对象中“包含”了 ts 文件，所有基本的三种类型都可用：
/// <reference path="typings/globals/three/index.d.ts" />
At this point OrbitControls is not defined because the basic three package does not include it. However, there is ts data in the typings database. So I installed it as well:
此时OrbitControls没有定义，因为基本的三包不包含它。但是，typings 数据库中有 ts 数据。所以我也安装了它：
typings install --globals three-orbitcontrols --save
It puts the ts file here:
它把 ts 文件放在这里：
node_modules\three-orbitcontrols-ts\dist\index.d.ts
I tried a number of things to get it to work but I am missing something. Generally the error was that THREE.OrbitControls was not defined. If I removed the THREE then it generated non-working JavaScript.
我尝试了很多方法来让它工作，但我错过了一些东西。通常错误是没有定义 THREE.OrbitControls 。如果我删除了三个，那么它会生成无法正常工作的 JavaScript。
What I finally did which I consider a workaround is edit typings/globals/three/index.d.ts and cut and pasted the contents of typings/globals/three/OrbitControls/index.d.ts into the THREE namespace at the end.
我最终做的我认为是一种解决方法是编辑typings/globals/three/index.d.ts 并将typings/globals/three/OrbitControls/index.d.ts 的内容剪切并粘贴到最后的THREE 命名空间中。
At the top of the OrbitControls/index.d.ts it calls out <reference types="three" />which doesn't work because in that context it cannot find "three". Once I worked around that it compiled but it generated non-working code.
在 OrbitControls/index.d.ts 的顶部，它指出<reference types="three" />哪个不起作用，因为在这种情况下它找不到“三个”。一旦我解决了它编译但它生成了非工作代码。
