Angular2 przy użyciu trojaka Orbitcontrols

Question

Próbuję użyć przykładu 3js wewnątrz mojej aplikacji kątowej (cli) 2.

więc mam zainstalowane threejs:

npm install three --save 

następnie dodawane typowania:

npm install @types/three --save-dev 

Wreszcie mój komponent wygląda następująco:

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 { 
// 
} 

Z tego mogę korzystać z niektórych funkcji z TRZY bez problemu.

Chciałbym skorzystać z niektórych przykładów dostępnych w module node_modules/three/examples/js /, a dokładniej OrbitControl. Do typowania dać mi autouzupełnianie w Visual kodu Studio:

ale jak tylko próbowałem go używać Mam następujący błąd:

TypeError: WEBPACK_IMPORTED_MODULE_1_three.OrbitControls is not a constructor

Czy istnieje jakiś sposób, aby udostępnić OrbitControls (i inne przykłady) poprzez jakiś import? Czy powinienem po prostu dołączyć control.js do mojego html?

Jaki jest najlepszy sposób, aby sobie z tym poradzić?

Answer 1

koniec znalazł rozwiązanie:

1- Instalacja OrbitControls poprzez NPM:

npm install three-orbit-controls --save 

2- importu trzy i OrbitControls w składniku:

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

można następnie wykonać

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

Answer 2

Spróbuj pakiet zastosowanie alternatywa https://www.npmjs.com/package/three-orbitcontrols-ts

1. Zainstaluj pakiet

npm install --save three-orbitcontrols-ts 

2. Zastosowanie w pliku

import * as THREE from 'three'; 
import { OrbitControls } from 'three-orbitcontrols-ts'; 

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

Answer 3

jak niewielu z was doświadcza mój sam problem mam opublikował to jako odpowiedź, aby było bardziej widoczne.

Rozwiązanie wyżej prac, ale może pojawić się następujący błąd:

'Cannot find name 'require'

Jeśli jest to przypadek dodać linię zaproponowaną przez Grunk:

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

przed deklaracją:

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

Answer 4

Zobacz przykład użycia Angular + Three.js w tym OrbitControls i ColladaLoader: https://github.com/makimenko/angular-three-examples

Obecnie przykłady Three.js nie są uwzględniane w module i używanie ich w kodzie Angara może być nieco trudne. Szczególnie, jeśli nie chcesz instalować dodatkowych zależności od stron trzecich. Jednym z roztworu/obejście może być:

pierwsze obejmują zależności:

three 
@types/three 

drugie importu w składniku:

import * as THREE from 'three'; 
import "./js/EnableThreeExamples"; 
import "three/examples/js/controls/OrbitControls"; 
import "three/examples/js/loaders/ColladaLoader"; 

następnie wykorzystać w kodzie:

this.controls = new THREE.OrbitControls(this.camera); 
this.controls.rotateSpeed = 1.0; 
this.controls.zoomSpeed = 1.2; 
this.controls.addEventListener('change', this.render); 

Mam nadzieję, że to pomoże Ci rozpocząć