AngularJSでthree.jsを使用したインスタンスの詳細

3286 ワード
AngularJSでthree.jsを使用したインスタンスの詳細
一、トラックボールの導入問題
最初は次のようにトラックボールを引いたが、トラックballcontrols 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の方法でいいことに気づきました.コードは以下の通りです.



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

四、トラックボール角度変化のスムーズ性
上の3つのステップを終えた後、私たちは前のブログで述べたようなモデルの効果を見ることができますが、角度の変換を明らかに発見することができたとき、流暢性が悪くなりました.最初はフレームワークの問題だと思っていたが、レンダリングの周期が長くなり、どうやって変えたのか分からなかった.その結果、トラックボールのソースコードを見て解決策を探すと、実はとても簡単で、属性を変えればいいので、トラックボールの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の使用上の注意事项と実例について、ご质问があればメッセージをお愿いします.
mockを使用してpythonアプリケーションをテストする
MyBatis学習のSQLクエリーパラメータおよび削除操作