1、思路
参考threejs绘制dem数据的技术路线
2、代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ZMapViewer By ThreeJS</title> <style> body { margin: none; background-color: #CCC; } #container { /*background-color: #044675;*/ background-color: #CCC; width: 100%; height: 100%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .item { display: inline-block; margin: 10px; width: 100px; height: 30px; text-align: center; margin: 0 auto; vertical-align: middle; line-height: 30px } #btns { position: absolute; top: 10; right: 10; } </style> </head> <body> <div id="container"></div> <div id="btns"> </div> <script src="libs/jquery-2.1.3//jquery.min.js"></script> <script src="libs/StringUtil.js"></script> <script src="libs/threejs95/three.js"></script> <script src="libs/threejs95/OrbitControls.js"></script> <script src="libs/geo/ZMapJsonLoader.js"></script> <script type="text/javascript"> var controls = null; var renderer = null; var scene = null; var camera = null; var pointLight = null; var lightAnimationRadius = 0; var step = 0; function animate() { /************************* RENDER LOOP ****************************/ requestAnimationFrame(animate); // about 60fps // call the rendere to update the view render(); } // a seprate function than animate, incase we dont want animation // but we still want to refresh the renderer when OrbitControling function render() { // rotateLight(); controls.update(); renderer.render(scene, camera); } function rotateLight() { step += 0.01; pointLight.position.x = 0 + (lightAnimationRadius * (Math.cos(step))); pointLight.position.z = 0 + (lightAnimationRadius * Math.sin(step)); } function init() { /*********************** BASIC SETTING ****************************/ // get the DOM element to attach to // - assume we've got jQuery to hand var $container = $('#container'); // set the scene size var WIDTH = $container.width(); var HEIGHT = $container.height(); // set some camera attributes var VIEW_ANGLE = 45; var ASPECT = WIDTH / HEIGHT; var NEAR = 0.1; var FAR = 10000; // create a WebGL renderer, camera // and a scene renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR ); // adding the controls controls = new THREE.OrbitControls(camera, renderer.domElement); // necessary only if there is no animation //controls.addEventListener( 'change', render ); scene = new THREE.Scene(); // add the camera to the scene scene.add(camera); // the camera starts at 0,0,0 // so pull it back camera.position.z = 300; camera.position.y = 100; // start the renderer renderer.setSize(WIDTH, HEIGHT); // attach the render-supplied DOM element $container.append(renderer.domElement); /**************************** LIGHT *******************************/ function addLight() { // add subtle ambient lighting var ambiColor = "#444444"; var ambientLight = new THREE.AmbientLight(ambiColor); // scene.add(ambientLight); // create a point light pointLight = new THREE.PointLight(0xFFFF00); lightAnimationRadius = Math.min(ZMapJsonLoader.getSceneWidth(), ZMapJsonLoader.getSceneHeight()) / 2; // set its position pointLight.position.x = lightAnimationRadius; pointLight.position.y = ZMapJsonLoader.getScaledDemDeltaHeight() * 4; pointLight.position.z = lightAnimationRadius; // add to the scene // scene.add(pointLight); } // 坐标轴模块 var size = 300; // - （可选）表示轴的线的大小。默认值为1 var axesHelper = new THREE.AxesHelper(size); scene.add(axesHelper); } /******************* OBJECT AND MATERIALS *************************/ function addMesh(dataUrl, color) { var ZMapLoader = new ZMapJsonLoader(dataUrl); var geometry = new THREE.Geometry(); ZMapLoader.buildGeometry(geometry); //ZMapJsonLoader.adjustPosition(); console.log(geometry); var material = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.6, side: THREE.DoubleSide, wireframe: true }); // var material = new THREE.MeshLambertMaterial({ // var material = new THREE.MeshPhongMaterial({ // color: 0xFFFFFF, // emissive: 0x000000, // darkest color // side: THREE.DoubleSide, // shading: THREE.FlatShading, // vertexColors: THREE.FaceColors, // mandatory for face color changing // // wireframe: true // }); geometry.translate(-(ZMapLoader.getSceneWidth() / 2), 0, -(ZMapLoader.getSceneHeight() / 2)); geometry.computeFaceNormals(); // var material = new THREE.MeshBasicMaterial({color:0xffccff}); var meshDEM = new THREE.Mesh(geometry, material); scene.add(meshDEM); return meshDEM } init(); animate(); var layer1 = addMesh("data/Top_Etive.json", 0x00B2EA); var layer2 = addMesh("data/Top_Ness.json", 0xFFB2EA); var layer3 = addMesh("data/Top_Tarbert.json", 0x0FFFFA); var Layers = []; Layers.push("Top_Etive"); Layers.push("Top_Ness"); Layers.push("Top_Tarbert"); var GeometryLayers = { "Top_Etive": layer1, "Top_Ness": layer2, "Top_Tarbert": layer3, } </script> <script> var arrColor = ["0x00B2EA", "0xFFB2EA", "0x0FFFFA"]; var all = "" var html = ['<span class="item" onclick="Show(this)" style="background:', '">', '</span>']; arrColor.forEach(function (item, index) { var h = html[0] + ("#" + item.toString().substr(2)).colorRgb() + html[1] + Layers[index] + html[2]; all += h }) document.getElementById('btns').innerHTML = all; function Show(me) { //alert($(me).text()); GeometryLayers[$(me).text()].material.visible = !GeometryLayers[$(me).text()].material.visible; } </script> </body> </html>
3、效果
