webgl、threeJS地球案例:地球转速越来越快

在使用Three.js创建地球自转动画时,发现地球转速随着时间不断加快并出现闪烁问题。通过分析,问题在于旋转角度持续累加。解决方案是每帧动画开始时重置旋转角度,确保其稳定在设定值。调整后的代码在保持地球平稳自转的同时,消除了闪烁现象。
摘要由CSDN通过智能技术生成

在用three.js写地球案例时候,使用了动画,设置了它的自转速度,但是转速却一直在加快
在这里插入图片描述

动画这样设置:

function animate( ) {
			let elapsed = clock.getElapsedTime();
			moon.position.set(Math.sin(elapsed)*4,0,Math.cos(elapsed)*4)

			//地球自转
			   //自转轴
			   var axis= new THREE.Vector3(0,1,0);
	
			   earth.rotateOnAxis(axis,0.005)
			   renderer.render(scene,camera);
			   requestAnimationFrame(animate)

		  }

转速达到一定程度,就开始闪烁,哈哈哈哈
解决办法:动画进入后重置转速,否则数值一直在叠加

	function animate( ) {
			let elapsed = clock.getElapsedTime();
			moon.position.set(Math.sin(elapsed)*4,0,Math.cos(elapsed)*4)

			//地球自转
			   //自转轴
			   var axis= new THREE.Vector3(0,1,0);
			   earth.rotateOnAxis(axis,0.0);
               earth.rotateOnAxis(axis,0.005);

			   renderer.render(scene,camera);
			   requestAnimationFrame(animate)

		  }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值