之前我们实现threejs实现地球围绕太阳公转轨道,接下来我们就可以绘制太阳系下面的其他行星了。
整理星球
首先我们需要整理星球,各个星球的纹理图,以及星球半径和公转半径,设置基本参数来控制星球半径和公转半径
data() {
return {
K:...
yekong
7个月前 (10-11) 646℃
0喜欢
之前我们通过threejs创建地球和太阳实例,距离threejs创建太阳系近了一步,我们有了太阳有了地球,但是目前都是自转,我们需要让地球围绕太阳进行公转。
首先给星球添加标签
上一节,我们只是添加了星球,但是并没有给星球添加名称,这样不容易区分,所以这里我们需要添加一下名称,...
yekong
7个月前 (10-11) 963℃
0喜欢
之前我们通过threejs创建了一个地球,距离threejs创建太阳系近了一步,今天我们在之前的基础上增加一个太阳。
上一节我们已经创建了一个地球,那么这一节我们只需要再增加一个太阳就可以了。我们对上一节的代码进行一下封装,我们将创建网格模型的方法进行封装,3个参数单独分离出来...
yekong
7个月前 (10-11) 646℃
0喜欢
数据可视化大屏项目开发中,会遇到一些效果需要,比如实现一个太阳系的效果,或者实现一个地球自转的效果,今天通过threejs来实现一个地球自转的效果实例。
项目是使用vue+vite来开发的,所以首先我们需要安装一下threejs
安装threejs依赖
pnpm i three...
yekong
7个月前 (10-11) 1292℃
0喜欢
threejs 3d地图粒子效果项目中,我们需要下钻效果,准备了地图数据实现了河北省从省到市的下钻效果实例。
在线演示地址
threejs 3d地图粒子效果下钻版 - 河北省
效果截图
下钻效果
threejs 3d地图粒子效果河北省下钻到石家庄市效果图
threejs 3...
yekong
7个月前 (10-11) 594℃
1喜欢
threejs 3d地图粒子效果项目中,我们需要下钻效果,准备了地图数据实现了河南省从省到市的下钻效果实例。
在线演示地址
threejs 3d地图粒子效果下钻版 - 河南省
效果截图
下钻效果
threejs 3d地图粒子效果河南省下钻到郑州市效果图
threejs 3d...
yekong
7个月前 (10-11) 483℃
0喜欢
threejs 3d地图粒子效果实例,可以结合threejs 3d地图实现省份下钻实例实现下钻。
演示实例
threejs 3d地图粒子效果
其他实例
带下钻实例的地图效果
threejs 3d地图粒子效果下钻版 - 江西省
threejs 3d地图粒子效果下钻版 - 河北省
t...
yekong
7个月前 (10-09) 1054℃
2喜欢
dat.gui.js说白了就是一个前端js库,对HTML、CSS和JavaScript进行了封裝,学习开发的 时候,借助dat.gui.js可以快速创建控制三维场景的U交互界面,你打开课件中案例源码体验一下就能感受到。
学习dat.guijs也不仅仅是为了学习dat.gui.js...
yekong
7个月前 (10-06) 995℃
0喜欢
threejs项目中,会遇到浏览器宽高变化的情况,这时候我们需要考虑屏幕变化后,画布能够跟随适配。
代码
这里使用的是vue3 获取指定div的宽高来渲染画布。
window.addEventListener('resize', () => {
// 重置相机宽高比
...
yekong
7个月前 (10-06) 224℃
0喜欢
通过scale进行缩放
我们通过scale.set来控制网格模型的缩放
cube.scale.set(2, 2, 2)
父元素的缩放
当父元素缩放后,子元素会在父元素缩放的基础上再对自身进行缩放
cube.scale.set(2, 2, 2)
parentCube.scale...
yekong
7个月前 (10-05) 236℃
0喜欢