AngularJS中使用three.js的实例详解

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

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

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

requestAnimationFrame(this.doRender());

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

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

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