angular8+threejs 入坑

项目情况：仿优诺的机房3d可视化管理系统
我的demo效果：传送门

项目技术：angular8(架构)、threejs(3d场景操作)、tween js(交互)

建模工具：blender(我用这个2.8)、3dsMax、maya

我用的模型格式：GLTF

用到的两个threejs库：three、three-full 、@tweenjs/tween.js（注意名字，tweenjs后面再说）

其实当有模型提供的前提下做3d场景并不是一个很难的事情，有了模型之后就是如何用threejs调用api来操作而已，所以不用太恐惧，模型网上有好多。

下面直接上代码吧

1、新建ng项目（不多说了）；

2、安装库

npm i three //  用来调用threejs的docs的api
npm i three-full    //  用来调用threejs的examples的api
npm i @tweenjs/tween.js //  用来交互

注意：examples里面的api就等于别人封装好的组件然后官方拿来展示，所以这些api都不会存在three里面的，因此有人把他们集成到three-full这个库里面进行调用。

以下是我的使用例子 base.ts

import {
   Scene,
   AmbientLight,
   PointLight,
   WebGLRenderer,
   PerspectiveCamera,
   GridHelper,
   Color
} from 'three';
import {
   OrbitControls,
} from 'three-full';
import * as Stats from 'stats.js';
import * as TWEEN from '@tweenjs/tween.js';
import {
 FXAAShader, UnrealBloomPass, ShaderPass, FilmPass, OutlinePass, GeometryUtils, CopyShader, ColorifyShader, SepiaShader,
 OrbitControls, GLTFLoader, EffectComposer, RenderPass, SMAAShader, SMAAPass, ClearMaskPass, MaskPass,
} from 'three-full';

// three-full和tween以下代码没调用，先展示下调用方式


//  渲染器
export const RENDERER = new WebGLRenderer(); //  渲染器(去据此){ antialias: true }
export function initRenderer(doc) {
   RENDERER.setSize(
       doc.clientWidth,
       doc.clientHeight
   );
   RENDERER.shadowMap.enabled = true; // 辅助线
   doc.appendChild(RENDERER.domElement);


}


// 场景
export const SCENE = new Scene();
export function initScene() {
   SCENE.background = new Color(0xcccccc);
}

//  灯光
export function initLight() {
   const ambientLight = new AmbientLight(0xffffff, 0.2);    // 全局光
   ambientLight.position.set(10, 20, 55);   // 灯光
   SCENE.add(ambientLight);

   // 点光源
   const pointLight = new PointLight(0xffffff);
   pointLight.distance = 0;
   CAMERA.add(pointLight);
   SCENE.add(CAMERA);
}

//  相机
export let CAMERA;
export let CONTROLS;
export function initCamera(doc) {
   const d = {
       fov: 30, // 拍摄距离  视野角值越大，场景中的物体越小
       near: 1, //  最小范围
       far: 1000, //  最大范围
   };
   CAMERA = new PerspectiveCamera(
       d.fov,
       doc.clientWidth / doc.clientHeight,
       d.near,
       d.far)
       ;
   const p = {
       x: -20,
       y: 10,
       z: -10,
   };
   CAMERA.position.set(p.x, p.y, p.z);
   CAMERA.lookAt(0, 0, 0);
   CONTROLS = new OrbitControls(CAMERA, RENDERER.domElement);  // 控制镜头
}


//  网格
export function initGrid() {
   const gridHelper = new GridHelper(100, 50);
   SCENE.add(gridHelper);
}


//  性能检测
export const STATS = new Stats();
export function initStats(doc) {
   STATS.setMode(0);
   STATS.domElement.style.position = 'absolute';
   STATS.domElement.left = '0px';
   STATS.domElement.top = '0px';
   doc.appendChild(STATS.domElement);
}

//  动画混合器组（把模型的动画混合器都push到这里面，在canvas.ts里面更新动画   ）
export const MIXER = [];

以上的代码是一个场景的基本属性，如果你看过threejs就知道了。

3、新建一个canva component ( ng g component canva )

html

<div id="canvas" #canvasFrame></div>

scss

#canvas {
      width: 100%;
      display: block;
      height: 100%;
      position: relative;
}

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {
  initRenderer,
  initCamera,
  initScene, initLight,
  initGrid, initStats,
  RENDERER, CAMERA, SCENE, CONTROLS, STATS, MIXER
} from '../../config/base';
import { ChassisService, LineService } from '../../importModels';
import {
  FXAAShader, UnrealBloomPass, ShaderPass, FilmPass, OutlinePass, GeometryUtils, CopyShader, ColorifyShader, SepiaShader,
  OrbitControls, GLTFLoader, EffectComposer, RenderPass, SMAAShader, SMAAPass, ClearMaskPass, MaskPass,
} from 'three-full';
import * as  TWEEN from '@tweenjs/tween.js';
import { Vector2, Group, Scene, SphereGeometry, ImageUtils, AnimationMixer } from 'three';
import { fromEvent } from 'rxjs';
import { PickupService } from '../../service/pickup.service';

@Component({
  selector: 'app-canva',
  templateUrl: './canva.component.html',
  styleUrls: ['./canva.component.scss']
})
export class CanvaComponent implements OnInit {
  @ViewChild('canvasFrame', { static: true }) canvasContainer: ElementRef;
  
   thing;
  constructor( ) { }
 

  ngOnInit() {
    this.init();
  }


  init() {

    initRenderer(this.canvasContainer.nativeElement);
    initCamera(this.canvasContainer.nativeElement);
    initScene();
    initLight();
    initGrid();
    initStats(this.canvasContainer.nativeElement);
   
    //  加载模型-star
    this.importantModel();
    //  加载模型-end
 
    //  渲染场景
    const delta = new Clock();
    const rendererOut = () => {
      
      requestAnimationFrame(rendererOut);
      RENDERER.render(SCENE, CAMERA);
      CONTROLS.update();
      STATS.update();
 if (MIXER) {
        MIXER.map(r => {
          r.update(delta.getDelta());
        });
      }
    };

    rendererOut();

  }

  

// 这个模型可以使用blender2.8(正处于beta版) 直接导出gltf
  importantModel() {
    const loader = new GLTFLoader();
    loader.load('assets/model/1.gltf', (gltf) => {
      console.log(gltf);
    
      gltf.scene.traverse((child) => {  // 遍历判断Mesh
        if (child.isMesh) {
          console.log(child);
          child.material.color = { r: 1, g: 2, b: 3 };    //  颜色
          child.material.metalness = 0.8;   //  金属度
          gltf.scene.background = 'rgba(0,0,0, 0.5)';
          gltf.scene.translateX(5);
          this.thing = gltf.scene;
          SCENE.add(this.thing);
        }
      });

    },
      undefined,
      (error) => {
        console.error(error);
      });
  }

}

因为不能上传文件所以你们自己导出一个或者随便下一个吧。

接下来可以了解下threejs在angular里面可以如果架构比较方便分模块编写：传送门