vue + three.js 3D地图效果“图“ (二)

下面请看VCR
在这里插入图片描述
在这里插入图片描述
妈耶 真的是那谁妈妈给那谁开门 那谁到家了
(这个源教程地址我找不到了)
我从网上找教程看到的图片效果图 根据链接找到B站 通过B站留言 要到了源码 虽然只有四川省的 其他要付费
在这里插入图片描述
本地可以运行 代码不多 还有注解 但是不耽误我看不懂 等之后捋完文档再看看
在这里插入图片描述

需要源码的话 预览地址里有作者的二维码 可自行添加~

目前作者只分享四川地图源码
其他预览咨询地址:
https://mf.gitee.io/globe-map-demos/#/globeMap
https://mf.gitee.io/sayhello-site/#/three-3d-map-zj
https://mf.gitee.io/sayhello-site/#/three-3d-map-china

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VueThree.js是两个不同的技术,Vue是一个前端框架,而Three.js是一个基于WebGL的JavaScript库,用于创建3D形。使用VueThree.js可以很方便地实现3D地图场景的展示。 在使用VueThree.js创建3D地图时,首先需要设置场景(Scene)、相机(Camera)、光源(Lighting)、对象(Object)等元素,并将它们组合在一起。可以使用Vue的组件化方式来构建这些元素,然后将它们添加到场景中。在设置相机时,需要考虑到相机的位置、方向、FoV等参数,以便实现视角的变换和缩放等操作。 当创建好场景、相机、光源和对象后,可以使用Three.js提供的材质(Material)、纹理(Texture)、几何体(Geometry)等API,来实现对象的样式和效果。例如,可以使用纹理片来为建筑物、地面等对象添加贴效果,也可以使用材质来控制对象的表面和反射等特性。 除了基础的场景元素和对象设置外,还可以使用Three.js提供的控制器(Controller)来实现用户交互。例如,可以使用鼠标控制器(OrbitControls)来实现用户通过鼠标操作旋转和缩放场景,或使用触摸控制器(TouchControls)来实现在移动设备上的交互。 最后需要注意的是,3D地图的数据源通常比较大,需要进行优化和压缩。可以使用VueThree.js提供的工具和插件,来实现数据的处理和性能的优化。例如,可以使用Vue的懒加载和异步组件,来减少初始化时间和提高页面加载速度;也可以使用Three.js的GeometryUtils和TextureLoader等API,来优化数据加载和渲染性能。 总之,使用VueThree.js可以很方便地实现3D地图场景的展示,并且可以通过组件化与API的方式实现更加灵活和丰富的效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值