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 :
но как только я попытался использовать его у меня есть следующие ошибки :
TypeError:WEBPACK_IMPORTED_MODULE_1_three.OrbitControls не конструктор
есть ли способ сделать доступными OrbitControls (и другие исключения) через некоторый импорт ? Должен ли я просто включить контроль.js в моем html ?
каков наилучший способ справиться с этим ?
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);
наконец-то нашел решение :
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);
см. рабочий пример использования 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);
надеюсь, это может помочь вам начать
поскольку немногие из вас испытывают мою же проблему, я опубликовал это как ответ, чтобы сделать его более заметным.
решение выше работает, но вы можете получить следующую ошибку:
'не удается найти имя 'require'
Если это так, добавьте строку, предложенную Grunk:
declare const require: (moduleId: string) => any;
перед объявлением:
var OrbitControls = require('three-orbit-controls')(THREE)
патч обезьяны также может решить эту проблему:
// 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