threejst物体匀速移动

需求:速度为5要求一秒走一厘米,5秒钟走到5,匀速进行

代码仓库https://gitee.com/zhouyunfang_admin/three-js/tree/v1.1/

* 需要匀速的运动但因为每个计算机的刷新率及任务量各方面都会影响时间差,导致time每次上下帧相隔都不同


// 使用渲染器通过浏览器每渲染一帧就要调用一次渲染器以此来实现轨道控制器效果
function render (time) {//当时长度等于速度*时间console.log(time);// 正常情况一秒钟刷新率为60帧,每次一帧间隔为1000毫秒除以60==16毫秒左右// 让物体每次渲染都改变位置cube.position.x += 0.01cube.rotation.x+=0.01//x轴每次渲染旋转0.01度if (cube.position.x > 5) {cube.position.x=0}// 重新渲染renderer.render(scence, camera)// 当下一帧的时候自调用requestAnimationFrame(render)
}
render()

在 render方法用默认参数time测试发现上下帧差不是相同速度在移动

* 思路不使用three中提供的默认参,需手动去算出,让其匀速进行

* L=v*t(长度=速度*时间)速度要求1秒走一格1*t

解决方案main.js文件

// 使用渲染器通过浏览器每渲染一帧就要调用一次渲染器以此来实现轨道控制器效果
function render (time) {//当时长度等于速度*时间console.log(time);// 正常情况一秒钟刷新率为60帧,每次一帧间隔为1000毫秒除以60==16毫秒左右// 让物体每次渲染都改变位置// cube.position.x += 0.01// cube.rotation.x+=0.01//x轴每次渲染旋转0.01度// if (cube.position.x > 5) {//     cube.position.x=0// }/*** 需求:走度为5要求一秒走一厘米,5秒钟走到5,* 需要匀速的运动但因为每个计算机的刷新率及任务量各方面都会影响时间差,导致time每次上下帧相隔都不同* 思路不使用three中提供的默认参,需手动去算出,让其匀速进行* L=v*t(长度=速度*时间)速度要求1秒走一格1*t* * */let t = time / 1000 %5//得到每秒(%5)每次到了5之后会重新计算,不然不回重新开始cube.position.x = t * 1//每次渲染时移动1格if (cube.position.x > 5) {cube.position.x=0}// 重新渲染renderer.render(scence, camera)// 当下一帧的时候自调用requestAnimationFrame(render)
}
render()

也可用three中提供的clock方法计算

clock官网地址https://threejs.org/docs/index.html?q=clock#api/zh/core/Clock仓库分支查看v1.2

//  设置时钟
const clock=new THREE.Clock()
// 使用渲染器通过浏览器每渲染一帧就要调用一次渲染器以此来实现轨道控制器效果
function render () {//当时长度等于速度*时间let time = clock.getElapsedTime()//获取运行总时长 // console.log('获取运行总时长',time);// let deltaTime = clock.getDelta()//获取两次间隔时间差单位是秒// console.log('获取间隔时间',deltaTime);/*** 需求:走度为5要求一秒走一厘米,5秒钟走到5,* 需要匀速的运动但因为每个计算机的刷新率及任务量各方面都会影响时间差,导致time每次上下帧相隔都不同* 思路不使用three中提供的默认参,需手动去算出,让其匀速进行* L=v*t(长度=速度*时间)速度要求1秒走一格1*t* * */let t = time %5//得到每秒(%5)每次到了5之后会重新计算,不然不回重新开始cube.position.x = t * 1//每次渲染时移动1格if (cube.position.x > 5) {cube.position.x=0}// 重新渲染renderer.render(scence, camera)// 当下一帧的时候自调用时间参数 控制物体动画requestAnimationFrame(render)
}
render()

threejst物体匀速移动相关推荐

水平拉滑轮组计算机械效率的题,机械效率杠杆论文,关于中考物理机械效率计算题*相关参考文献资料-免费论文范文...
导读:这篇机械效率杠杆论文范文为免费优秀学术论文范文,可用于相关写作参考. 简单机械的机械效率计算是中考必考点,分值为6-8分.题型涉及选择题.填空题.探究题.综合计算题.所以学会解答简单机械的机械效 ...
初中物理60个重要知识点
1.匀速直线运动的速度一定不变,速度一定是一个定值,与路程不成正比,时间不成反比. 2.平均速度不是速度的平均值,只能是总路程除以这段路程上花费的所有时间,包含中间停的时间. 3.密度不是一定不变的. ...
水平拉滑轮组计算机械效率的题,中考典型题：滑轮组机械效率分类计算(1).doc...
计算专题:滑轮组机械效率.功.功率题型一:滑轮组竖直放置克服重力计算 1.用如下图所示的滑轮组吊起重物,不计绳重和摩擦.(1)当物重为150N时,绳端所用的拉力是60N,此时滑轮组的机械效率是多少? ...
Unity之Time类
官方手册说明:https://docs.unity3d.com/cn/current/Manual/TimeFrameManagement.html 一.Time.time 该帧开始的时间(只读).此 ...
水平放滑轮组计算机械效率,滑轮组机械效率分类计算).doc
PAGE 1 PAGE 1 计算专题:滑轮组机械效率.功.功率题型一:滑轮组竖直放置克服重力计算 1.用滑轮组将重6×102N的物体匀速提高2m,拉力所做的功为2×103J,所用的时间为20s.求: ...
计算机械效率的公式四种,功功率和机械效率复习课）ppt课件.ppt
<功功率和机械效率复习课)ppt课件.ppt>由会员分享,提供在线免费全文阅读可下载,此文档格式为ppt,更多相关<功功率和机械效率复习课)ppt课件.ppt>文档请在天天文库 ...
Blender K帧与曲线编辑器
文章目录关键帧. 三种K帧方式. 自动K帧. 物体属性K帧. 快捷键K帧. 曲线编辑器. 打开曲线编辑器. 曲线编辑器介绍. 控制柄类型. 插值模式. 关键帧. 1 点击一个模型,即可在时间轴上看到 ...
已知两个点和中间一个比例的点，求该点坐标
实际问题: 有一个物体匀速沿点A往点B走,已知A.B坐标,AP段移动时间T1,AB段移动时间T2. 求P点坐标.如图: 解: AB向量=坐标B - 坐标A. R比率 =T1 / T2 AP向量=向量A ...
科普-动量和能量、一维势能曲线
如果我们把自己局限在经典力学框架中,以牛顿三定律为基本假设,那么力就是最基本的概念,而动量和能量就只是衍生出来的概念．本文将以这种思路来讲解动量和能量．然而需要注意的是在更近代的物理中(例如相对论和量 ...

threejst物体匀速移动

threejst物体匀速移动相关推荐

最新文章

热门文章