Signature

试一下WebGL

Aug 30, 2016

无意中逛到一个超炫酷的个人网站:http://mystaticself.com/ (貌似需要翻墙)问了公司的H5才知道实现这样用的是WebGL。

维基百科:WebGL是一项利用JavaScript API渲染交互式3D电脑图形和2D图形的技术,可兼容任何的网页浏览器,无需加装插件。通过WebGL的技术,只需要编写网页代码即可实现3D图像的展示。

本着炫酷故我在的精神,当然要研究一番,但是发现水不是一般深呢,三两天的功夫都不能做到那个大神的程度的十分之一。

接着找到一个封装过的3D的地球API:WebGL Earth 封装的挺简单的,官网也说的比较详细,然后自己玩了一番。

demo

效果图:

代码:

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script>
    	var earth;
    	var marker;
      function initialize() {
        earth = new WE.map('earth_div',{
        	atmosphere:true,
        	sky:true
        });
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
          attribution: '© OpenStreetMap contributors'
        }).addTo(earth);

		marker = WE.marker([31.198248, 121.448596]).addTo(earth);
        marker.bindPopup("<b>Hello world!</b><br>I am here.<br />", {maxWidth: 100, closeButton: true});

        var marker1 = WE.marker([26.053351, 113.037404]).addTo(earth);
        marker1.bindPopup("<b>where I grow up.<br />", {maxWidth: 100, closeButton: true});

        earth.setView([34.262278, 103.628637], 3);
      }
      function flyToMe() {
        earth.panInsideBounds([31.056144060646687, 31.38522435978879, 120.78966784638101, 122.19440192910949])
        //earth.panTo([31.198248, 121.448596]);
        marker.openPopup();
      }
      function back() {
      	//earth.setView([34.262278, 103.628637], 3);
      	earth.panInsideBounds([10.32268236188567, 48.86931220325214, 63.53559837081185, 143.72167565826413])
      	marker.closePopup();
      	console.log(earth.getBounds());
      }
    </script>
    <style>
      html, body{padding: 0; margin: 0;}
      #earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
      #buttons {position: absolute; top:50px; left: 50px;}
    </style>
    <title>欧阳晗-WebGL Earth API: Hello World</title>
  </head>
  <body onload="initialize()">
  	<div id='wx_logo' style='margin:0 auto;display:none;'>
    	<img src="../favicon.jpg" />
	</div>
    <div id="earth_div"></div>
    <div id="buttons">
      <input type="button" value="Fly to Me" onclick="flyToMe();" style="width:120px;height:40px;border:2px #9999FF dashed;"><br><br>
      <input type="button" value="back" onclick="back();" style="width:120px;height:40px;border:2px #9999FF dashed;"><br>
    </div>
  </body>
</html>
Share: