
three.js导入外部json文件生成世界地图
·
//定义外部文件加载器
var loader=new THREE.FileLoader();
loader.setResponseType('json');
//生成一个组,能让所有的国家模型添加进去
var mapGroup=new THREE.Group();
scene.add(mapGroup);
//异步加载包含世界各个国家的坐标文件
loader.load('../../../public/world.json',function(data){
//访问所有国家边界坐标数据
data.features.forEach(area => {
//type的值为Polygon表示国家只有一个轮廓
if(area.geometry.type=='Polygon'){
//声明一个空数组用于存放顶点坐标数据
var pointArr=[];
//因为只有一个轮廓所以下标是0
area.geometry.coordinates[0].forEach(elem=>{
//把坐标拆开分别写成一个三维向量z是0,作为顶点坐标数据
pointArr.push(elem[0],elem[1],0);
});
//调用函数生成模型添加到模型组里面
mapGroup.add(makeMesh(pointArr))
}else if (area.geometry.type === "MultiPolygon") {
// 解析所有封闭轮廓边界坐标area.geometry.coordinates
area.geometry.coordinates.forEach(polygon => {
var pointArr = [];//边界线顶点坐标
polygon[0].forEach(elem => {
pointArr.push(elem[0], elem[1], 0);
});
mapGroup.add(makeMesh(pointArr));//国家边界轮廓插入组对象mapGroup
});
}
;
});
});
function makeMesh(pointArr){
//创建一个Buffer类型几何体对象
var geometry=new THREE.BufferGeometry();
//类型数组创建顶点数据
var vertices=new Float32Array(pointArr);
// 创建属性缓冲区对象
var attribute=new THREE.BufferAttribute(vertices,3);//3个为一组,表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position=attribute;
//用线模型首尾相连渲染
var material=new THREE.LineBasicMaterial({
color:0x00ffff
})
//关联模型和材质
var line=new THREE.LineLoop(geometry,material);
//返回完整的模型
return line
}
这块内容其实主要只有两步
第一步,处理数据把数据转成three可以转换的坐标数组(一个国家一个数组能够完成连线);
第二步,封装一个根据坐标数组生成类型数组再通过线模型进行连线
效果图:
世界地图json文件
更多推荐
所有评论(0)