标签:threejs实现太阳系

threejs

Three.js实现太阳系实例

Three.js实现太阳系实例
three版本 "three": "^0.154.0", 演示地址 Three.js实现太阳系实例 threejs实现一个自转的地球 使用threejs绘制一个可以旋转的地球,为后面的太阳系做准备 threejs创建地球和太阳实例 使...

yekong 1年前 (2023-10-11) 1303℃ 0喜欢

threejs

threejs 绘制太阳系各星球

threejs 绘制太阳系各星球
之前我们实现threejs实现地球围绕太阳公转轨道,接下来我们就可以绘制太阳系下面的其他行星了。 整理星球 首先我们需要整理星球,各个星球的纹理图,以及星球半径和公转半径,设置基本参数来控制星球半径和公转半径 data() { return { K:...

yekong 1年前 (2023-10-11) 907℃ 0喜欢

threejs

threejs实现地球围绕太阳公转

threejs实现地球围绕太阳公转
之前我们通过threejs创建地球和太阳实例,距离threejs创建太阳系近了一步,我们有了太阳有了地球,但是目前都是自转,我们需要让地球围绕太阳进行公转。 首先给星球添加标签 上一节,我们只是添加了星球,但是并没有给星球添加名称,这样不容易区分,所以这里我们需要添加一下名称,...

yekong 1年前 (2023-10-11) 1343℃ 0喜欢

threejs

threejs创建地球和太阳实例

threejs创建地球和太阳实例
之前我们通过threejs创建了一个地球,距离threejs创建太阳系近了一步,今天我们在之前的基础上增加一个太阳。 上一节我们已经创建了一个地球,那么这一节我们只需要再增加一个太阳就可以了。我们对上一节的代码进行一下封装,我们将创建网格模型的方法进行封装,3个参数单独分离出来...

yekong 1年前 (2023-10-11) 807℃ 0喜欢

threejs

threejs实现一个自转的地球

threejs实现一个自转的地球
数据可视化大屏项目开发中,会遇到一些效果需要,比如实现一个太阳系的效果,或者实现一个地球自转的效果,今天通过threejs来实现一个地球自转的效果实例。 项目是使用vue+vite来开发的,所以首先我们需要安装一下threejs 安装threejs依赖 pnpm i three...

yekong 1年前 (2023-10-11) 1550℃ 0喜欢

threejs

threejs 太阳系添加繁星点缀的背景

threejs 太阳系添加繁星点缀的背景
之前我们实现threejs 太阳系给星球添加文字标注,但是我们还是觉得有点单调,我们再给太阳系添加一点繁星点缀的效果。 给星球添加文字标签,我们使用css2d来实现。 繁星点缀 带有繁星点缀的太阳系效果已经有同学做过了,我们取其中的繁星代码来使用。源地址为: 太阳系繁星背景 i...

yekong 2年前 (2023-04-02) 670℃ 0喜欢

threejs

threejs 太阳系给星球添加文字标注

threejs 太阳系给星球添加文字标注
之前我们实现threejs 太阳系提高性能 共享Geometry Material,接下来我们给星球来添加文字标注。给星球添加文字标注就是通过css2d给模型添加标注 给星球添加文字标签,我们使用css2d来实现。 标签方法 首先我们创建一个标签方法,用来接收名称 functi...

yekong 2年前 (2023-04-02) 814℃ 0喜欢

threejs

threejs 太阳系提高性能 共享Geometry Material

threejs 太阳系提高性能 共享Geometry Material
threejs 绘制太阳系各星球后,我们每一个星球都是单独创建的网格模型,网格模型越多,对资源的消耗也越多,那么如何减少资源的消耗呢? 我们可以通过让多个星球共享同一个网格模型,来减少网格模型,从而减少资源消耗。 星球模型重构 星球模型每次创建都会初始化一个网格模型,为了减少资...

yekong 2年前 (2023-04-02) 608℃ 0喜欢

threejs

threejs绘制地球围绕太阳公转轨道

threejs绘制地球围绕太阳公转轨道
之前我们实现threejs实现地球围绕太阳公转,距离threejs创建太阳系近了一步,地球围绕太阳公转了,我们需要绘制一条线用来表示公转轨道。 创建轨道方法 通过three方法我们可以使用ArcCurve来绘制轨道,我们创建一个绘制轨道的方法 import * as THREE...

yekong 2年前 (2023-03-26) 1062℃ 1喜欢