threejs与java_Angular-CLI和ThreeJS

截至angular-cli 1.0.0 ：

npm install three --save

npm install @types/three

在AppComponent.html中添加div元素：

在AppComponent.ts中导入three.js： import * as THREE from 'three';

使用 @ViewChild('rendererContainer') rendererContainer: ElementRef; 获取div元素的句柄

在构造函数/生命周期方法中进行必要的设置 . 注意： ViewChild 在 ngAfterViewInit 之前不可用 .

完整AppComponent：

import {Component, ViewChild, ElementRef} from '@angular/core';

import * as THREE from 'three';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

@ViewChild('rendererContainer') rendererContainer: ElementRef;

renderer = new THREE.WebGLRenderer();

scene = null;

camera = null;

mesh = null;

constructor() {

this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

this.camera.position.z = 1000;

const geometry = new THREE.BoxGeometry(200, 200, 200);

const material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

this.mesh = new THREE.Mesh(geometry, material);

this.scene.add(this.mesh);

}

ngAfterViewInit() {

this.renderer.setSize(window.innerWidth, window.innerHeight);

this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);

this.animate();

}

animate() {

window.requestAnimationFrame(() => this.animate());

this.mesh.rotation.x += 0.01;

this.mesh.rotation.y += 0.02;

this.renderer.render(this.scene, this.camera);

}

}

完整的AppComponent.html：

If you want to use some of the additional scripts:

您可能最终想要使用一些其他脚本，例如加载器和控件 . 其中大部分都没有作为模块编写，而是在加载时在 window 上为 THREE 命名空间添加功能 . 因此我最终告诉angular-cli只是通过将以下内容添加到我的 .angular-cli.json 文件来手动加载我的脚本：

{

"apps": [

{

"scripts": [

"../node_modules/tween.js/src/Tween.js",

"../node_modules/three/build/three.js",

"../node_modules/stats.js/build/stats.min.js",

"../vendor/VRMLLoader.js",

"../vendor/OrbitControls.js"

],

...

请注意，您还需要处理这样的事实：您的three.js @types文件没有为这些附加脚本定义任何类型 . 理想情况下，我想扩展现有的类型定义，但暂时我只是通过将 declare const THREE: any 添加到使用three.js的文件顶部来解决错误的类型提示 . 如果您找到一种方法来扩展 @types/three 中的现有定义，请报告回来！

To handle resizing the window:

虽然我在这里，但我还会提到调整 window 的大小会导致像raycasting(我用来决定是否点击一个对象)这样的东西不再正常工作 . 要解决这个问题，只需：

@HostListener('window:resize', ['$event'])

onWindowResize(event) {

this.renderer.setSize(event.target.innerWidth, event.target.innerHeight)

}