three版本
"three": "^0.154.0",
演示地址
Three.js实现太阳系实例
threejs实现一个自转的地球
使用threejs绘制一个可以旋转的地球,为后面的太阳系做准备
threejs创建地球和太阳实例
使...
yekong
1年前 (2023-10-11) 1303℃
0喜欢
之前我们实现threejs实现地球围绕太阳公转轨道,接下来我们就可以绘制太阳系下面的其他行星了。
整理星球
首先我们需要整理星球,各个星球的纹理图,以及星球半径和公转半径,设置基本参数来控制星球半径和公转半径
data() {
return {
K:...
yekong
1年前 (2023-10-11) 907℃
0喜欢
之前我们通过threejs创建地球和太阳实例,距离threejs创建太阳系近了一步,我们有了太阳有了地球,但是目前都是自转,我们需要让地球围绕太阳进行公转。
首先给星球添加标签
上一节,我们只是添加了星球,但是并没有给星球添加名称,这样不容易区分,所以这里我们需要添加一下名称,...
yekong
1年前 (2023-10-11) 1343℃
0喜欢
之前我们通过threejs创建了一个地球,距离threejs创建太阳系近了一步,今天我们在之前的基础上增加一个太阳。
上一节我们已经创建了一个地球,那么这一节我们只需要再增加一个太阳就可以了。我们对上一节的代码进行一下封装,我们将创建网格模型的方法进行封装,3个参数单独分离出来...
yekong
1年前 (2023-10-11) 807℃
0喜欢
数据可视化大屏项目开发中,会遇到一些效果需要,比如实现一个太阳系的效果,或者实现一个地球自转的效果,今天通过threejs来实现一个地球自转的效果实例。
项目是使用vue+vite来开发的,所以首先我们需要安装一下threejs
安装threejs依赖
pnpm i three...
yekong
1年前 (2023-10-11) 1550℃
0喜欢
之前我们实现threejs 太阳系给星球添加文字标注,但是我们还是觉得有点单调,我们再给太阳系添加一点繁星点缀的效果。
给星球添加文字标签,我们使用css2d来实现。
繁星点缀
带有繁星点缀的太阳系效果已经有同学做过了,我们取其中的繁星代码来使用。源地址为:
太阳系繁星背景
i...
yekong
2年前 (2023-04-02) 670℃
0喜欢
之前我们实现threejs 太阳系提高性能 共享Geometry Material,接下来我们给星球来添加文字标注。给星球添加文字标注就是通过css2d给模型添加标注
给星球添加文字标签,我们使用css2d来实现。
标签方法
首先我们创建一个标签方法,用来接收名称
functi...
yekong
2年前 (2023-04-02) 814℃
0喜欢
threejs 绘制太阳系各星球后,我们每一个星球都是单独创建的网格模型,网格模型越多,对资源的消耗也越多,那么如何减少资源的消耗呢?
我们可以通过让多个星球共享同一个网格模型,来减少网格模型,从而减少资源消耗。
星球模型重构
星球模型每次创建都会初始化一个网格模型,为了减少资...
yekong
2年前 (2023-04-02) 608℃
0喜欢
之前我们实现threejs实现地球围绕太阳公转,距离threejs创建太阳系近了一步,地球围绕太阳公转了,我们需要绘制一条线用来表示公转轨道。
创建轨道方法
通过three方法我们可以使用ArcCurve来绘制轨道,我们创建一个绘制轨道的方法
import * as THREE...
yekong
2年前 (2023-03-26) 1062℃
1喜欢