Angular2使用threejs Orbitcontrols

时间:2016-11-10 15:00:57

标签: angular three.js angular-cli

我正在尝试在我的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 {
//
}

有了这个,我可以使用三个功能,没有任何问题。

我想使用node_modules / three / examples / js /中的一些例子,更准确地说是OrbitControl。这些打字给我在visual studio代码中自动完成: vscode

但是一旦我尝试使用它,我就会出现以下错误:

  

TypeError: WEBPACK_IMPORTED_MODULE_1_three .OrbitControls不是   构造

有没有办法通过一些导入提供OrbitControls(和其他例子)? 我应该在我的html中包含control.js吗?

处理此问题的最佳方法是什么?

5 个答案:

答案 0 :(得分:8)

尝试使用替代包 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);

答案 1 :(得分:6)

终于找到了解决方案:

1-通过npm安装OrbitControl:

npm install three-orbit-controls --save

2-在组件中导入THREE和OrbitControl:

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

我可以做

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

答案 2 :(得分:2)

你们中很少有人遇到我同样的问题,我把它作为一个答案,让它更加明显。

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

  

'找不到名字'要求'

如果是这种情况,请添加Grunk建议的行:

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

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

答案 3 :(得分:2)

请参阅使用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);

希望这可以帮助你开始

答案 4 :(得分:1)

猴子补丁也可以解决这个问题:

// 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 相关脚本