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

 时间:2024-10-11 22:48:07

  Three.js是一款开源的主流3D绘图JS引擎(名字Three就是3D的含义),用来简化WebGL编程,也提供了非常多的3D显示功能来实现很多炫酷的实例。  本文利用Three.js的精灵系统实现旋转星空的效果,最终效果如下图:

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

实现过程

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

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

3、  新建物体(initObject),这一块比较复杂,详细分析如下:  1.先新建3D对象(group)和设置精灵缺省材质属性(material),里面要注意属性sizeAttenuation,设置为true的时候,星星会随距离而发生尺寸衰减(远小、近大),其它属性下图都有详细备注;  2.然后把新建的1000个精灵平面(sprite)(每个精灵都放大5倍,且随机不同位置)添加到group中。

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

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

Three.js实现旋转星空的效果(精灵)
  • 我的世界怎么控制末影龙行动
  • 笔记本初级改装指南
  • 摩尔庄园手游白玫瑰兔娃娃怎么得
  • qq音乐安装时出现-1001错误怎么办?
  • 关羽出爆裂之甲还是反伤刺甲好?
  • 热门搜索
    西安市旅游地图 纯玩旅游 江西的旅游景点 旅游拍照姿势大全 宜昌三峡旅游 阳江闸坡旅游 德阳旅游景点大全 埃及旅游价格 最爱四川旅游网 花都万达文化旅游城