AngularJS中如何使用three.js

小編給大家分享一下AngularJS中如何使用three.js，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

AngularJS中使用three.js的實例詳解

一、軌跡球的引入問題

一開始我是用下面的方式引如軌跡球，但是會報Trackballcontrols is undefined的錯。

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

但其實我是能夠在node_module下的threejs的包中找到Trackballcontrols的文件的，我一開始以為是引用的路徑沒對然后修改路徑到對應包下Trackballcontrols.js所在的位置。嘗試后發現錯誤依然在。google后發現有類似的問題但是他用的是另一個控制器，解決的方案依然是修改引用方式。修改為required的引用，但實際上這種方式還是沒有效果。

最后我發現Trackballcontrols其實是有專門的一個包的，npm安裝對應的包之后如下引用即可解決問題

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

二、將renderer.domElement放到對應的dom中

其實放domElement的方法很簡單就是找到對應的dom將domElement添加進去就好，因為NG里對Dom的直接操作比較少所以有的時候可能會覺得比較麻煩，我一開始也考慮過用JQ或者原生去獲取這個對象，但是后面發現直接用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中如果像平時一樣通過下面這種方式進行畫面的render，會因為this的指向問題報錯。

requestAnimationFrame(this.doRender());

而如果用下面這樣的setInterval來執行render畫面其實是不穩定的，更大的問題是，在你離開頁面在返回時，瀏覽器會一次性執行離開的這段時間內所有的setInterval中的事件，瀏覽器可能就直接卡死了。

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

解決這個問題還是得用requestAnimationFrame，既然我們已經知道是this指向導致的問題，那么其實綁定下this就可以，因為requestAnimationFrame的參數類型限制，所以我們需要對renderer用箭頭函數做一下處理就能滿足正常效果了。

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

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

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

五、在three.js中如何通過鼠標位置獲取想要選擇的Object

其實這個看起來好像很難其實Three.js的開發指南里面已經有對應的例子和方法了，代碼如下：

onDocumentMouseDown(event) {
  event.preventDefault();
  let vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
  vector = vector.unproject(this.camera);

  let raycaster = new THREE.Raycaster(this.camera.position, vector.sub(this.camera.position).normalize());

  let intersects = raycaster.intersectObjects(this.scene.children);

  if (intersects.length > 0) {
   console.log(intersects[0])//這個就是點中的對象
  }
 }


//綁定事件
$(this.renderer.domElement).on('mousedown', (e)=>{});

里面的邏輯我就不詳細解釋了。

以上是“AngularJS中如何使用three.js”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！