【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸(二)
🐱 个人主页:不叫猫先生
🙋♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫系列专栏:vue3从入门到精通、TypeScript从入门到实践
📢 资料领取:前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流:博主建立了一个前端交流群,汇集了各路大神,一起交流学习,期待你的加入!(文末有我wx或者私信)
目录
搭建three.js环境
本文内容承接基础(一)。
1.添加坐标轴辅助器
AxesHelper:用于简单模拟3个坐标轴的对象,红色代表 X 轴.,绿色代表 Y 轴.,蓝色代表 Z 轴。
用法:AxesHelper( size : Number ),参数如下
- size :表示代表轴的线段长度. 默认为 1,可选。
(1)添加坐标轴辅助器,设置坐标轴长度
//添加坐标轴辅助器(参数是坐标轴的长度),设置坐标轴长度为5
const axesHelper = new THREE.AxesHelper(5)
(2)坐标轴添加场景
sence.add(axesHelper)
2.resize页面尺寸
当页面尺寸大小变化,内容要自适应,使用resize
来监听。监听时需要更新摄像头、摄像机的投影矩阵、渲染器、渲染器的像素比。
(1)设置监听
window.addEventListener('resize',()=>{
//代码执行
})
(2)更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
(3)更新渲染器
renderder.resize(window.innerWidth, window.innerHeight)
(4)更新像素比
renderer.setPixelRatio(window.devicePixelRatio)
整体代码如下:
//监听画面变化,更新渲染画面
window.addEventListener('resize', () => {
console.log('画面变化了')
//更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
//更新摄像机的投影矩阵,三维通过矩阵算法映射到屏幕的二维画面
camera.updateProjectionMatrix()
//更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight)
//更新渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
3.普通方式处理动画
下面的代码每帧都会执行(正常情况下是60次/秒),主要是看电脑的屏幕刷新率。基本上来说,当应用程序运行时,如果你想要移动或者改变任何场景中的东西,都必须要经过这个动画循环。
- 设置几何体的x轴位置,每次加0.01
- 几何体在x轴位置超过5,归原位值(0)
- 循环往复以上操作
function render(){
cube.position.x +=0.01;
if(cube.position.x>5)cube.position.x = 0;
renderer.render(scene,camera)
//渲染下一帧的就会调用
requestAnimationFrame(render)
}
几何体实际在运动时不是直接设置的固定值,可以通过下面的4中内容实现
4.requestAnimationFrame处理几何体动画
requestAnimationFrame
函数,参数是一个函数,效果是在浏览器下一次刷新帧时调用这个函数。默认会传一个time
,单位是ms。
浏览器一般60帧/s,大概16/ms。
- time/1000变成秒
- 为了让几何体往返运动,A到B,B直接到A,所以时间对坐标轴长度(5)求余
- 设置几何体的位置
- 如果几何体位置到5时,设置其位置为0
function render(time){
//默认会传一个`time`,单位是ms
// 根据时间和速度计算移动距离
// 1.计算时间
let t = time / 1000 % 5;
// 2. 移动距离
cube.position.x = 1 * t;//速度按1,t是求余后的时间
if(cube.position.x > 5) cube.position.x = 0;
//使用渲染器,通过相机将场景渲染进来
renderer.render(scene,camera)
//渲染下一帧的就会调用
requestAnimationFrame(render)
}
5.clock跟踪事件处理动画
clock对象用于跟踪时间,具体属性如下:
-
autoStart : Boolean
如果设置为true
,则在第一次调用getDelta()
时开启时钟。默认值是true
-
startTime : Float
存储时钟最后一次调用start
方法的时间。默认值是 0 -
oldTime : Float
存储时钟最后一次调用start
,getElapsedTime()
或getDelta()
方法的时间。默认值是 0 -
elapsedTime : Float
保存时钟运行的总时长。默认值是 0 -
running : Boolean
判断时钟是否在运行。默认值是false
具体方法如下:
-
start () : undefined
启动时钟。同时将startTime
和oldTime
设置为当前时间。 设置elapsedTime
为 0,并且设置running
为true
-
stop () : undefined
停止时钟。同时将oldTime
设置为当前时间 -
getElapsedTime () : Float
获取自时钟启动后的秒数,同时将oldTime
设置为当前时间。
如果autoStart
设置为true
且时钟并未运行,则该方法同时启动时钟 -
getDelta () : Float
获取自oldTime
设置后到当前的秒数。 同时将oldTime
设置为当前时间。
如果autoStart
设置为true
且时钟并未运行,则该方法同时启动时钟
// 设置时钟
const clock = new THREE.Clock()
(1)获取时钟运行总时长
let totalTime = clock.getElapsedTime();
(2)获取两帧之间的时间差
let deltaTime = clock.getDelta();//两帧的时间差,这一帧到下一帧的时间差
此时deltaTime
为0 ,把clock.getElapsedTime()
注释掉,则可以得到真正的间隔时间,大概是8ms,那么1000/8 大概是125帧/ms。因为oldtime
指的是存储时钟最后一次调用start
,getElapsedTime
或者getDelta
方法的时,而getDelta
获取自oldTime
设置后到当前的秒数, 同时将 oldTime
设置为当前时间,所以中间时间差为0。
所以用clock
跟踪事件处理动画最终代码如下:
function render(time){
// requestAnimationFrame 会默认传入进来time ,单位ms
// 浏览器刷新率是60帧/s,16帧/ms
//获取时钟运行的总时长
// let totalTime = clock.getElapsedTime();
// 获取间隔时间,即oldtime到当前时间的秒数,同时将oldtime设置为当前时间
//oldtime :存储时钟最后一次调用start ,getElapsedTime或者getDelta方法 的时间
// let deltaTime = clock.getDelta();//两帧的时间差,这一帧到下一帧的时间差
// console.log('间隔时间',deltaTime)//0 此时为0 ,把clock.getElapsedTime()注释掉,则可以得到真正的间隔时间,大概是8ms,那么1000/8 大概是125帧/s
let totalTime = clock.getElapsedTime();
let t = totalTime % 5;
cube.position.x = t * 1;
renderer.render(scene,camera)
//渲染下一帧的就会调用
requestAnimationFrame(render)
}
相关文章
- js 生成4位随机数及Js知识汇总
- [转] 使用moment.js轻松管理日期和时间
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
- (21)打鸡儿教你Vue.js
- JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)
- jQuery验证控件jquery.validate.js的使用介绍
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
- js insertBefore
- Node.js Express 框架
- js中Object.defineProperty()和defineProperties()
- python Flask中html模版中如何引用css,js等资源
- JS高阶---线程与事件机制(小结)
- JS高阶---事件循环模式(事件轮询)
- js 给json添加新的字段,或者添加一组数据,在JS数组指定位置删除、插入、替换元素
- JS模板引擎handlebars.js的简单使用
- 推荐4款高星星JS库:canvas库-Fabric.js、JavaScript客户端文件上传库-FilePond、客户端保存文件解决方案-FileSaver、JavaScript在线解压 ZIP 文件-JSZip
- 使用node.js + express框架 搭建一个微型服务器
- js 判断当前操作系统是ios还是android还是电脑端
- 看了jquery的animate动画函数,自己也用js写了一个,感觉还不错!
- JS 中Math.ceil()、Math.floor()和Math.round()的区别
- js-原生Js汉语拼音首字母匹配城市名
- Boostrap本地导入js文件
- JQuery/JS插件 linq.js 获取所有选中行的Id
- JQuery/JS插件 linq.js 入门
- JQuery/JS插件 json2.js
- js控制全屏显示