webGL使用threejs实现白雾效果
通过Fog实现雾
// 设置雾化效果，雾的颜色和背景颜色相近，这样远处网格线和背景颜色融为一体
scene.fog = new THREE.Fog(0xffffff, -100, 1000);
背景
通过和雾类似的背景来和雾搭配使用。
...
yekong
1年前 (2023-07-21)
喜欢
Three.js的Raycaster（射线投射器）是一个用于检测场景中物体与射线相交的工具。它可以用于实现鼠标拾取、碰撞检测、交互式选择等功能。Raycaster通过从指定的原点（如摄像机位置）发射射线，来检测射线与场景中物体的相交情况。Raycaster射线投射在3d模型中使用...
yekong
1年前 (2023-07-21)
喜欢
THREE.Fog 是 Three.js 中用于实现线性雾化效果的类。它的用法、参数和一个简单的使用实例如下：
用法：
创建 THREE.Fog 对象：
const fog = new THREE.Fog(color, near, far);
参数：
color：表示雾化的颜...
yekong
1年前 (2023-07-21)
喜欢
课程概述
《物联网Web3D可视化WebGL》讲解如何实现物联网Web3D可视化效果，比如你想实现一个粮仓或园区的Web3D可视化效果，主要使用WebGL的3D引擎Threejs开发实现。
学习本课程有前端基础即可，如果了解three.js更好
学习建议：一定要结合每节课提供的...
yekong
1年前 (2023-07-20)
喜欢
Three.js和D3.js都是JavaScript库，但它们在功能和使用场景上有很大的区别。
Three.js
这是一个轻量级且功能强大的3D库，主要用于WebGL编程。它提供了很多实用的功能，可以方便的创建和显示3D内容。例如，你可以用Three.js创建3D游戏，或者在网页...
yekong
1年前 (2023-07-04)
喜欢
在之前我们使用echarts绘制的可以下钻的3d地图，vue echarts-gl 3d地图从中国下钻到市级实例，但是echarts-gl绘制出来的3d地图自定义程度不够，我们想要更加灵活的自定义3d地图，所以选择使用threejs来实现3d地图，今天我们来使用threejs来实...
yekong
1年前 (2023-07-03)
喜欢
在之前的threejs 绘制地图高度不受经纬度影响，我们解决了高度问题，但是又衍生出了新的问题，就是地图出现凹陷的情况，我们需要处理一下这种情况。
这种情况可能是由于地图区域在渲染时，高度数值与其他区域相比过低。为了使地图区域不再看起来像凹下去的一块，可以对高度数值进行一定的调整...
yekong
1年前 (2023-07-03)
喜欢
在使用threejs绘制地图的时候，threejs 在vue3项目中绘制3d地图效果实例，最近想着做一个地图下钻的效果，但是地图的高度会受到经纬度的影响，进而导致绘制出来的地图高度会跟着受影响，所以我们需要处理一下。
在使用Three.js进行地理空间数据的可视化时，经纬度会影响...
yekong
1年前 (2023-07-03)
喜欢
在threejs 在3d地图中绘制css2d地名中，我们给地图添加了css2d标签来标注地名，今天我们在之前的基础上来实现鼠标移入地图高亮，并显示对应区域名称。
效果截图
鼠标移入高亮染效果视频
射线拾取
我们通过射线拾取来获取地图信息，并进行高亮，显示当前区域名称。
/**...
yekong
1年前 (2023-07-02)
喜欢
vue3 中使用Threejs绘制地图的时候，会有下钻的需要，在实际开发中使用下钻需要重绘，如果不销毁旧场景就直接绘制会导致内存占用进而越来越卡顿，所以这里我们要先实现场景的销毁。
在 Three.js 中，当你想要销毁一个场景（scene）或者释放内存时，可以通过以下方法来实现...
yekong
1年前 (2023-07-01)
喜欢
