Threejs-创建一个星空和星系(一)-星空
使用Three.js创建星空和星系是一项有趣且富有挑战性的任务。这是一个简单的步骤指南,帮助你在Three.js中创建一个星空和星系的效果。

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案,实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下,直接查看和操作3D模型,极大地提升了数据可视化的效果和用户交互体验。
星空
1、搭建一个基本的 Three.js 场景
首先创建场景、相机、渲染器、控制器。

2、创建一个点
先看看如何创建一个点。
使用threejs的BufferGeometry
和Points
类创建点。BufferGeometry
是 Three.js 中用于存储顶点数据(如顶点位置、法线、颜色、纹理坐标等)的一种类。与传统的 Geometry
类相比,BufferGeometry
使用了更紧凑和高效的数据结构,可以更快的将数据传到GPU(图形处理器),提高渲染性能。
要创建星空,需要创建很多的点,也就是有大量的顶点数据,并且如果让这些点运动起来,数据会实时变化。对于这种场景,使用 BufferGeometry
可以显著提高渲染性能。

效果:

3、创建多个点
通过循环往顶点数据数组里面添加多个点坐标。坐标位置随机生成。同时给每个粒子添加一个颜色。

效果:

生成了很多五颜六色的点。但跟星星没有关系。给这些点添加贴图。让它更像星星。
完整代码:

效果:

也可以让星星运动起来。想到运动,一般都会想到时间。
通过Threejs的Clock
获取时间。

通过clock.getDelta()每一帧的间隔时间,或者使用clock.getElapsedTime() 方法来获取从创建 Clock 开始到到现在经过的时间(单位:s)。

优化:我们可以把创建星星的代码提取出来,放到一个函数或类中。这样可以重复使用,更灵活,比如可以将贴图,尺寸作为参数传进去,这样就给星星帖不同的图,设置不同的尺寸。
Threejs-创建一个星空和星系 - 索引