AngularJS中使用three.js的實(shí)例詳解

一、軌跡球的引入問題

一開始我是用下面的方式引如軌跡球，但是會(huì)報(bào)Trackballcontrols is undefined的錯(cuò)。

import * as THREE from 'three';import * as Trackballcontrols from 'three';

但其實(shí)我是能夠在node_module下的threejs的包中找到Trackballcontrols的文件的，我一開始以為是引用的路徑?jīng)]對(duì)然后修改路徑到對(duì)應(yīng)包下Trackballcontrols.js所在的位置。嘗試后發(fā)現(xiàn)錯(cuò)誤依然在。google后發(fā)現(xiàn)有類似的問題但是他用的是另一個(gè)控制器，解決的方案依然是修改引用方式。修改為required的引用，但實(shí)際上這種方式還是沒有效果。

最后我發(fā)現(xiàn)Trackballcontrols其實(shí)是有專門的一個(gè)包的，npm安裝對(duì)應(yīng)的包之后如下引用即可解決問題

import * as THREE from 'three';import * as Trackballcontrols from 'three-trackballcontrols';

二、將renderer.domElement放到對(duì)應(yīng)的dom中

其實(shí)放domElement的方法很簡(jiǎn)單就是找到對(duì)應(yīng)的dom將domElement添加進(jìn)去就好，因?yàn)镹G里對(duì)Dom的直接操作比較少所以有的時(shí)候可能會(huì)覺得比較麻煩，我一開始也考慮過用JQ或者原生去獲取這個(gè)對(duì)象，但是后面發(fā)現(xiàn)直接用NG的方法就可以了，代碼如下

<div #MapGL class="map clearfix"></div>

import { Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';@ViewChild('MapGL') mapGL: ElementRef;initRenderer(){  this.renderer = new THREE.WebGLRenderer();  this.renderer.setSize(1000, 800);  this.renderer.setClearColor(0xFFFFFF);  this.mapGL.nativeElement.append(this.renderer.domElement);} 

三、setInterval和requestAnimationFrame的問題

在NG中如果像平時(shí)一樣通過下面這種方式進(jìn)行畫面的render，會(huì)因?yàn)閠his的指向問題報(bào)錯(cuò)。

requestAnimationFrame(this.doRender());

而如果用下面這樣的setInterval來(lái)執(zhí)行render畫面其實(shí)是不穩(wěn)定的，更大的問題是，在你離開頁(yè)面在返回時(shí)，瀏覽器會(huì)一次性執(zhí)行離開的這段時(shí)間內(nèi)所有的setInterval中的事件，瀏覽器可能就直接卡死了。

setInterval(()=>{this.doRender()}, 1000/60);

解決這個(gè)問題還是得用requestAnimationFrame，既然我們已經(jīng)知道是this指向?qū)е碌膯栴}，那么其實(shí)綁定下this就可以，因?yàn)閞equestAnimationFrame的參數(shù)類型限制，所以我們需要對(duì)renderer用箭頭函數(shù)做一下處理就能滿足正常效果了。

requestAnimationFrame(()=>{return this.doRender()});

四、軌跡球角度改變的流暢性

做完上面三個(gè)步奏后我們就能看見和之前我那篇博客提到的一樣的模型效果了，但能夠顧很明顯的發(fā)現(xiàn)角度變換的時(shí)候流暢性變差了。一開始我認(rèn)為是框架的問題會(huì)造成渲染一次的周期變長(zhǎng)，有點(diǎn)楞逼不知道這下怎么改了。結(jié)果在看軌跡球源碼找解決方案的時(shí)候發(fā)現(xiàn)其實(shí)特別簡(jiǎn)單，改一下屬性就可以了，把軌跡球的rotateSpeed屬性寫大點(diǎn)就好了。