在TypeScript中使用Threejs + OrbitContols

我无法得到this在TypeScript中使用上述组合的示例。在TypeScript中使用Threejs + OrbitContols

我有<script src="lib/three.min.js"></script>和<script src="lib/OrbitControls.js"></script>在我的HTML <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()功能。据我所知，该设置是相同的expample，但给了我一个巨大的错误（略）在OrbitControls构造线的编译：

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

我想有全Threejs中的错误，因为Visual Studio的崩溃当我点击它:)。谢谢你的帮助。

来源

2013-10-18 asdf

情种愚蠢，因为解决方案（或解决方法至少）原来是很简单...

刚刚宣布OrbitControls变量：

还有一些编译错误，但有用。

来源

2013-10-21 09:22:55 asdf

答案在eclipse typescript中不适用于我，因为它与前面的参考声明相冲突。但以下工作：

declare module THREE {export var OrbitControls}

来源

2014-02-11 05:16:19 Dejay

虽然以前的答案可以锻炼到一定程度，你应该做definition files from DefinitelyTyped准备去。他们还定义了OrbitControl的属性和方法。

来源

2014-12-02 04:48:10 BenR

链接中断 – smartmeta

对不起，这里是更新后的链接：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/three/three-orbitcontrols.d.ts – BenR

@BenR更新后的链接再次被破坏:( –

在添加三轨道控件类型和三轨道控件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包是用出口的旧风格，需要三库中传递的旧式需求陈述。

来源

2016-07-13 22:02:29 Dave

我尝试了一些建议的解决方案，并不能得到它后，一些实验对好工作，我结束了：

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

我使用的WebPack捆绑，并用这个我没有加HTML模板中的脚本标记。

来源

2016-12-22 21:29:07

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

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

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

来源

2017-01-07 10:34:07 nicolaspanel

你是一个非常好的灵魂！感谢队友！ – messerbill

外TS：

var THREEa = THREE;

内TS：

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

来源

2017-01-08 14:00:29 Tlatis

导入OrbitControls直接从源文件导入THREE后对我很好（不使用three-orbitcontrols-ts包）：

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

只使用three和@types/three包

来源

2017-02-23 19:04:59 sporsh

看起来像这个帖子，这应该被标记为正确的答案，而不是。 –

我无法从这里得到什么这个职位实际工作，似乎是一致或有足够的细节是可行的。希望这个答案能够为其他人提供一些见解。

在我的对象中，我已经有三个工作，通过使用类型来提取THREE 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没有定义的，因为三个基本包不包括它。但是，类型数据库中有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" />，这不起作用，因为在那种情况下它找不到“三”。一旦我解决了它的编译问题，它就会生成非工作代码。

来源

2017-05-17 19:00:27

在TypeScript中使用Threejs + OrbitContols

回答

相关问题