美文网首页
基于threejs中秋佳节之际带你遨游星空🌃

基于threejs中秋佳节之际带你遨游星空🌃

作者: 南城FE | 来源:发表于2022-09-09 18:09 被阅读0次

海上生明月,天涯共此时。又是一年中秋时,回想上一次赏月已是那遥远的童年时光,忙碌使我们忘却了假日应有的舒缓。今天在这假期即将开始的时候,让我们用代码来过个节。

今天的主题是基于threejs画出月球环绕地球运动的效果,并增加飞跃星空的感觉,如封面图所示。

球体绘制

首先绘制出地球和月球,基于SphereBufferGeometry类绘制三维球体,参数如下:

参数 描述
radius 该属性定义球体的半径,默认值是50
widthSegments 该属性指定竖直方向上的分段数,段数越多,球体的表面越光滑,默认值是8,最小值是3
heightSegments 该属性指定水平方向上的分段数,段数越多,球体的表面越光滑,默认值是6,最小值是2
phiStart 该属性用来指定从x轴的什么位置开始绘制,取值范围是0到2*π,默认值0
phiLength 该属性用来指定从phiStart开始画多少,默认2*π(画整球)
thetaStart 该属性用来指定从y轴的什么位置开始绘制,取值范围是0到2*π,默认值0
thetaLength 该属性用来指定从thetaStart开始画多少,默认2*π(画整球)

首先在网上找一张地球平面图,此处只需要用到前面三个参数即可new THREE.SphereBufferGeometry(10, 50, 50),效果图如下:

image.png image.png

月球图类似,只是会相对地球绘制的球体会小一些。

球体动画

然后是给两个球体增加动画的效果,地球本身的自转效果,月球围绕地球环绕运动的效果。

地球自转效果比较简单,只需要不断修改地球实例的y轴的值即可。

planet.rotation.y += 0.002;

月球比较复杂,除开自转的同时还需增加一个环线运动效果,这里增加一个t值,默认为0,在动画运动函数中不断增加t值,并结合数学三角函数实现环绕效果。

moon.rotation.y -= 0.007;
moon.position.x = 15 * Math.cos(t) + 0;
moon.position.z = 20 * Math.sin(t) - 35;
t += 0.015;

最终动画的效果如下所示:

2022-09-09 16.43.57.gif

星空轨迹

只有两个球体运动相对单调,所以再增加星空运动的轨迹提示氛围感。由于星星是不断运动飞出屏幕之外的,所以我们要有重新绘制的机制。

绘制星星

let lineTotal = 1000;
let linesGeometry = new THREE.BufferGeometry();
linesGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * lineTotal), 3));
linesGeometry.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * lineTotal), 1));
let l_positionAttr = linesGeometry.getAttribute("position");
let l_vertex_Array = linesGeometry.getAttribute("position").array;
let l_velocity_Array = linesGeometry.getAttribute("velocity").array;

for (let i = 0; i < lineTotal; i++) {
    let x = THREE.MathUtils.randInt(-100, 100);
    let y = THREE.MathUtils.randInt(10, 100);
    if (x < 7 && x > -7 && y < 20) x += 14;
    let z = THREE.MathUtils.randInt(0, -300);

    l_vertex_Array[6 * i + 0] = l_vertex_Array[6 * i + 3] = x;
    l_vertex_Array[6 * i + 1] = l_vertex_Array[6 * i + 4] = y;
    l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = z;

    l_velocity_Array[2 * i] = l_velocity_Array[2 * i + 1] = 0;
}
let starsMaterial = new THREE.LineBasicMaterial({
    color: "#ffffff",
    transparent: true,
    opacity: 0.5,
    fog: false
});
let lines = new THREE.LineSegments(linesGeometry, starsMaterial);
linesGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
scene.add(lines);

增加动画及重置

for (let i = 0; i < lineTotal; i++) {
    l_velocity_Array[2 * i] += 0.0049;
    l_velocity_Array[2 * i + 1] += 0.005;

    l_vertex_Array[6 * i + 2] += l_velocity_Array[2 * i];
    l_vertex_Array[6 * i + 5] += l_velocity_Array[2 * i + 1];

    if (l_vertex_Array[6 * i + 2] > 50) {
        l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = THREE.MathUtils.randInt(-200, 10);
        l_velocity_Array[2 * i] = 0;
        l_velocity_Array[2 * i + 1] = 0;
    }
}

星空背景动画

正常的星空背景都会有一些星云,在此基础上再增加一张背景图的运动使之更加真实。星空背景本质也是一个球体,只是半径相对较大,肉眼看不出来。

const textureSphereBg = loader.load('https://xxx.jpg');
textureSphereBg.anisotropy = 16;
const geometrySphereBg = new THREE.SphereBufferGeometry(50, 32, 32);
const materialSphereBg = new THREE.MeshBasicMaterial({
    side: THREE.BackSide,
    map: textureSphereBg,
    fog: false
});
sphereBg = new THREE.Mesh(geometrySphereBg, materialSphereBg);
sphereBg.position.set(0, 50, 0);
scene.add(sphereBg); 

然后在整体的动画函数中修改不同方向的数值,使之感觉游荡在太空中的感觉。

sphereBg.rotation.x += 0.002;
sphereBg.rotation.y += 0.002;
sphereBg.rotation.z += 0.002;

最后

整体实现功能就结束了,里面用到大量的threejs的相关API,有兴趣的同学可以去研究研究,最后的完整代码如下:

https://code.juejin.cn/pen/7141241609026273321

参考

https://codepen.io/isladjan/pen/zYqLxeG

看完如果觉得有趣,记得点赞收藏起来。说不定哪天就用上啦~
最后祝大家中秋快乐,假期玩得开心~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

相关文章

  • 基于threejs中秋佳节之际带你遨游星空🌃

    海上生明月,天涯共此时。又是一年中秋时,回想上一次赏月已是那遥远的童年时光,忙碌使我们忘却了假日应有的舒缓。今天在...

  • 我带你遨游世界

    我带你遨游世界

  • 水彩--星空遨游

    让我在星空里遨游 星星为我哼唱摇篮曲 我如此心平气和 恍惚我就是这唯一

  • 去不了灿烂星空?快看这里,带你遨游灿烂星空!

    星空,是很多人向往的。 现在,看星空,却成了一种奢侈。 想看看星空,却去不了清新的大自然。 想向别人炫耀,却只能在...

  • 带你遨游绿洲

    度小满绿洲是度小满金融(原百度金融or有钱花)推出的一款全新区块链应用,致力于打造基于区块链生态的金融服务平台,由...

  • D3.js

    D3.js 为什么学习D3 D3.js和threejs的应用场景完全不一样。threejs主要应用与基于webGL...

  • 骑上骏马去星空遨游

    圆月下海浪飘摇着 梦想的波涛在你脑海里翻滚 平凡的生活需要梦想推动 我们在梦幻的世界里 原来的原来 那古老的岁月中...

  • 亲爱的孩子,你好!

    不如带你遨游诗海, 带你遨游诗海不如一起浪迹天涯! 在天涯的那一个角落, 有我珍藏着对你深深的爱! 平日里, 我总...

  • shader

    首先threejs基于webgl的,而webgl又是OpenGL ES 的。Shader其实就是一段执行在GPU上...

  • 2022-06-01简书日更的第一个儿童节快乐-线上环游世界

    如果说,世界地图能够带你遨游地球空间,那么世界地质图就能够带你遨游地球的时间。 这两周,我一直在做一个解读地质图,...

网友评论

      本文标题:基于threejs中秋佳节之际带你遨游星空🌃

      本文链接:https://www.haomeiwen.com/subject/jxlznrtx.html