[英]Angular.io (SystemJS) THREE is not defined ReferenceError: THREE is not defined
I started to use three.js in angular.io and have this error: 我开始在angular.io中使用three.js并出现以下错误:
(index):18 Error: (SystemJS) THREE is not defined
ReferenceError: THREE is not defined
at Object.eval (http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js:16:1)
at eval (http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js:1044:4)
at eval (http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js:1045:3)
at eval (<anonymous>)
Evaluating http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js
Evaluating http://localhost:3000/app/three-basis/three-camera-orbit-control.component.js
My imports and component: 我的导入和组件:
import {Component} from '@angular/core';
import {CameraProvider} from './camera-provider.service';
import 'threejs/controls/OrbitControls';
import {OrbitControls} from 'three';
@Component({selector: 'three-camera-orbit-control', template: ''})
export class ThreeCameraOrbitControlComponent {
constructor(private cameraProvider: CameraProvider) {
let camera = this.cameraProvider.getCamera();
let controls = new OrbitControls(camera);
controls.addEventListener('change', () => {});
}
}
If I add this var THREE = require("three");
如果我添加此
var THREE = require("three");
in OrbitControls.js in my node_modules/three, error gones and all is ok. 在我的node_modules / 3中的OrbitControls.js中,错误消失了,一切正常。 I'm not good in js yet, can please some one help me, how to do it wright way?
我现在还不太擅长js,能否请一些人帮我,怎么做呢? Thanks.
谢谢。
See working example of using Angular + Three.js including OrbitControls and ColladaLoader: https://github.com/makimenko/angular-three-examples 请参阅使用Angular + Three.js的工作示例,包括OrbitControls和ColladaLoader: https : //github.com/makimenko/angular-three-examples
Currently, Three.js examples are not included into a module and use them in Angular typescript code could be a little bit tricky. 当前,Three.js示例未包含在模块中,并且在Angular打字稿代码中使用它们可能会有些棘手。 One of solution/workaround could be:
解决方案/解决方法之一可能是:
Firstly, include dependencies: 首先,包括依赖项:
three
@types/three
Secondly, import in component: 其次,导入组件:
import * as THREE from 'three';
import "./js/EnableThreeExamples";
import "three/examples/js/controls/OrbitControls";
import "three/examples/js/loaders/ColladaLoader";
Then use it in code: 然后在代码中使用它:
this.controls = new THREE.OrbitControls(this.camera);
this.controls.rotateSpeed = 1.0;
this.controls.zoomSpeed = 1.2;
this.controls.addEventListener('change', this.render);
Hope this could help you to start 希望这可以帮助您开始
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.