three.js实现世界地图线条绘制文档说明

概况如下:

1、MeshLine绘制世界地图平面线条地图;

效果图如下:

初始化场景、相机、渲染器,设置相机位置。

// 初始化场景
var scene = new THREE.Scene();
// 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄像机视锥体长宽比,
// 第三个参数为摄像机视锥体近端面,第四个参数为摄像机视锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设置相机位置,对应参数分别表示x,y,z位置
camera.position.set(0, 0, 400);
var renderer = new THREE.WebGLRenderer({
	  alpha: true,
	  antialias: true
});

设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。

// 设置窗口尺寸,第一个参数为宽度,第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);

绘制世界地图平面线条方法

// 绘制世界地图线条函数
var drawWorldLine = function (pos, identify) {
	var geometry = new THREE.Geometry();
	pos.forEach(function (item) {
		var v = new THREE.Vector3(item[0], item[1], 0);
		geometry.vertices.push(v);
	})
	// 定义线条
	var line = new MeshLine();
	line.setGeometry(geometry);
	// 定义线条材质
	var material = new MeshLineMaterial({
		color: worldLineColor,
		lineWidth: worldLineWidth
	})
	// 绘制地图
    lineGeometryObj['lineGeometry' + identify] = new THREE.Mesh(line.geometry, material);
    // 将地图加入场景
    scene.add(lineGeometryObj['lineGeometry' + identify])
}

世界地图通过position值来实现位置的确认,动画使用requestAnimationFrame来实现。

// 执行函数
var render = function () {
	scene.rotation.x = -0.8;
    renderer.render(scene, camera);
    orbitcontrols.update();
    requestAnimationFrame(render);
}

预览地址:朵朵视野-Three.js实现世界地图线条绘制

下载地址:朵朵视野-Three.js实现世界地图线条绘制