Angular2使用threejs Orbitcontrols

Question

我正在尝试在我的Angular（CLI）2应用中使用Three.js示例。

因此，我已安装了Three.js：

npm install three --save

然后添加了类型：

npm install @types/three --save-dev

最终，我的组件看起来像这样：

import { Component, OnInit } from '@angular/core';
import * as THREE from 'three';

@Component({
    selector: 'app-testthreejs',
    templateUrl: './testthreejs.component.html',
    styleUrls: ['./testthreejs.component.css']
})
export class TestthreejsComponent implements OnInit {
//
}

我可以毫无问题地使用一些 THREE 的功能。

我想使用 node_modules/three/examples/js/ 中可用的一些示例，更具体地说是 OrbitControl。类型定义使我在 Visual Studio Code 中获得自动完成：

但是，当我试图使用它时，出现以下错误：

TypeError：WEBPACK_IMPORTED_MODULE_1_three.OrbitControls 不是构造函数

有没有办法通过某些导入使 OrbitControls（和其他示例）可用？ 还是应该简单地在我的 HTML 中包含 control.js？

这个问题该怎么解决呢？

- grunk

---

在我的看法中，最好Grunt (或者其他)自己创建一个包含你需要的额外功能，如控件、obj 文件加载等的three.min.js文件，而不是通过NPM安装。你可以将额外的功能/助手放在脚本标签中，但这会给维护带来麻烦。为你的项目选择合适的方法，因为没有文档或特定的方式来添加 extras 和 helpers 到 three.js。 - Radio

Answer 1

新方法

只需从示例模块导入OrbitControls即可。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

尝试使用替代包 https://www.npmjs.com/package/three-orbitcontrols-ts

1. 安装包

npm install --save three-orbitcontrols-ts

2. 使用在您的文件中

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

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

- ulmer-morozov

---

好主意，但我有一堆属性，比如 saveState，在这种类型上似乎不存在。这个包需要打补丁吗？ - Vincent Buscarello

简单易懂...这可能是我在使用threejs时遵循的最简单的教程！谢谢！ - K-Dawg

Answer 2

最终找到了解决方案：

1- 通过npm安装OrbitControls：

npm install three-orbit-controls --save

2- 在组件中导入THREE和OrbitControls：

import * as THREE from 'three';
var OrbitControls = require('three-orbit-controls')(THREE)

我可以执行以下操作

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

- grunk

---

Grunk，你能帮我一下吗？我在Angular-cli环境中尝试了你的解决方案，但当我运行代码时出现错误：“找不到名称'require'”。这让我很疯狂。你的解决方案仍然有效吗？ - Dino

@Dino 是的，仍在工作（已更新到Angular 4）。您可以在此处找到我的示例组件：https://pastebin.com/uG0fvs8n（只需忽略API服务部分即可）。 - grunk

Grunk，你真是个明星！谢谢你，你的代码帮助我改进了我的代码 :) 我可以不客气地再问你一个关于Three JS库和Angular的问题吗？你知道如何导入和使用PLYLoader.js吗？它是一个未经类型定义的js库，所以我不能使用“npm install plyloader --save”将其导入到Angular 2中。再次感谢你的帮助。Dino - Dino

抱歉，我不会翻译。我只了解 Three.js 的基本使用。 - grunk

请问您能否重新上传您的pastebin。我在Angular-cli环境中遇到了与@Dino相同的错误。 - Jason

嗨，Jason，刚看到你的问题。为了解决这个问题，我使用了以下代码行：`declare const require: (moduleId: string) => any;`在这一行之前：`const OrbitControls = require('three-orbit-controls')(THREE);`正如Grunk建议的那样，希望能有所帮助。 - Dino

Answer 3

请查看使用Angular + Three.js的工作示例，包括OrbitControls和ColladaLoader：https://github.com/makimenko/angular-three-examples 目前，Three.js示例未包含在模块中，因此在Angular TypeScript代码中使用它们可能会有些棘手。特别是如果您不想安装额外的第三方依赖项。其中一个解决方案/解决方法可能是：

首先，包含依赖项：

three
@types/three

其次，将组件导入：

import * as THREE from 'three';
import "./js/EnableThreeExamples";
import "three/examples/js/controls/OrbitControls";
import "three/examples/js/loaders/ColladaLoader";

然后在代码中使用它：

this.controls = new THREE.OrbitControls(this.camera);
this.controls.rotateSpeed = 1.0;
this.controls.zoomSpeed = 1.2;
this.controls.addEventListener('change', this.render);

希望这能帮助你开始

- Mihails Akimenko

---

这在运行 ng serve 时是有效的，但是当运行 ng build --prod 时，我会得到 "export 'OrbitControls' (imported as 'THREE') was not found in 'three' 的错误提示。 - ArunDhaJ

警告信息将一直显示，直到“threejs/examples/js”被转换为支持模块（请参见threejs #9562）。 只需忽略警告信息（ng build --prod应在dist文件夹中为您创建所有必要且完全可用的代码）。 - Mihails Akimenko

据我所知，threeexamples/js/controls/OrbitControls.js试图安装在窗口的THREE属性上，但由于您只是使用了import * as THREE from three，该属性并不存在。 - user9315861

Answer 4

因为有些人和我一样遇到了这个问题，所以我把解决方案发布为答案以使其更加显眼。

上面提供的解决方案有效，但您可能会遇到以下错误：

'Cannot find name 'require'

如果出现这种情况，请添加Grunk建议的行：

declare const require: (moduleId: string) => any;

声明之前：

var OrbitControls = require('three-orbit-controls')(THREE)

- Dino

Answer 5

一种名为“猴子补丁”的方法也可以解决这个问题：

// this should be added in the main file of the application
import * as THREE from 'three';
window['THREE'] = THREE;
import 'three/examples/js/controls/OrbitControls';

不需要在.angular-cli.json文件中添加任何ThreeJS相关的脚本。

- OXMO456