这是html5中WebGL的演示
时间：2014-12-15这是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>
有关HTML5页面在iPhoneX适配问题这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下
html5中canvas图表实现柱状图的示例本篇文章主要介绍了html5中canvas图表实现柱状图的示例，本文使用canvas来实现一个图表，小编觉得挺不错的，现在分享给大家