基于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类来处理键盘和鼠标的输入,对应地改变我们人物模型的世界矩阵来达到移动物体,改变观察点的效果.其实我们的观察方向乃至观察点 ...

随机推荐

Struts.xml中Action的method与路径的三种匹配方法
原文 http://blog.csdn.net/woshixuye/article/details/7734482 首先我们有一个Action——UserAction public class Us ...
一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘
我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...
本地maven仓库使用及配置
本地仓库的创建下载 nexus-2.11.4-01-bundle.zip 解压并运行C:\nexus-2.11.4-01-bundle\nexus-2.11.4-01\bin\jsw\windows ...
教你如何塑造JavaScript牛逼形象
如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
C++运算符重载
C++运算符重载基本知识重载的运算符是具有特殊名字的函数,他们的名字由关键字operator和其后要定义的运算符号共同组成. 运算符可以重载为成员函数和非成员函数.当一个重载的运算符是成员函数时, ...
POST方式提交表单时，后台接受实体如果继承了父类，将无法映射表单对应数据
引言刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...
【JVM】JVM系列之Class文件（三）
一.前言随着我们学习的不断深入,我相信读者对class文件很感兴趣,class文件是用户编写程序与虚拟机之前的桥梁,程序通过编译形成class文件,class文件之后会载入虚拟机,被虚拟机执行,下面 ...
WPF语音播放MediaPlayer
private MediaPlayer player; public MainWindow() { InitializeComponent(); player = new MediaPlayer(); ...
【C#进阶系列】24 运行时序列化
序列化是将对象或者对象图(一堆有包含关系的对象)转换成字节流的过程.而反序列化就是将字节流转为对象或对象图. 主要用于保存.传递数据,使得数据更易于加密和压缩. .NET内建了出色的序列化和反序列化支 ...
Hadoop JAVA 开发说明
作为Hadoop程序员,他要做的事情就是: 1.定义Mapper,处理输入的Key-Value对,输出中间结果.2.定义Reducer,可选,对中间结果进行规约,输出最终结果.3.定义InputFor ...

基于WebGL的三维地形渲染

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

随机推荐

热门专题