Angular2使用threejs Orbitcontrols

Question

我试图在我的angular(cli)2 app中使用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代码中自动完成:

但是一旦我尝试使用它,我有以下错误:

TypeError:WEBPACK_IMPORTED_MODULE_1_three .OrbitControls不是构造函数

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

处理这个问题的最佳方法是什么？

Answer 1

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

1.安装包

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

2.在您的文件中使用

npm install --save three-orbitcontrols-ts

Answer 2

终于找到了解决方案:

1-通过npm安装OrbitControls:

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