你的位置:首页 > 网页设计

[网页设计]HTML5模仿逼真地球自转


查看效果:http://hovertree.com/texiao/html5/8.htm


给我一个支点,我就可以撬动地球 阿基米德



下载 http://hovertree.com/down/h/earthhovertree.htm

代码如下:

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml" ="en"><head><title>html5 canvas让地球转动起来 - 何问起</title><base target="_blank" /><script type="text/javascript" src="http://hovertree.com/texiao/html5/8/clay.min.js"></script><script type="text/javascript">function Earth() {var stage = new Clay.Stage(800, 600);var world = stage.getWorld();var camera = stage.getCamera();camera.set(0,0,0);camera.setResolution(800, 600);camera.setTarget(new Clay.Vector(-100,0,100));window.onresize = function() {stage.resizeTo(800,600);};window.onresize();Clay.Collada.load('http://hovertree.com/texiao/html5/8/earth.', function (scene) {scene.init(stage);var earth = new Clay.Texture('http://hovertree.com/texiao/html5/8/earthmap1k.jpg', stage);var clouds = new Image();clouds.src = 'http://hovertree.com/texiao/html5/8/earthclouds1k.png';var dark = new Image();dark.src = 'http://hovert'+'ree.com/texiao/html5/8/darkside.png';var waiting = setInterval(function(){if (earth.complete && clouds.complete && dark.complete){clearInterval(waiting);play();}}, 1000);function play() {var shape = world.getShapes()[0];shape.setMaterial(earth);var x, y, z, t = Math.PI/4, r = 0, tick = 0.01, radius = 200;var ttx = earth.canvas.getContext('2d');var base = earth.image;var wind = 0;stage.addEvent('enterframe', function(){ttx.drawImage(base, 0,0);var pos = (++wind)%1000;ttx.drawImage(clouds, pos, 0);ttx.drawImage(clouds, pos-1000, 0);ttx.drawImage(dark, 0,0);t += tick;x = -100 + Math.sin(t) * radius;z = 100 + Math.cos(t) * radius;y = Math.cos(t/3) * 50camera.set(x, y, z);});stage.run();}});}window.addEventListener('load', function(){new Earth();}, false); </script><style type="text/css">html, body {width: 100%;height: 100%;margin: 0;padding: 0;position: relative;background: black;}.canvas3D {background: black;position: absolute;left: 0;top: 0;}.earthhovertree{z-index:4321;position:fixed;left:789px;color:white;height:1234px}a{color:white}</style></head><body><div class="earthhovertree"><h3>给我一个支点,我就可以撬动地球 阿基米德</h3><h3>给我一个HTML5浏览器,我就能转动地球 何问起</h3><a href="http://hovertree.com">首页</a><a href="http://hovertree.com/texiao/">特效</a><a href="http://hovertree.com/hvtart/bjae/dubjwt12.htm">原文</a><a href="http://hovertree.com/texiao/html5/7.htm">时钟</a><a href="http://hovertree.com/texiao/css/12.htm">登录</a><a href="http://hovertree.com/texiao/css/8.htm">打火机</a><a href="http://hovertree.com/texiao/html5/6.htm">玫瑰花</a><a href="http://hovertree.com/texiao/css/9.htm">3D文字</a> <a href="http://hovertree.com/texiao/html5/9.htm">太阳系</a><br />Clay - A 3D engine on canvas<br /><img src="http://hovertree.com/hvtimg/201512/pcmkj3ib.png" alt="阿基米德" /></div><div><div id="canvas">您的浏览器不支持canvas,请使用支持HTML5的浏览器查看本页。何问起 hovertree.com</div></div></body></html>

更多: http://www.cnblogs.com/roucheng/p/texiao.html