【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸(二)

这篇具有很好参考价值的文章主要介绍了【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
    存储时钟最后一次调用 startgetElapsedTime()getDelta()方法的时间。默认值是 0

  • elapsedTime : Float
    保存时钟运行的总时长。默认值是 0

  • running : Boolean
    判断时钟是否在运行。默认值是 false

具体方法如下:

  • start () : undefined
    启动时钟。同时将 startTimeoldTime 设置为当前时间。 设置 elapsedTime 为 0,并且设置 runningtrue

  • 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 指的是存储时钟最后一次调用startgetElapsedTime或者getDelta方法的时,而getDelta获取自oldTime 设置后到当前的秒数, 同时将 oldTime设置为当前时间,所以中间时间差为0。
所以用clock跟踪事件处理动画最终代码如下:文章来源地址https://www.toymoban.com/news/detail-780068.html

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)
}

到了这里,关于【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • matlab设置坐标轴的坐标显示范围和刻度

    所用代码: 逐个演示代码结果:   参考资料: matlab设置x轴和y轴的坐标显示范围和刻度_matalb的极坐标图如何将坐标标出来_phymat.nico的博客-CSDN博客

    2024年02月09日
    浏览(73)
  • 第六章、坐标轴的定制

    6.1、坐标轴概述 在绘制图表过程中,matplotlib会根据所绘图表的类型决定是否使用坐标系,或者显示哪种类型的坐标系。 坐标轴的结构相同,主要包括轴脊、刻度,其中刻度又可以细分为刻度线和刻度标签,刻度线又可以细分为主刻线和次刻线。坐标轴的各部分均是matplotli

    2024年02月06日
    浏览(41)
  • MATLAB: 调整坐标轴范围

    MATLAB: 调整坐标轴范围 在MATLAB中,可以使用一些方法来设置坐标轴的范围。通过调整坐标轴范围,可以改变绘图的可视化效果,并突出显示感兴趣的数据。本文将介绍一些常用的方法和示例代码。 使用axis函数设置坐标轴范围 axis函数是MATLAB中常用的设置坐标轴的函数之一。它

    2024年02月06日
    浏览(44)
  • 采用VMD按照某一坐标轴旋转坐标结构

    关注 M r . m a t e r i a l   , color{Violet} rm Mr.material , Mr.material   , 更 color{red}{更} 更 多 color{blue}{多} 多 精 color{orange}{精} 精 彩 color{green}{彩} 彩 ! 主要专栏内容包括:   †《LAMMPS小技巧》: ‾ textbf{ underline{dag《LAMMPS小技巧》:}}   † 《 LAMMPS 小技巧》: ​ 主要介绍采

    2024年02月13日
    浏览(36)
  • 3Ds Max坐标轴切换,使用物体的世界坐标和本地坐标之间切换

    官方文档 官方文档 使用“参考坐标系”列表,可以指定变换(移动、旋转和缩放)所用的坐标系。选项包括“视图”、“屏幕”、“世界”、“父对象”、“局部”、“万向”,“栅格”、“工作”和“拾取”。 主工具栏 “参考坐标系”下拉菜单 在“屏幕”坐标系中,所

    2024年02月12日
    浏览(48)
  • echarts坐标轴、轴线、刻度、刻度标签

    x 轴和 y 轴都由 轴线、刻度、刻度标签、轴标题 四个部分组成。部分图表中还会有网格线来帮助查看和计算数据 普通的二维数据坐标系都有x轴和y轴,通常情况下,x轴显示在图表底部,y轴显示在左侧,一般配置如下: 当 x 轴(水平坐标轴)跨度很大,可以采用 区域缩放方

    2024年04月14日
    浏览(62)
  • Qwt QwtScaleDraw自定义坐标轴

    1.概述 QwtScaleDraw 是 Qt 绘图库 Qwt 中的一个类,用于绘制坐标轴刻度线和刻度标签。它提供了一些方法和属性来设置刻度线和标签的样式、布局和对齐方式。 以下是类继承关系: 2.常用方法 标签相关方法: setLabelRotation(double angle):设置标签旋转角度。 setLabelAlignment(Alignment

    2024年02月07日
    浏览(44)
  • matplotlib 设置坐标轴的刻度显示

    💖💖感谢各位观看这篇文章,💖💖点赞💖💖、收藏💖💖、你的支持是我前进的动力!💖💖 💖💖感谢你的阅读💖,专栏文章💖持续更新!💖关注不迷路!!💖 设置刻度有两个方法: ax.set_xticks(self, ticks, minor=False) 设置刻度 ,matplotlib将刻度放在对应范围的哪个位置,

    2024年02月12日
    浏览(59)
  • python matplotlib笔记:坐标轴设置

    ax.xlim():设置x坐标轴范围 ax.ylim():设置y坐标轴范围 ax.xlabel():设置x坐标轴名称 ax.ylabel():设置y坐标轴名称 ax.xticks():设置x轴刻度 ax.yticks():设置y轴刻度 gca():获取当前坐标轴信息 ax.spines:设置边框 ax.set_color:设置边框颜色:默认白色 ax.spines:设置边框 ax…xaxis.set_ticks_position:设置x坐标

    2024年02月09日
    浏览(39)
  • Matlab中如何调整坐标轴刻度

    Matlab中如何调整坐标轴刻度 在Matlab中,我们经常需要对绘图中的坐标轴刻度进行调整,以便更好地展示数据。本文将介绍如何使用Matlab来调整坐标轴刻度,并提供相应的源代码示例供参考。 Matlab提供了多种方法来调整坐标轴刻度。下面我们将介绍其中的两种常用方法:手动

    2024年02月05日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包