| 这是html5中WebGL的演示，让我们与他人分享爱您发送短消息。每次你进入它使用不同的位置，新的爱情点被添加到全球。让世界更明亮的地方与你的朋友分享！ 源文件： 部分代码： <!DOCTYPE html> <html> <head> <title>Geolocation love</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">No matter where you are, always make the world brighter place</div> <div id="dist"></div> <div id="shareSwitcher"><a>Click to share your love with others!</a></div> <div id="likeIt"><a href="https://developer.mozilla.org/en-US/demos/detail/geolocation-love">Like this demo on DevDerby</a></div> </section> <section class="box" id="shareBox"> <div id="form"> <h1>Type your message to the world</h1> <textarea id="messageArea"> </textarea> <input id="submitShare" type="button" value="get share link" /> </div> </section> </div> </div> <script type="x-shader/x-vertex" id="earthVertex"> varying vec3 vNormal; varying vec2 vUv; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); vNormal = normalize( normalMatrix * normal ); vUv = uv; } </script> <script type="x-shader/x-fragment" id="earthFragment"> uniform sampler2D texture; varying vec3 vNormal; varying vec2 vUv; void main() { vec3 diffuse = texture2D( texture, vUv ).xyz; float intensity = 1.15 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ); vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 ); gl_FragColor = vec4( diffuse + atmosphere, 1.0 ); } </script> <script type="x-shader/x-vertex" id="atmosphereVertex"> varying 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"> varying vec3 vNormal; void main() { float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 10.0 ); gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity; } </script> </body> </html> |