数据可视化大屏项目开发中，会遇到一些效果需要，比如实现一个太阳系的效果，或者实现一个地球自转的效果，今天通过threejs来实现一个地球自转的效果实例。
项目是使用vue+vite来开发的，所以首先我们需要安装一下threejs
安装threejs依赖
pnpm i three...
yekong
1年前 (2023-10-11)
喜欢
threejs 3d地图粒子效果项目中，我们需要下钻效果，准备了地图数据实现了河北省从省到市的下钻效果实例。
在线演示地址
threejs 3d地图粒子效果下钻版 - 河北省
效果截图
下钻效果
threejs 3d地图粒子效果河北省下钻到石家庄市效果图
threejs 3...
yekong
1年前 (2023-10-11)
喜欢
threejs 3d地图粒子效果项目中，我们需要下钻效果，准备了地图数据实现了河南省从省到市的下钻效果实例。
在线演示地址
threejs 3d地图粒子效果下钻版 - 河南省
效果截图
下钻效果
threejs 3d地图粒子效果河南省下钻到郑州市效果图
threejs 3d...
yekong
1年前 (2023-10-11)
喜欢
threejs 3d地图粒子效果实例，可以结合threejs 3d地图实现省份下钻实例实现下钻。
演示实例
threejs 3d地图粒子效果
其他实例
带下钻实例的地图效果
threejs 3d地图粒子效果下钻版 - 江西省
threejs 3d地图粒子效果下钻版 - 河北省
t...
yekong
1年前 (2023-10-09)
喜欢
dat.gui.js说白了就是一个前端js库，对HTML、CSS和JavaScript进行了封裝，学习开发的 时候，借助dat.gui.js可以快速创建控制三维场景的U交互界面，你打开课件中案例源码体验一下就能感受到。
学习dat.guijs也不仅仅是为了学习dat.gui.js...
yekong
1年前 (2023-10-06)
喜欢
threejs项目中，会遇到浏览器宽高变化的情况，这时候我们需要考虑屏幕变化后，画布能够跟随适配。
代码
这里使用的是vue3 获取指定div的宽高来渲染画布。
window.addEventListener('resize', () => {
// 重置相机宽高比
...
yekong
1年前 (2023-10-06)
喜欢
通过scale进行缩放
我们通过scale.set来控制网格模型的缩放
cube.scale.set(2, 2, 2)
父元素的缩放
当父元素缩放后，子元素会在父元素缩放的基础上再对自身进行缩放
cube.scale.set(2, 2, 2)
parentCube.scale...
yekong
1年前 (2023-10-05)
喜欢
通过positon设置物体的位置
我们可以通过设置网格模型的position来控制网格的位置，如下图，我们通过cube.position.x = 50让网格模型沿着x轴移动了50，如果我们需要修改其他轴的话，只需要修改对应的x y z所对应的值就可以了。
// 1. 创建几何体:...
yekong
1年前 (2023-10-05)
喜欢
数据可视化大屏项目开发中经常会遇到需要渲染饼状图的情况，有时候平面饼状图不能满足我们想要的效果了，我们就需要创建更复杂的比如3d饼状图效果。今天我们用threejs来实现一个3d饼状图效果。
开发环境
开发环境我们选择nodejs16
框架
vue3 vite js
three版...
yekong
1年前 (2023-10-05)
喜欢
threejs 3d机房渲染实例，鼠标划过机柜实现提示，地面动态效果等。
项目框架
vue3 + vite + js
项目运行环境
nodejs 16
threejs版本
"three": "^0.152.0",
threejs 3d机房...
yekong
1年前 (2023-10-04)
喜欢
