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