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 TextArea动态显示剩余字符
Oct 22 Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Bootstrap响应式表格详解
May 23 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
python创建和删除目录的方法
2015/04/29 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python中正则表达式的使用方法
2018/02/25 Python
Python异常处理操作实例详解
2018/05/10 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
医院实习介绍信
2014/01/12 职场文书
主管会计岗位职责
2014/03/13 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS