Three.js实现旋转星空的效果(精灵)

 时间:2026-02-12 12:52:28

1、  html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。

Three.js实现旋转星空的效果(精灵)

1、  声明变量,详细代码如下图,具体用途说明都已经有备注。

Three.js实现旋转星空的效果(精灵)

2、  新建渲染器(initRenderer)、相机(initCamera)和场景(initScene),详细代码如下图:

  1.渲染器设置抗锯齿为有效(antialias: true),使物体更光滑;

  2.PerspectiveCamera的视角一般设置45,效果比较好;

  3.为了观察效果,相机的位置定位到(20,0,150),设置y轴向上(camera.up.y = 1)。

Three.js实现旋转星空的效果(精灵)

3、  新建物体(initObject),这一块比较复杂,详细分析如下:

  1.先新建3D对象(group)和设置精灵缺省材质属性(material),里面要注意属性sizeAttenuation,设置为true的时候,星星会随距离而发生尺寸衰减(远小、近大),其它属性下图都有详细备注;

  2.然后把新建的1000个精灵平面(sprite)(每个精灵都放大5倍,且随机不同位置)添加到group中。

Three.js实现旋转星空的效果(精灵)

4、  添加动画效果,简单说就是利用requestAnimationFrame每隔一个动画帧重新渲染一次,由于设置了旋转弧度,所以会产生动画效果;详细代码如下图:

  1.设置了每隔一个动画帧重新渲染的时候,group.rotation的(x)进行累加(+= 0.01),从而产生整个星空的旋转效果。

  Tips:这里是设置整个精灵类(group)旋转,所以才会有整个星空旋转的效果。

Three.js实现旋转星空的效果(精灵)

5、  为了360度观察整个星空的场景,可以新建轨道控制器,轨道控制器可以利用鼠标控制场景的旋转、平移、缩放,详细代码如下图。

Three.js实现旋转星空的效果(精灵)

  • 我的世界怎么控制末影龙行动
  • 笔记本初级改装指南
  • 摩尔庄园手游白玫瑰兔娃娃怎么得
  • qq音乐安装时出现-1001错误怎么办?
  • 关羽出爆裂之甲还是反伤刺甲好?
  • 热门搜索
    夕阳红老年旅游团 五一去哪里旅游最好 中国旅游网官方网站 澳门旅游学院 陕西旅游集团 欣欣旅游网 无锡旅游商贸高等职业技术学校 约伴旅游网 崇明旅游 上海奉贤海湾旅游区