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


Posted in Javascript onJuly 21, 2017

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

Javascript 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
浅谈Vue数据响应
Nov 05 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Axios学习笔记之使用方法教程
Jul 21 #Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 #Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 #Javascript
基于JavaScript实现数码时钟效果
Mar 30 #Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 #Javascript
基于JavaScript实现无缝滚动效果
Jul 21 #Javascript
基于JavaScript实现选项卡效果
Jul 21 #Javascript
You might like
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
如何签定毕业生就业协议书
2014/09/28 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
vue+iview实现手机号分段输入框
2022/03/25 Vue.js