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 相关文章推荐
自动更新作用
Oct 08 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
Javascript设计模式之原型模式详细
Oct 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
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
PHP实现简易图形计算器
2020/08/28 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python的时间模块datetime详解
2017/04/17 Python
Python创建或生成列表的操作方法
2019/06/19 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python爬虫请求头的使用
2020/12/01 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
集体备课反思
2014/02/12 职场文书
企业形象策划方案
2014/05/29 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
暂住证明怎么写
2015/06/19 职场文书
企业催款函范本
2015/06/24 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
DIY胆机必读:各国电子管评价
2022/04/06 无线电
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL