![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
3D可视化
雁来过
这个作者很懒,什么都没留下…
展开
-
three.js实现球体地球城市模拟迁徙
1、SphereGeometry实现自转的地球;2、THREE.ImageUtils.loadTexture加载地图贴图材质;3、THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换;4、轨迹中根据分段数与相应国家gdp值来实现城市标记。原创 2019-08-28 22:32:25 · 1401 阅读 · 1 评论 -
three.js实现球体地球2018年全球GDP前十国家标记
three.js实现球体地球2018年全球GDP前十国家标记概况如下:1、SphereGeometry实现自转的地球;2、THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换;3、ImageUtils加载球体贴图;4、THREE.CubicBezierCurve3 创建标记立体轨迹,调用getPoints将轨迹分成需要的段...原创 2019-08-31 15:29:09 · 478 阅读 · 0 评论 -
three.js实现世界3d地图
概况如下:1、THREE.Shape绘制世界地图平面地图;2、THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸,实现3d效果;效果图如下:预览地址:three.js实现世界3d地图初始化场景、相机、渲染器,设置相机位置,初始化光源,光源采用HemisphereLight,设置光源位置为场景中心位置,并将光源加入场景中。// 初始化场景var scene = new...原创 2019-09-03 22:20:42 · 2821 阅读 · 0 评论 -
three.js实现世界地图城市迁徙图
概况如下:1、THREE.CylinderGeometry,THREE.SphereGeometry绘制地图上的标记;2、THREE.CanvasTexture用于加载canvas绘制的字体;3、THREE.Shape,MeshLine用于实现平面地图;4、THREE.ExtrudeGeometry用于将绘制的平面地图沿Z轴拉伸,出现3d效果;5、THREE.CubicBezierCur...原创 2019-09-04 23:23:38 · 2468 阅读 · 0 评论 -
three.js通过canvas实现球体世界平面地图
概况如下:1、SphereGeometry实现自转的地球;2、THREE.CatmullRomCurve3实现球体线条地图点确定;3、THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换;4、MeshLine用于绘制线条;5、canvas用于绘制球体世界地图贴图,通过THREE.CanvasTexture引入。效果图如下...原创 2019-09-05 23:11:56 · 3579 阅读 · 3 评论 -
深入理解three.js中平面光光源RectAreaLight
前言之前有深入讲解过Three.js中光源,在那篇文章的最后也说了由于平面光光源的特殊性,所以会单独拿出来讲解,这篇文章会详细的讲解平面光光源的特性和实际应用该如何使用。首先,平面光光源从一个矩形平面上均匀地发射光线,这种光源的主要应用场景是模拟明亮的窗户或者条状灯光光源,实际在开发家具建模项目中会有广泛应用。平面光光源的最大特点事不支持阴影,我们无法通过设置RectAreaLight.cas...原创 2019-09-18 22:52:30 · 1187 阅读 · 0 评论