这是html5中WebGL的演示，让我们与他人分享爱您发送短消息。每次您进入它使用不同的位置，新的爱情点被添加到全球。让世界更明亮的地方与你的朋友分享！
源文件：
部分代码：
<！DOCTYPE html>
<html>
<head>
<title>地理位置爱</ title>
<meta charset =“ utf-8”>
<script src =“ js / jquery-1.8.2.min .js“> </ script>
<script src =” js / three.js“> </ script>
<script src =” js / Detector.js“> </ script>
<script src =” js / Stats.js “> </ script>
<script src =” js / Tween.js“> </ script>
<script src =” js / ShaderExtras.js“> </ script>
<script src =”js / EffectComposer.js“> </ script>
<script src =” js / ShaderPass.js“> </ script>
<script src =” js / MaskPass.js“> </ script>
<script src =“ js / RenderPass.js”> </ script>
<script src =“ js / BloomPass.js”> </ script>
<script src =“ js / FilmPass.js”> </ script>
<script type =“ text / javascript” src =“ js / main.js”> </ script>
<link href =“ style.css” rel =“ stylesheet” type =“ text / css” />
</ head>
<body >
<div id =“ container”> </ div>
<section class =“ box” id =“ messageBox”>
<div id =“ message”>无论您身在何处，总能使世界变得更明亮</ div>
<div id =“ dist”> </ div>
<div id =“ shareSwitcher”> <a>点击与他人分享您的爱意！</a> </ div>
<div id =“ likeIt”> <a href="https://developer.mozilla.org/en-US/demos/detail/geolocation-love">像在DevDerby上的演示</a> </ div>
< / section>
<section class =“ box” id =“ shareBox”>
<div id =“ form”>
<h1>向世界输入您的消息</ h1>
<textarea id =“ messageArea”> </ textarea>
<输入id =“ submitShare” type =“ button” value =“获取共享链接” />
</ div>
</ section>
</ div>
</ div>
<script type =“x-shader / x-vertex“ id =” earthVertex“>
变化的vec3 vNormal；
变化的vec2 vUv；
无效的main（）{
gl_Position = projectionMatrix * modelViewMatrix * vec4（position，1.0）;
vNormal = normalize（normalMatrix * normal）;
vUv = uv;
}
</ script>
<script type =“ x-shader / x-fragment” id =“ earthFragment”>
均匀的sampler2D纹理；
变化vec3 vNormal;
变化的vec2 vUv；
void main（）{
vec3diffuse = texture2D（texture，vUv）.xyz;
浮点强度= 1.15-dot（vNormal，vec3（0.0，0.0，1.0））;
vec3气氛= vec3（1.0，1.0，1.0）* pow（强度，3.0）;
gl_FragColor = vec4（漫射+气氛，1.0）;
}
</ script>
<script type =“ x-shader / x-vertex” id =“
变化vec3 vNormal;
void main（）{
vNormal = normalize（normalMatrix * normal）;
gl_Position = projectionMatrix * modelViewMatrix * vec4（position，1.0）;
}
</ script>
<script type =“ x-shader / x-fragment” id =“ atmosphereFragment”>
不同的vec3 vNormal；
void main（）{
浮动强度= pow（0.8-点（vNormal，vec3（0，0，1.0）），10.0）;
gl_FragColor = vec4（1.0，1.0，1.0，1.0）*强度;
}
</ script>
</ body>
</ html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML