基于WebGL的三维地形渲染

1.生成WebMap页面

#!/usr/bin/env python

# -*- coding: utf-8 -*-

import subprocess

from jinja2 import Environment, FileSystemLoader

# Create our DEM

#将DEM数据转化为ENVI的bin格式（一个头文件xml与一个数据文件bin）

# use gdal_translate command to create an image to store elevation values

# -scale from 0 meters to 2625 meters

#     stretch all values to full 16bit  0 to 65535

# -ot is output type = UInt16 unsigned 16bit

# -outsize is 200 x 200 px

# -of is output format ENVI raster image .bin file type

# then our input .tif with elevation

# followed by output file name .bin

subprocess.call("gdal_translate -scale 0 2625 0 65535 "

                "-ot UInt16 -outsize 200 200 -of ENVI "

                "../../ch07/geodata/dem_3857.tif "

                "../geodata/whistler2.bin")

#Jinja2是基于python的模板引擎

# create our Jinja2 HTML

# create a standard Jinja2 Environment and load all files

# located in the folder templates

env = Environment(loader=FileSystemLoader(["../www/templates"]))

# define which template we want to render

template = env.get_template("base-3d-map.html")

# path and name of input 16bit raster image with our elevation values

dem_3d = "../../geodata/whistler2.bin"

# name and location of the output html file we will generate

out_html = "../www/html/ch10-03_dem3d_map.html"

#生成页面

# dem_file is the variable name we use in our Jinja2 html template file

result = template.render(title="Threejs DEM Viewer", dem_file=dem_3d)

# write out our template to the html file on disk

with open(out_html,mode="w") as f:

    f.write(result)

2.将数据与页面复制Web服务器的相关目录下

3.访问WebMap页面

4.相关代码

1）three.min.js

略

2）TerrainLoader.js

/**

 * @author Bjorn Sandvik / http://thematicmapping.org/

 */

THREE.TerrainLoader = function ( manager ) {

    this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;

};

THREE.TerrainLoader.prototype = {

    constructor: THREE.TerrainLoader,

    load: function ( url, onLoad, onProgress, onError ) {

        var scope = this;

        var request = new XMLHttpRequest();

        if ( onLoad !== undefined ) {

            request.addEventListener( 'load', function ( event ) {

                onLoad( new Uint16Array( event.target.response ) );

                scope.manager.itemEnd( url );

            }, false );

        }

        if ( onProgress !== undefined ) {

            request.addEventListener( 'progress', function ( event ) {

                onProgress( event );

            }, false );

        }

        if ( onError !== undefined ) {

            request.addEventListener( 'error', function ( event ) {

                onError( event );

            }, false );

        }

        if ( this.crossOrigin !== undefined ) request.crossOrigin = this.crossOrigin;

        request.open( 'GET', url, true );

        request.responseType = 'arraybuffer';

        request.send( null );

        scope.manager.itemStart( url );

    },

    setCrossOrigin: function ( value ) {

        this.crossOrigin = value;

    }

};

3）TrackballControls.js

/**

 * @author Eberhard Graether / http://egraether.com/

 */

THREE.TrackballControls = function ( object, domElement ) {

    var _this = this;

    var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM: 4, TOUCH_PAN: 5 };

    this.object = object;

    this.domElement = ( domElement !== undefined ) ? domElement : document;

    // API

    this.enabled = true;

    this.screen = { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 };

    this.radius = ( this.screen.width + this.screen.height ) / 4;

    this.rotateSpeed = 1.0;

    this.zoomSpeed = 1.2;

    this.panSpeed = 0.3;

    this.noRotate = false;

    this.noZoom = false;

    this.noPan = false;

    this.staticMoving = false;

    this.dynamicDampingFactor = 0.2;

    this.minDistance = 0;

    this.maxDistance = Infinity;

    this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

    // internals

    this.target = new THREE.Vector3();

    var lastPosition = new THREE.Vector3();

    var _state = STATE.NONE,

    _prevState = STATE.NONE,

    _eye = new THREE.Vector3(),

    _rotateStart = new THREE.Vector3(),

    _rotateEnd = new THREE.Vector3(),

    _zoomStart = new THREE.Vector2(),

    _zoomEnd = new THREE.Vector2(),

    _touchZoomDistanceStart = 0,

    _touchZoomDistanceEnd = 0,

    _panStart = new THREE.Vector2(),

    _panEnd = new THREE.Vector2();

    // for reset

    this.target0 = this.target.clone();

    this.position0 = this.object.position.clone();

    this.up0 = this.object.up.clone();

    // events

    var changeEvent = { type: 'change' };

    // methods

    this.handleResize = function () {

        this.screen.width = window.innerWidth;

        this.screen.height = window.innerHeight;

        this.screen.offsetLeft = 0;

        this.screen.offsetTop = 0;

        this.radius = ( this.screen.width + this.screen.height ) / 4;

    };

    this.handleEvent = function ( event ) {

        if ( typeof this[ event.type ] == 'function' ) {

            this[ event.type ]( event );

        }

    };

    this.getMouseOnScreen = function ( clientX, clientY ) {

        return new THREE.Vector2(

            ( clientX - _this.screen.offsetLeft ) / _this.radius * 0.5,

            ( clientY - _this.screen.offsetTop ) / _this.radius * 0.5

        );

    };

    this.getMouseProjectionOnBall = function ( clientX, clientY ) {

        var mouseOnBall = new THREE.Vector3(

            ( clientX - _this.screen.width * 0.5 - _this.screen.offsetLeft ) / _this.radius,

            ( _this.screen.height * 0.5 + _this.screen.offsetTop - clientY ) / _this.radius,

            0.0

        );

        var length = mouseOnBall.length();

        if ( length > 1.0 ) {

            mouseOnBall.normalize();

        } else {

            mouseOnBall.z = Math.sqrt( 1.0 - length * length );

        }

        _eye.copy( _this.object.position ).sub( _this.target );

        var projection = _this.object.up.clone().setLength( mouseOnBall.y );

        projection.add( _this.object.up.clone().cross( _eye ).setLength( mouseOnBall.x ) );

        projection.add( _eye.setLength( mouseOnBall.z ) );

        return projection;

    };

    this.rotateCamera = function () {

        var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );

        if ( angle ) {

            var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize();

                quaternion = new THREE.Quaternion();

            angle *= _this.rotateSpeed;

            quaternion.setFromAxisAngle( axis, -angle );

            _eye.applyQuaternion( quaternion );

            _this.object.up.applyQuaternion( quaternion );

            _rotateEnd.applyQuaternion( quaternion );

            if ( _this.staticMoving ) {

                _rotateStart.copy( _rotateEnd );

            } else {

                quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );

                _rotateStart.applyQuaternion( quaternion );

            }

        }

    };

    this.zoomCamera = function () {

        if ( _state === STATE.TOUCH_ZOOM ) {

            var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;

            _touchZoomDistanceStart = _touchZoomDistanceEnd;

            _eye.multiplyScalar( factor );

        } else {

            var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;

            if ( factor !== 1.0 && factor > 0.0 ) {

                _eye.multiplyScalar( factor );

                if ( _this.staticMoving ) {

                    _zoomStart.copy( _zoomEnd );

                } else {

                    _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;

                }

            }

        }

    };

    this.panCamera = function () {

        var mouseChange = _panEnd.clone().sub( _panStart );

        if ( mouseChange.lengthSq() ) {

            mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );

            var pan = _eye.clone().cross( _this.object.up ).setLength( mouseChange.x );

            pan.add( _this.object.up.clone().setLength( mouseChange.y ) );

            _this.object.position.add( pan );

            _this.target.add( pan );

            if ( _this.staticMoving ) {

                _panStart = _panEnd;

            } else {

                _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );

            }

        }

    };

    this.checkDistances = function () {

        if ( !_this.noZoom || !_this.noPan ) {

            if ( _this.object.position.lengthSq() > _this.maxDistance * _this.maxDistance ) {

                _this.object.position.setLength( _this.maxDistance );

            }

            if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {

                _this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );

            }

        }

    };

    this.update = function () {

        _eye.subVectors( _this.object.position, _this.target );

        if ( !_this.noRotate ) {

            _this.rotateCamera();

        }

        if ( !_this.noZoom ) {

            _this.zoomCamera();

        }

        if ( !_this.noPan ) {

            _this.panCamera();

        }

        _this.object.position.addVectors( _this.target, _eye );

        _this.checkDistances();

        _this.object.lookAt( _this.target );

        if ( lastPosition.distanceToSquared( _this.object.position ) > 0 ) {

            _this.dispatchEvent( changeEvent );

            lastPosition.copy( _this.object.position );

        }

    };

    this.reset = function () {

        _state = STATE.NONE;

        _prevState = STATE.NONE;

        _this.target.copy( _this.target0 );

        _this.object.position.copy( _this.position0 );

        _this.object.up.copy( _this.up0 );

        _eye.subVectors( _this.object.position, _this.target );

        _this.object.lookAt( _this.target );

        _this.dispatchEvent( changeEvent );

        lastPosition.copy( _this.object.position );

    };

    // listeners

    function keydown( event ) {

        if ( _this.enabled === false ) return;

        window.removeEventListener( 'keydown', keydown );

        _prevState = _state;

        if ( _state !== STATE.NONE ) {

            return;

        } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {

            _state = STATE.ROTATE;

        } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {

            _state = STATE.ZOOM;

        } else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {

            _state = STATE.PAN;

        }

    }

    function keyup( event ) {

        if ( _this.enabled === false ) return;

        _state = _prevState;

        window.addEventListener( 'keydown', keydown, false );

    }

    function mousedown( event ) {

        if ( _this.enabled === false ) return;

        event.preventDefault();

        event.stopPropagation();

        if ( _state === STATE.NONE ) {

            _state = event.button;

        }

        if ( _state === STATE.ROTATE && !_this.noRotate ) {

            _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );

        } else if ( _state === STATE.ZOOM && !_this.noZoom ) {

            _zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

        } else if ( _state === STATE.PAN && !_this.noPan ) {

            _panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

        }

        document.addEventListener( 'mousemove', mousemove, false );

        document.addEventListener( 'mouseup', mouseup, false );

    }

    function mousemove( event ) {

        if ( _this.enabled === false ) return;

        event.preventDefault();

        event.stopPropagation();

        if ( _state === STATE.ROTATE && !_this.noRotate ) {

            _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );

        } else if ( _state === STATE.ZOOM && !_this.noZoom ) {

            _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

        } else if ( _state === STATE.PAN && !_this.noPan ) {

            _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

        }

    }

    function mouseup( event ) {

        if ( _this.enabled === false ) return;

        event.preventDefault();

        event.stopPropagation();

        _state = STATE.NONE;

        document.removeEventListener( 'mousemove', mousemove );

        document.removeEventListener( 'mouseup', mouseup );

    }

    function mousewheel( event ) {

        if ( _this.enabled === false ) return;

        event.preventDefault();

        event.stopPropagation();

        var delta = 0;

        if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9

            delta = event.wheelDelta / 40;

        } else if ( event.detail ) { // Firefox

            delta = - event.detail / 3;

        }

        _zoomStart.y += delta * 0.01;

    }

    function touchstart( event ) {

        if ( _this.enabled === false ) return;

        switch ( event.touches.length ) {

            case 1:

                _state = STATE.TOUCH_ROTATE;

                _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );

                break;

            case 2:

                _state = STATE.TOUCH_ZOOM;

                var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;

                var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;

                _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );

                break;

            case 3:

                _state = STATE.TOUCH_PAN;

                _panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );

                break;

            default:

                _state = STATE.NONE;

        }

    }

    function touchmove( event ) {

        if ( _this.enabled === false ) return;

        event.preventDefault();

        event.stopPropagation();

        switch ( event.touches.length ) {

            case 1:

                _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );

                break;

            case 2:

                var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;

                var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;

                _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy )

                break;

            case 3:

                _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );

                break;

            default:

                _state = STATE.NONE;

        }

    }

    function touchend( event ) {

        if ( _this.enabled === false ) return;

        switch ( event.touches.length ) {

            case 1:

                _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );

                break;

            case 2:

                _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;

                break;

            case 3:

                _panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );

                break;

        }

        _state = STATE.NONE;

    }

    this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );

    this.domElement.addEventListener( 'mousedown', mousedown, false );

    this.domElement.addEventListener( 'mousewheel', mousewheel, false );

    this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox

    this.domElement.addEventListener( 'touchstart', touchstart, false );

    this.domElement.addEventListener( 'touchend', touchend, false );

    this.domElement.addEventListener( 'touchmove', touchmove, false );

    window.addEventListener( 'keydown', keydown, false );

    window.addEventListener( 'keyup', keyup, false );

    this.handleResize();

};

THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );

4）dem3d_map.html

<html lang="en">

<head>

    <title>DEM threejs Browser</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style> body { margin: 0; overflow: hidden; }</style>

</head>

<body>

    <div id="dem-map"></div>

    <script src="../js/three.min.js"></script>

    <script src="../js/TrackballControls.js"></script>

    <script src="../js/TerrainLoader.js"></script>

    <script>

        var width  = window.innerWidth,

            height = window.innerHeight;

        var scene = new THREE.Scene();

        var axes = new THREE.AxisHelper(200);

        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

        camera.position.set(0, -50, 50);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(width, height);

        var terrainLoader = new THREE.TerrainLoader();

        terrainLoader.load('../../geodata/whistler2.bin', function(data) {

            var geometry = new THREE.PlaneGeometry(60, 60, 199, 199);

            for (var i = 0, l = geometry.vertices.length; i < l; i++) {

                geometry.vertices[i].z = data[i] / 65535 * 10;

            }

            var material = new THREE.MeshPhongMaterial({

                color: 0xdddddd,

                wireframe: true

            });

            /*

            //加载纹理

var material = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('../../geodata/whistler_ortho_f.jpg')
});

            var plane = new THREE.Mesh(geometry, material);

            scene.add(plane);

        });

        var controls = new THREE.TrackballControls(camera);

        document.getElementById('dem-map').appendChild(renderer.domElement);

        render();

        function render() {

            controls.update();

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

    </script>

</body>

</html>

基于WebGL的三维地形渲染的更多相关文章

基于WebGL的三维的物联网平台技术
参加工作三年了,从一个搞调试的民工进阶为程序员,收获还是有那么一点的.慢慢讲一些. 去年在网上发现了https://hightopo.com/cn-index.html图扑软件的基于WebGL的三维j ...
无插件，跨平台，基于WebGL的三维地球来了！！！
用户通过浏览器即可递交数据到同一个地理信息系统中,操作简单,跨平台 ,无插件,可扩展,高效共享 ,完美匹配超大数据量发布! 近年来,随着计算机图形学.虚拟现实.卫星遥感.航空摄影.激光雷达等技术的迅猛 ...
WebGIS 利用 WebGL 在 MapboxGL 上渲染 DEM 三维空间数据
毕业两年,一直在地图相关的公司工作,虽然不是 GIS 出身,但是也对地图有些耳濡目染:最近在看 WebGl 的东西,就拿 MapboxGL 做了一个关于 WebGL 的三维数据渲染的 DEMO 练手. ...
PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎
Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现.PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备.此 ...
OSGEARTH三维地形开源项目
第一章 OSGEarth介绍第二章 OSGEarth编译环境配置 OSGEarth的编译环境配置随着版本的不同.运行平台的不同,也有很大的差异.本章主要以Windows XP SP3(x86 ...
基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器
前言今天找到了 HT 的官网里的 Demo 网站( http://www.hightopo.com/demos/index.html ),看的我眼花缭乱,目不暇接. 而且 HT 的用户手册,将例子和 ...
ArcGIS制图技巧系列（2）地形渲染
ArcGIS制图技巧系列(2)地形渲染 by 李远祥 DEM数据是常见的地形数据,在GIS常规的制图中,DEM一直扮演着增强效果.由于带有高程值,DEM在很多情况下都在三维中显示,但这里主要介绍的是在 ...
基于SceneControl的三维GIS开发
在ArcGIS体系中,三维开发包括两种:基于Scene的三维开发和基于Globe的三维开发. 由上图可以看出,两种开发的接口都很相似,掌握了Scene开发会相对容易的过渡到Globe开发中. 正如上图 ...
《逐梦旅程 WINDOWS游戏编程之从零开始》笔记9——游戏摄像机&三维地形的构建
第21章游戏摄像机的构建之前的程序示例,都是通过封装的DirectInput类来处理键盘和鼠标的输入,对应地改变我们人物模型的世界矩阵来达到移动物体,改变观察点的效果.其实我们的观察方向乃至观察点 ...

随机推荐

SQL Server 2014新特性探秘(1)-内存数据库
简介 SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了.去年我再西雅图参加SQL PASS Summit 2012的开幕式时,微软就宣布 ...
Android之startService()和bindService()区别
1. 生命周期: startService()方式启动,Service是通过接受Intent并且会经历onCreate()和onStart().当用户在发出意图使之销毁时会经历onDestroy(), ...
php语句
判断变量的方法: 例: $a=""; var_dump(empty($a)); 输出的结果为true 若$a=10; var_dump(empty($a)); 输出falst 若没 ...
Thrift简单实践
0.什么是RPC RPC(Remote Procedure Call - 远程过程调用),是通过网络从远程计算机上请求服务,而不需要了解底层网路技术的细节.简单点说,就是像调用本地服务(方法)一样调用 ...
Web APi之认证（Authentication）及授权（Authorization）【一】（十二）
前言无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请求信息的认证以及认证成功过后对于访问页面的授权是极其重要的,用两节来重点来讲述这二者,这一节首先讲述一下关于这二 ...
我的Objective-C系列文章
做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都是在斟酌之后所写的,每篇博客所粘贴的代码都是经过调试运行无 ...
【记录】JS 获取图片原始尺寸－防止图片溢出
示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...
DSO Framer Control Object 操作word文件
<1>DSO Framer Control Object 实现加载word文件的不可编辑 axFramerControl1.Open(OldPath); this.axFramerCont ...
JavaScript的三种工业化调试方法
JavaScript的三种工业化玩法软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...
Mac OS X平台下QuickLook开发教程
一.引言 Quick Look技术是Apple在Mac OS X 10.5中引入的一种用于快速查看文件内容的技术.用户只需要选中文件单击空格键即可快速查看文件内容,可以在不打开文件的情况下快速浏览内容 ...

基于WebGL的三维地形渲染

基于WebGL的三维地形渲染的更多相关文章

随机推荐

热门专题