Angular2 使用 threejs Orbitcontrols

Question

我正在尝试在我的 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 代码中自动完成:

但是当我尝试使用它时，我遇到了以下错误:

TypeError: WEBPACK_IMPORTED_MODULE_1_three.OrbitControls is not a constructor

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

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

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