收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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的使用注意事项及实例,大家如有疑问请留言,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

VUE中使用Vue-resource完成交互
本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下使用vue-resource引入vue-resourcevue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-r

Vue resource中的GET与POST请求的实例代码
前言:vue-resource使用比jQuery更加简洁的方式实现了异步请求功能,还提供了比如interceptors这样处理请求过程中行为的功能。下面介绍下vue-resource中常用

vue-resource调用promise取数据方式详解
用了好久的vue-resource,好像每一次使用的时候,都要去看一下上一次是怎么写的,具体的语法过不了多久又忘记了,甚至不知道其中的原理,只知道一

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号