Angular2 с использованием Orbitcontrols threejs

Я пытаюсь использовать threejs exemple внутри моего приложения angular (cli) 2.

поэтому я установил threejs:

npm install three --save
добавил typings : 
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 {
//
}

С этим я могу использовать некоторые функции из трех без каких-либо проблем.

Я хотел бы использовать некоторые из exemple, доступных в node_modules/three/examples/js/ и более точно OrbitControl. В typings дай мне автозавершение в коде visual studio : vscode

но как только я попытался использовать его у меня есть следующие ошибки :

TypeError:WEBPACK_IMPORTED_MODULE_1_three.OrbitControls не конструктор

есть ли способ сделать доступными OrbitControls (и другие исключения) через некоторый импорт ? Должен ли я просто включить контроль.js в моем html ?

каков наилучший способ справиться с этим ?

7
angular angular-cli three.js

5 ответов

попробуйте использовать альтернативный пакет 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);
5

наконец-то нашел решение :

1-Установите OrbitControls через npm:

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

см. рабочий пример использования Angular + Three.js включая OrbitControls и ColladaLoader:https://github.com/makimenko/angular-three-examples

В Настоящее Время Три.примеры 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);

надеюсь, это может помочь вам начать

2

поскольку немногие из вас испытывают мою же проблему, я опубликовал это как ответ, чтобы сделать его более заметным.

решение выше работает, но вы можете получить следующую ошибку:

'не удается найти имя 'require'

Если это так, добавьте строку, предложенную Grunk:

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

перед объявлением:

var OrbitControls = require('three-orbit-controls')(THREE)
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';

Не нужно добавлять ThreeJS связанный скрипт в .угловой-cli.в JSON

1