Three.js中的动画实现02-[Three.js]-[Object3D属性.onAfterRender/.onBeforeRender]
Table Of Content
Object3D简介以及两个属性的介绍
一个示例
Object3D简介以及两个属性的介绍
这是Three.js中大部分对象的基类,提供了一系列的属性和方法来对三维空间中的物体进行操控。这里介绍该基类的两个属性。
.onAfterRender : function
一个可选的回调函数,在Object3D渲染之后直接执行。 使用以下参数来调用此函数:renderer,scene,camera,geometry,material,group。
.onBeforeRender : function
一个可选的回调函数,在Object3D渲染之前直接执行。 使用以下参数来调用此函数:renderer,scene,camera,geometry,material,group。
其实在前面讲requestAnimationFrame时,demo中就用到了.onBeforeRender
这个属性。
原因是,我们写的是模块化,并不是所有逻辑都写在一个文件中,这样如果我们需要实现动画,就需要在渲染器更新函数中对我们创建的模型进行操作。如果按照这种想法,我们需要把在专门创作模型的js文件中定义的模型变量传入到渲染器更新函数所载的js文件,这个过程很繁琐,易出错。 因此,Three.js为大多数3D模型提供了这样两个属性。 只需要通过onject.onBeforeRender = function(para1,para2,...){}
这种形式,就可以定义,在何时渲染。
一个示例
效果
![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200101234552641-303346906.gif)
关键代码
function draw(scene) {
//方体
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color:0xffaaaa,
wireframe:true
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.x = 0; cube.position.y = 10; cube.position.z = 80;
cube.castShadow = true;
cube.onBeforeRender = function(){//关键
this.rotation.x += 0.02;
this.rotation.y += 0.02;
this.rotation.z += 0.02;
}
scene.add(cube)
//球体
var sphereGeometry = new THREE.SphereGeometry(20,40,50);
var sphereMaterial = new THREE.MeshLambertMaterial({
color:0x777777,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.castShadow = true;
var step = 0;
sphere.onBeforeRender = function(){//关键
step += 0.04;
sphere.position.x = 20 + (10*(Math.cos(step)));
sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));
}
scene.add(sphere)
//地面
var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);
var planeMaterial = new THREE.MeshPhongMaterial({
color:0x222222,
side: THREE.Double
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -5;
plane.position.z = 0
plane.receiveShadow = true;
scene.add(plane)
//灯光
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-40,60,-10);
spotlight.castShadow = true
scene.add(spotlight);
}
值得注意的是球体的弹跳(bounce)的实现
x方向:
sphere.position.x = 20 + (10*(Math.cos(step)));
该方向上的增量变化是10~30
y方向:
sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));
该方向上的增量是20~30
该demo的完整代码在这里:Link
最新文章
- Android 文件读写
- BackTrack5-r3虚拟机安装
- phpredis中文文档 [转]
- pycharm运行脚本为何不生成测试报告?
- PHP中文函数顺序排列一数组且其序数不变
- WTF,这到底是在做什么?
- 转:maven报错非法字符:\65279 错误
- 【COCOS2DX-游戏开发之三四】cocos2dx 3.0 TableView特殊使用方法:滚动时不能选择等等
- Angular2.js——多个组件
- jQuery高级Ajax
- Tomcat 日志文件分割
- Windows system 在python文件操作时的路径表示方法
- PAT Basic 1016
- 服务器虚拟化ESXi 5.5安装过程
- ORA-01940:无法删除当前已链接的用户(转)
- LeetCode题解之Merge k Sorted Lists 解法二
- Laravel4快速安装方法,解决Laravel4安装速度慢
- 跨域资源共享/option 请求产生原因
- 配置Ceph集群为OpenStack后端存储
- JS笔记-强化版2
热门文章
- 19 JPQL
- django数据库分库migrate
- Community Cloud零基础学习(四)Builder创建自定义的布局
- update join和delete join
- django 从零开始 2迁移模型数据到数据库中和admin初识
- element UI中的tab切换栏
- MySQL基础篇(06):事务管理,锁机制案例详解
- Docker Compose 文件讲解
- 用纯Python实现循环神经网络RNN向前传播过程(吴恩达DeepLearning.ai作业)
- [BUG]微信浏览器 iOS input 失焦页面不回弹