角度CLI& ThreeJS [英] Angular-CLI & ThreeJS

问题描述

我一直在尝试添加适当的npm依赖项，以将三个添加到我的Angular-CLI项目中.在过去的几个月中，由于CLI的变化如此之快，所以我一直找不到有效的来源.

I have been trying to add the proper npm dependencies to add THREE to my Angular-CLI project. With CLI changing so rapidly in the past few months, I haven't been able to find working source.

• 带有脚本的肩扛

  这是我的第一次尝试，只是将<script src="three.js"></script>添加到index.html文件.但是我在打字稿界面中使用javascript时遇到了麻烦.

• Piggyback with scripts

  This was my first attempt, to simply add <script src="three.js"></script> to the index.html file. However I'm having trouble working with the javascript in the typescript interface.

这是我的第二次尝试，但是遇到了一些文档问题. Angular-cli似乎没有使用webpack的一致方法.有四种不同的实现Webpack的方式.我无法使用3种工具.

This was my second attempt, but I ran into several documentation problems. Angular-cli doesn't seem to have a consistent way of using webpacks. There are four different ways of implementing webpacks. I wasn't able to get any working with THREE.

这似乎是一种骇客，而且是一个可怜/冗长的骇客.可以将捆绑软件添加到三个库中，以便可以将其解释为有角度的2.

This seems like a hack, and a poor/lengthy one. It would be to add bundles to the THREE library so that it can be interpreted angular 2.

我目前仍在制作Angluar-CLI + THREE.js项目.如果下周看不到进展，我可能会放弃angular-cli.任何建议/来源将不胜感激.

I'm still currently working on making a Angluar-CLI + THREE.js project. If I don't see progress in the next week, I may drop angular-cli. Any advice/sources would be greatly appreciated.

推荐答案

从angular-cli 1.0.0开始:

As of angular-cli 1.0.0:

1. npm install three --save
2. npm install @types/three
3. 在AppComponent.html中添加div元素:<div #rendererContainer></div>
4. 将three.js导入AppComponent.ts中:import * as THREE from 'three';
5. 使用@ViewChild('rendererContainer') rendererContainer: ElementRef;
获取div元素的句柄
6. 在构造函数/生命周期方法中进行必要的设置.注意:ViewChild在ngAfterViewInit之前不可用.

1. npm install three --save
2. npm install @types/three
3. Add a div element in AppComponent.html: <div #rendererContainer></div>
4. Import three.js in AppComponent.ts: import * as THREE from 'three';
5. Get a handle to your div element with @ViewChild('rendererContainer') rendererContainer: ElementRef;
6. Do the necessary setup in your constructor / lifecycle methods. Note: the ViewChild is not available until ngAfterViewInit.

完整的AppComponent:

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

完整的AppComponent.html:

Full AppComponent.html:

<div #rendererContainer></div>

如果要使用其他一些脚本:

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

You may end up wanting to use some of the additional scripts, such as loaders and controls. Most of these haven't been written as modules, but instead add functionality to the THREE namespace on the window when loaded. Because of this I ended up telling the angular-cli to just load up my scripts manually by adding the following to my .angular-cli.json file:

{
  "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文件没有为这些其他脚本定义任何类型的事实.理想情况下，我想扩展现有的类型定义，但就目前而言，我只是在前面对Three.js进行类型提示，方法是在使用Three.js的文件顶部添加declare const THREE: any来避免错误.如果您发现从@types/three扩展现有定义的好方法，请返回报告！

Note that you will also need to deal with the fact that your three.js @types file does not define any types for these additional scripts. Ideally I would like to extend the existing type definitions, but for the time being I am just foregoing type hinting for three.js to get around the errors by adding declare const THREE: any to the top of my files that use three.js. If you find a good way to instead extend the existing definitions from @types/three, please report back!

要调整窗口大小:

尽管我会对此加以说明，但我还会提到调整window的大小可能会导致类似光线投射(我用来确定是否单击对象)无法正常工作.要解决此问题，请执行以下操作:

While I am at it I will also mention that resizing your window can cause things like raycasting (which I use to decide if an object is clicked) to not work correctly anymore. To fix this just do:

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

这篇关于角度CLI& ThreeJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！