Angular -CLI & ThreeJS

Question

I am trying to add the correct npm dependencies to add THREE to my Angular -CLI project. With the change in the CLI so quickly in the last few months, I could not find a working source.

Here are some ideas ...

• Piggyback with scripts

  This was my first attempt: just adding <script src="three.js"></script>index.html to the file. However, I am unable to work with javascript in the typescript interface.

• Webpack

  This was my second attempt, but I ran into several documentation problems. Angular-cli does not seem to have a consistent way of using web packages. There are four different ways to implement web packages. I could not work with THREE.

• Ligaments

  It looks like hacked and bad / long. It would add packages to the THREE library so that it can be interpreted as angular 2.

I am still working on the Angluar-CLI + THREE.js project. If I do not see progress next week, I can abandon Angular-cli. Any advice / sources would be greatly appreciated.

Answer 1

Like angular-cli 1.0.0:

• npm install three --save
• npm install @types/three
• Add div element in AppComponent.html: <div #rendererContainer></div>
• Import the three.js file into AppComponent.ts: import * as THREE from 'three';
• Get the handle of a div element using @ViewChild('rendererContainer') rendererContainer: ElementRef;
• Make the necessary adjustments in your constructors / life cycles. Note: ViewChildnot available until ngAfterViewInit.

Full 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);
    }
}

Full AppComponent.html:

<div #rendererContainer></div>

:

, , . , THREE window . - 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 - . , hinting three.js, , declare const THREE: any , three.js. @types/three, !

:

, , window , raycasting ( , , ), . , :

@HostListener('window:resize', ['$event'])
onWindowResize(event) {
    this.renderer.setSize(event.target.innerWidth, event.target.innerHeight)
}