Angular2 使用threejs Orbitcontrols答案

【问题标题】：Angular2 using threejs OrbitcontrolsAngular2 使用threejs Orbitcontrols
【发布时间】：2019-07-09 20:47:13
【问题描述】：

我正在尝试在我的 angular (cli) 2 应用程序中使用 threejs 示例。

所以我已经安装了threejs：

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。打字给了我视觉工作室代码中的自动完成功能：

但是当我尝试使用它时，我有以下错误：

TypeError: WEBPACK_IMPORTED_MODULE_1_three.OrbitControls 不是构造函数

有没有办法通过一些导入来提供可用的 OrbitControls（和其他示例）？我应该在我的 html 中简单地包含 control.js 吗？

解决这个问题的最佳方法是什么？

【问题讨论】：

IMO、Grunt（或其他）您自己的 three.min.js 文件，其中包含您需要的额外功能，例如控件、obj 文件加载或诸如此类的东西，而不是 NPM 安装。您可以在脚本标签中包含额外/帮助程序，但这是维护的噩梦。做对你的项目有意义的事情，没有文档或特定的方法可以向 three.js 添加额外的和帮助程序。

标签： angular three.js angular-cli

【解决方案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);

【讨论】：

不错的想法，但我有一堆我使用的属性，比如 saveState，这些属性似乎在这种类型上不存在。这个包需要补丁吗？
简单，易于遵循...可能是我在threejs方面遵循的最简单的事情！谢谢！

【解决方案2】：

终于找到解决办法了：

1- 通过 npm 安装 OrbitControls：

npm install three-orbit-controls --save

2- 在组件中导入三个和 OrbitControls ：

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

我可以这样做

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

【讨论】：

Grunk，你能帮帮我吗？我在 Angular-cli 环境中尝试了您的解决方案，当我运行代码时出现错误：'找不到名称'requ ire'。它快把我逼疯了。你的解决方案还适合你吗？
@Dino 是的仍在工作（更新到 Angular 4）。你可以在这里找到我的示例组件：pastebin.com/uG0fvs8n（忽略 API 服务部分）
Grunk，你是真正的明星！谢谢，您的代码帮助我改进了我的代码:) 我可以粗鲁一点，花点时间问关于三个 JS 库和角度的另一个问题吗？你知道如何导入和使用 PLYLoader.js。这是一个无类型的 js 库，所以我不能使用 npm install plyloader --save 将它导入 Angular 2。再次感谢您的帮助。迪诺
不知道抱歉。我只是对threejs有一个基本的用法
能否请您重新上传您的 pastebin。我在 Angular-cli 环境中遇到与 @Dino 相同的错误

【解决方案3】：

由于你们中很少有人遇到我同样的问题，因此我将其发布为答案以使其更加可见。

上述解决方案有效，但您可能会收到以下错误：

'找不到名字'require'

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

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

声明前：

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

【讨论】：

【解决方案4】：

查看使用 Angular + Three.js 的工作示例，包括 OrbitControls 和 ColladaLoader：https://github.com/makimenko/angular-three-examples

目前，Three.js 示例不包含在模块中，在 Angular 打字稿代码中使用它们可能有点棘手。特别是，如果您不想安装其他第三方依赖项。解决方案/解决方法之一可能是：

首先，包含依赖：

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);

希望这可以帮助您开始

【讨论】：

这在ng serve 中运行时有效，但是在运行ng build --prod 时我得到"export 'OrbitControls' (imported as 'THREE') was not found in 'three'
警告消息将可见，直到“threejs/examples/js”未转换为支持模块（请参阅threejs #9562）。只需忽略警告消息（ng build --prod 应该在 dist 文件夹中为您创建所有必要且完全工作的代码）。
据我所知，threeexamples/js/controls/OrbitControls.js` 试图将自身安装在窗口的三个属性上，这并不存在，因为你做了@ 987654330@three`.

【解决方案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相关脚本

【讨论】：