html5中文学习网

您的位置: 首页 > html5教程 > 入门教程 » 正文

这是html5中WebGL的演示

[ ] 已经帮助:人解决问题

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

(责任编辑:)
优惠活动
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助