在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

回答

相關問題