Threejs实现卫星太阳板折叠动画,信号发射,姿态调整

1,介绍

该示例使用的是 r95版本Three.js库。

主要实现功能:创建卫星主体,模拟太阳板折叠动画,卫星姿态调整,模拟发射信号。

效果图如下:

2,动画主要说明

1,太阳板折叠动画利用Tweenjs实现动画,太阳板旋转因为Three.js中默认旋转中心为物体自身的中心,所以旋转的时候在外层包裹一层对象,让外层旋转中心设置到想要旋转的位置上,再调整太阳板相对位置到正确的显示位置上。

2,卫星主体主要是用THREE.CylinderGeometry对象创建一个圆柱体和一个雷达圆锥体,并调整到合适的位置。

3,信号波使用THREE.RingGeometry对象创建一个圆环,使用Tweenjs创建动画移动圆环的位置实现雷达播放效果。

4,卫星姿态调整很简单,旋转场景对象THREE.Scene即可。

// 创建一个卫星主体
function createWeiXing() {
	// 创建一个立方体并设置大小
	var wxGeometry = new THREE.CylinderGeometry(5, 5, 20, 100, 0);
	var wxMaterial = new THREE.MeshBasicMaterial({
		color: "#55557f",
	});
	var weixing = new THREE.Mesh(wxGeometry, wxMaterial);
	weixing.position.set(0, 0, 1);
	weixing.rotateZ(-Math.PI / 2);
	scene.add(weixing);
}

// 创建一个雷达
function createLeiDa() {
	// 创建一个立方体并设置大小
	var wxGeometry = new THREE.CylinderGeometry(4, 0, 5, 100, 0);
	var wxMaterial = new THREE.MeshBasicMaterial({
		color: "#ffaa00",
	});
	var weixing = new THREE.Mesh(wxGeometry, wxMaterial);
	weixing.position.set(10, 0, 1);
	weixing.rotateZ(-Math.PI / 2);
	scene.add(weixing);
}

// 雷达信号
function initSatellite(positionX, starLiteRadius) {
	var group = new THREE.Group();
	var obj = scene.getObjectByName("satellite");
	scene.remove(obj);

	var wxMaterial = new THREE.MeshBasicMaterial({
		color: "#ffffff",
		side: THREE.DoubleSide
	});
	var signalGeometry1 = new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.1, 100, 0);
	var signal1 = new THREE.Mesh(signalGeometry1, wxMaterial);
	signal1.position.z = -1;

	var signalGeometry2 = new THREE.RingGeometry(starLiteRadius + 2, starLiteRadius + 2.1, 100, 0);
	var signal2 = new THREE.Mesh(signalGeometry2, wxMaterial);
	signal2.position.z = -10;

	var signalGeometry3 = new THREE.RingGeometry(starLiteRadius + 3, starLiteRadius + 3.1, 100, 0);
	var signal3 = new THREE.Mesh(signalGeometry3, wxMaterial);
	signal3.position.z = -20;


	group.rotateY(-Math.PI / 2);
	group.position.set(positionX, 0, 1);
	group.name = "satellite";
	group.add(signal1);
	group.add(signal2);
	group.add(signal3);
	scene.add(group);
}

需要学习案例、素材、模型,请进入博客首页查看其他文章或者留言

在线预览:左本的博客 (zuoben.top)

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

左本Web3D

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值