随笔分类 -  three.js

three.js+vue3三维地图下钻地图，实现下钻全国-》省份-》城市-》区县
摘要：案例效果截图： 具体场景和功能，详见b站视频： https://www.bilibili.com/video/BV1Kb421q7c4/?vd_source=7d4ec9c9275b9c7d16afe9b4625f636c 案例逻辑代码： <template> <div id="chinaMap"> 阅读全文
posted @ 2024-11-02 19:15 JackGIS 阅读(2612) 评论(3) 推荐(0)
three.js+vue智慧社区web3d数字孪生三维地图
摘要：案例效果截图如下： 具体案例场景和功能，详见b站视频： https://www.bilibili.com/video/BV1Bb421E7WL/?vd_source=7d4ec9c9275b9c7d16afe9b4625f636c 案例场景逻辑代码： <template> <div id="whol 阅读全文
posted @ 2024-11-02 19:10 JackGIS 阅读(940) 评论(0) 推荐(0)
three.js+vue污水处理厂数字孪生平台智慧城市web3d
摘要：案例效果截图如下: 具体三维场景和功能，详见b站视频： https://www.bilibili.com/video/BV1sZ421g7DZ/?vd_source=7d4ec9c9275b9c7d16afe9b4625f636c 主场景三维逻辑代码如下： <template> <div class 阅读全文
posted @ 2024-07-13 22:49 JackGIS 阅读(729) 评论(0) 推荐(0)
three.js+vue实现酷炫三维地图web3d大屏可视化GIS地图
摘要：三维地图效果如下，gif压缩导致画质变差了，哈哈 具体案例功能和效果，可以看b站视频： https://www.bilibili.com/video/BV1EM4m1y7Tb/?vd_source=7d4ec9c9275b9c7d16afe9b4625f636c three.js+vue代码如下： 阅读全文
posted @ 2024-06-22 15:29 JackGIS 阅读(9101) 评论(3) 推荐(1)
智慧城市three.js数字孪生三维展示城市建筑轮廓数据获取方法分析和AI算法方案剖析
摘要：一、目前世面上有的2种免费方案是 1、OpenStreetMap开源网站下载， 2、blender的gis插件获取城市建筑轮廓。 缺点是：只有重点城市和省会城市，一些地级市或者县级市基本没有数据。 二、利用QGIS软件或者Arcgis软件处理遥感影像数据获取。 方法流程： 1、利用地图下载器，下载t 阅读全文
posted @ 2024-01-14 22:58 JackGIS 阅读(530) 评论(0) 推荐(0)
three.js案例-web3d三维地图大屏炫酷3D地图下钻地图-附源码
摘要：炫酷3D地图效果如下： 代码注释非常详细： create() { // 添加雾,随着距离线性增大,只能看到一个小是视野范围内的场景，地图缩小很多东西就会看不清 //this.scene.fog = new THREE.Fog(0x191919, 30, 70) this.getCenterPoint 阅读全文
posted @ 2023-11-28 11:12 JackGIS 阅读(1073) 评论(0) 推荐(1)
three.js教程8-渲染器WebGLRenderer和前端UI界面
摘要：1、html的UI交互界面与Canvas画布叠加 需求：把threejs Cavnas画布和HTML元素叠加布局，在canvas上添加按钮，通过按钮点击修改canvas场景。 // canvas画布绝对定位 renderer.domElement.style.position = 'absolute 阅读全文
posted @ 2023-02-09 21:05 JackGIS 阅读(1437) 评论(0) 推荐(0)
three.js教程7-PBR材质与环境贴图CubeTextureLoader
摘要：1、PBR材质 PBR是基于物理的渲染(physically-based rendering)。模拟物体表面的反射算法。 Three.js提供了两个PBR材质相关的类MeshStandardMaterial和MeshPhysicalMaterial MeshPhysicalMaterial是Mesh 阅读全文
posted @ 2023-02-09 21:04 JackGIS 阅读(3485) 评论(0) 推荐(0)
three.js教程6-加载外部三维模型gltf
摘要：1、建模软件 3D美术常用的三维建模软件，比如Blender、3damx、C4D、maya等等 Blender(轻量、免费、开源) 3damx C4D maya 机械相关：SW、UG等 建筑相关：草图大师、revit 2、GLTF格式简介 (Web3D领域JPG) Khronos Group组织20 阅读全文
posted @ 2023-02-09 20:51 JackGIS 阅读(12924) 评论(0) 推荐(2)
three.js教程5-几何体顶点UV坐标、纹理贴图TextureLoader
摘要：1、纹理贴图 纹理贴图，是给MeshLambertMaterial等材质一些纹理图片，以达到更好的视觉效果。 使用方法：通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。 co 阅读全文
posted @ 2023-02-09 19:59 JackGIS 阅读(3721) 评论(0) 推荐(0)
three.js教程4-Group层级模型
摘要：1、组对象Group、层级模型-形成树状结构 //创建两个网格模型mesh1、mesh2 const geometry = new THREE.BoxGeometry(20, 20, 20); const material = new THREE.MeshLambertMaterial({color 阅读全文
posted @ 2023-02-08 21:00 JackGIS 阅读(1811) 评论(0) 推荐(1)
three.js教程3-模型对象、材质material
摘要：1、Object3D的position和scale是三维向量Vector3 因此模型的位置和缩放等变化，也是使用Vector3的属性和方法实现，查询文档Vector3。 三维向量Vector3有xyz三个分量，查看three.js文档你可以知道Vector3对象具有属性.x、.y、.z，Vector 阅读全文
posted @ 2023-02-08 20:52 JackGIS 阅读(933) 评论(0) 推荐(0)
three.js教程2-几何体BufferGeomety顶点
摘要：1、网格模型(三角形概念) 网格模型Mesh其实就一个一个三角形(面)拼接构成。使用使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。 正面三角形：顶点逆时针形成 反面三角形：顶点顺时针形成 con 阅读全文
posted @ 2023-02-07 21:34 JackGIS 阅读(1530) 评论(0) 推荐(1)
three.js教程1补充-gui.js库使用
摘要：gui.js是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建可手动控制三维场景的UI交互界面，打开API文档中案例体验一下就能感受到。 （1）引入gui.js gihtub地址：https://github.com/dataa 阅读全文
posted @ 2023-02-07 11:22 JackGIS 阅读(4730) 评论(0) 推荐(0)
three.js教程1-快速入门
摘要：1、项目开发环境引入threeJs 如果采用的是Vue + threejs或React + threejs技术栈，threejs就是一个js库，直接通过npm命令行安装就行。 npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本) // 比如安装148版本 npm install 阅读全文
posted @ 2023-02-07 11:19 JackGIS 阅读(9020) 评论(0) 推荐(1)
three.js介绍和学习资料说明
摘要：1、three.js能做什么 Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎，它主要应用于游戏开发、动画设计、智慧城市、数字孪生、模型展示等。下面几个是在智慧城市和数字 阅读全文
posted @ 2023-01-14 21:28 JackGIS 阅读(3230) 评论(0) 推荐(0)