【中秋快乐】如何用three.js实现我的太空遐想3D网页

最新推荐文章于 2023-06-30 10:56:32 发布
置顶 最新推荐文章于 2023-06-30 10:56:32 发布
阅读量9.8k 收藏 99
点赞数 86
分类专栏： JavaScript从入门到精通 three.js 文章标签： javascript 3d 前端 three.js
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/m0_61243965/article/details/126568141
版权
这篇博客在中秋佳节之际，介绍如何使用three.js实现3D地球、月球和小火箭的场景，并设计它们的自转和公转轨迹。通过创建三维空间场景、添加摄像机、设置模型材质，博主详细阐述了3D模型的创建过程，并展示了最终的太空运行轨迹效果。项目源码已开源在GitCode上，邀请读者一同参与完善和创新。
摘要由CSDN通过智能技术生成

 

目录

创作背景

功能分解

创建3d地球

创建3d月球

 创建3d小火箭

设计地球自转轨迹和月球、小火箭旋转的行星轨道

1.地球的自转轨迹

2.月球的公转轨迹

3.小火箭的公转轨迹

最终效果展现

 彩蛋

创作背景

        马上又是一年中秋佳节到来之际，中秋佳节自古以来就是团圆，思乡的节日，佳节当晚一边赏着月色，一边品尝着美味的月饼，和亲人好友诉说着想念之情 ，悠闲惬意之情油然而生。

        古人有诗云：”明月几时有，把酒问青天，不知天上宫阙，今夕是何年？“  这是古人对月亮和太空的理解，那么当现代的我们抬头望向星空，望向月亮的时候，你的太空遐想是什么呢？正好博主最近也在研究3维方面技术栈，来吧，这篇文章会从0和你一起用three.js 来实现：你心目中的地球和月球，并且在漫天的繁星中画出行星运转轨迹，并保留有一个小彩蛋哦

了解本专栏 订阅专栏 解锁全文 超级会员免费看
言程序plus
关注
  • 86
    点赞
  • 踩
  • 99
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 139
    评论
专栏目录
订阅专栏
前端小玩意儿：用three.js开发的手机太空穿越VR游戏，特效非常猛哦
qq_43623970的博客
05-19 448
hello，今天给大家用three.js开发了一个手机太空穿越VR游戏，确实不容易，小编的头发又少了一大截。Ok，废话少说，先看效果。 一、效果图 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Three.js Mobile VR Sonic</title> <link rel="stylesheet" href="css/s
threejs-galaxy:我是如何用three.js创造一个宇宙的？
05-16
threejs-galaxy 我是如何用three.js创造一个宇宙的？ part_02: 皮肤+自转+公转匹配/矫正 part_01: 万有引力+碰撞+奇怪的向心力
threeJs-multiverse-Test:我试图用三个J制作一个充满星系的空洞宇宙
05-10
Three.js旅程 设置 下载 运行以下命令： # Install dependencies (only the first time) npm install # Run the local server at localhost:8080 npm run dev # Build for production in the dist/ directory npm run build
three.js 制作简单行星运转动画
02-06
three.js制作简单动画，模拟月球绕地球公转。渲染器为CanvasRenderer
Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴
程序员秋风的博客
07-11 1835
最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。今天我打算用 Three.js 来实现个人 VR 电影展厅，整个过程非常的简单，哪怕不会编程都可以轻易掌握。想要顶级的视觉盛宴，最重要的肯定是得要一块大屏幕，首先我们就先来实现一块大屏幕...
【源代码】中秋画圆，画的越圆得分越高，基于fabric和vue.js实现
09-06
【源代码】中秋画圆，画的越圆得分越高，基于fabric和vue.js实现
中秋贺卡中秋快乐PPT模板.pptx
01-14
封面应简洁大方，突出主题，可以选用中秋元素的插图或照片作为背景，配以“中秋快乐”等祝福语。 3. **字体选择**：选择清晰易读的字体，同时考虑到节日氛围，可以选用一些有中国传统文化特色的书法字体。标题和副...
花好月圆，中秋快乐PPT模板.zip
07-15
这是一套《花好月圆，中秋快乐》PPT模板，共11张。 本幻灯片模板使用了红色中国古典花边作为边框。PPT封面使用了悬挂了灯笼的梅花树与金灿灿的月亮作为背景图片，情满中秋四个书法字，让PPT模板非常贴切中秋节主题...
2013年中秋节快乐祝福网页.rar
07-04
还有几天就是2012年中秋节，很多站长都在给自己的网站添加节日的庆祝气氛。同时也给自己的网站增加流量，都有做中秋节...我整理了一份比较简单实用的中秋节送祝福网页源码。 只需要解压放到网站目录下，就可以传递。
八月十五中秋快乐PPT贺卡.zip
07-15
标题中的“八月十五中秋快乐PPT贺卡.zip”表明这是一个与中秋节相关的PPT模板压缩文件，用于制作庆祝中秋节的贺卡。这类文件通常包含设计精美的幻灯片，可以帮助用户快速创建出具有节日氛围的电子贺卡。八月十五是...
three.js+html5 Canvas酷炫宇宙黑洞粒子动画特效
06-11
一款给人科幻视觉效果的three.js+html5 Canvas酷炫宇宙黑洞粒子动画特效，网页模拟宇宙黑洞动画特效。
artastra:这是一个通过threejs轻松生成行星和其他天体的艺术表现形式的库
05-23
ArtAstra.js 测试版 这是一个用于轻松生成行星和其他天体的艺术表现形式的库。 它可以在three.js上运行。 安装 npm i artastra 用法 调用Create函数来制作任何星球： import * as THREE from 'three' ; import ArtAstra from 'artastra' ; const AA = ArtAstra ( THREE ) ; //Initialize the library var scene = new THREE . Scene ( ) ; const EarthRadius = 1 ; //Set scale of the models const position = new THREE . Vector3 ( 150 , 0 , 0 ) ; //Where you want your planet co
three-js html5 Canvas酷炫宇宙黑洞粒子动画特效.zip
07-11
代码片段：   float random(float val) {       return fract(sin(val) * seed);     }     vec2 random2(vec2 st, float seed){         st = vec2( dot(st,vec2(127.1,311.7)),                   dot(st,vec2(269.5,183.3)) );         return -1.0 2.0*fract(sin(st)*seed);     }     float random2d(vec2 uv) {       return fract(                 sin(                   dot( uv.xy, vec2(12.9898, 78.233) )                 ) * seed);     }
threeJS-Sistema-Solar:具有行星、卫星和太阳的简单太阳系
06-05
三JS太阳系 使用 ThreeJS 制作行星、卫星和太阳的简单太阳系动画
Three.js进阶篇之7 - 3D宇宙特效
跟随技术的脚步-linolzhang的专栏
03-28 5108
body {margin: 0;} body, html {overflow: hidden;} body, html, .canvasbox {width: 100%;height: 100%;} /* 坐标系 */ .zuobiaoxi {position: absolute;display: table;right: 3px;top: 3px;font-size: 12px;z-index:
threejs地球、星空、世界轮廓绘制、飞线、坐标涟漪 、旋转动画（上篇）
星宇大前端
01-07 7274
一个基于threejs实现的漂亮的3d地球，干货，干的你咽不下去。
揭开Three.js的面纱，浅谈Three.js
BradenHan的专栏
03-26 601
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。 Three.js 是一款WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
Three.js太阳系案例
06-03
通过一个太阳系小案例对three.js进一步进行学习，适用于初次接触three.js引擎的开发者。
three.js利用点材质打造星空
最新发布
jieyucx的博客
06-30 862
这里只是做个简单的介绍，详细的介绍大家可以看看THREE.BufferGeometry及其属性介绍是Three.js中的一个重要的类，用于管理和操作几何图形数据。它是对的一种更新和改进，通过直接操作二进制数组来提高绘制性能。在Three.js中，几何图形数据通常存储在顶点属性数组中。传统的THREE.Geometry使用JavaScript数组来存储这些数据，而THREE.BufferGeometry则使用更高效的TypedArray（如Float32Array、Uint16Array等）。
评论 139
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

言程序plus

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

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

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

打赏作者

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

抵扣说明：

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

余额充值