Question

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

我的html <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);
...

和

this.controls.update();

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

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

我猜这个错误中有整个Threejs，因为Visual Studio在我点击它时崩溃了:)。谢谢你的帮助。

Answer 1

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

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

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

Answer 2

虽然之前的答案可能会有所帮助，但您应该使用现成的definition files from DefinitelyTyped。他们还定义了OrbitControl的属性和方法。

Answer 3

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

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

export default THREE;

然后是import THREE from './three';

Answer 4

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

只需声明OrbitControls变量：

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

仍然存在一些编译错误，但它确实有效。

Answer 5

我尝试了一些建议的解决方案，无法让它正常工作，所以经过一些实验，我最终得到了：

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

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

Answer 6

按照docs中的说明进行以下操作：

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

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

Answer 7

答案在eclipse打字稿中对我不起作用，因为它与前面的参考语句冲突。但是以下工作：

declare module THREE {export var OrbitControls}

Answer 8

在添加三轨道控制类型和三轨道控制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语句。

Answer 9

外面的ts：

2 + 3
  + 6
  + 7

里面的ts：

var THREEa = THREE;

Answer 10

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

在我的对象中，我已经有三个人使用打字来提取三个ts文件。这非常合理，并将ts文件放在typings / globals / three中。

以下是假设您已下载并安装了node.js.的步骤。这也安装了npm（节点项目管理器），您可以从命令提示符运行，以便执行以下所有步骤。

npm install typings --global
typings install dt~three --global --save

此时，所有基本的三种类型都可以使用，包括＆＃34;我对象中的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。如果我删除了THREE，则会生成不可用的JavaScript。

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

在OrbitControls / index.d.ts的顶部，它调出了<reference types="three" />，它不起作用，因为在那种情况下它无法找到＆＃34;三个＆＃34;。一旦我解决了它编译但它生成了非工作代码。

Answer 11

我在实施建议的解决方案时也遇到了不幸，因为它们都不会使打字稿编译器感到满意。编译时无法覆盖THREE.OrbitControls，因为它被设置为只读。我的解决方法如下：

在npm上同时安装“三个”和“三个轨道控件”。（这有点愚蠢，但很有必要，因为“三个”已经包含了examples / js / controls / OrbitControl.js文件中所有用于轨道控件的代码，但不会以打字稿能够理解的方式导出它。要弄乱您的第3方库，只需在“ 3”旁边安装“ 3-orbit-controls”，它包含重复的代码，但可以很好地导出。

现在按如下所示使用它：

从“三个”中导入*作为三个；
  从“三个轨道控制”中导入*作为OrbitControlsFunction；
    const OrbitControls = OrbitControlsFunction（THREE）; // OrbitControls现在是您的构造函数
  const控件：THREE.OrbitControls = new OrbitControls（camera，element）; //就像从现在开始一样编写代码。

Answer 12

解决方案来自此issue。只需安装three-full和@types/three并将类型定义添加到tsconfig.json中的“ compilerOptions”。

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

然后导入三个

import * as THREE from 'three-full';

之后，包括智能感知在内的所有东西都可以正常工作。

在没有@types/three的情况下，它仍然有效，但是您不会获得智能感知。

Answer 13

如果您仍然希望从 C:\Users\Administrator\.azure\ 访问 Clear-AzContext，以下似乎对我有用：

OrbitControls

唯一真正的区别是现在如果你指定控件的类型，它看起来像

THREE

在TypeScript中使用三个Js + OrbitControls

13 个答案: