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

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

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

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="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.xml', 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) * 50
camera.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

HTML5模仿逼真地球自转的更多相关文章

  1. HTML5 + CSS3 实现地球绕太阳公转

    使用的是正面视角,主要是用 HTML5 + CSS3 来实现,JS只是用来画图. test.html: <!DOCTYPE html> <html> <head> ...

  2. Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果

    Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...

  3. CSS3实现3D地球自转行星公转

    截图效果:实际效果是动态的:地球自西向东自转,行星绕着地球公转,轨道也会转动 HTML页面代码: <!DOCTYPE html> <html lang="en"& ...

  4. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  5. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  6. JS+HTML5的Canvas画图模拟太阳系运转

    查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...

  7. 8个超炫酷仿苹果应用的HTML5动画

    苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...

  8. 14款超时尚的HTML5时钟动画

    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...

  9. 14款形态各异的超时尚HTML5时钟动画

    14款超时尚的HTML5时钟动画(附源码)   时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...

随机推荐

  1. 解读ASP.NET 5 & MVC6系列(6):Middleware详解

    在第1章项目结构分析中,我们提到Startup.cs作为整个程序的入口点,等同于传统的Global.asax文件,即:用于初始化系统级的信息(例如,MVC中的路由配置).本章我们就来一一分析,在这里如 ...

  2. Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏

    一.预备知识—对象的”生“与”死“ (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive() 以上一篇的博文中的“指 ...

  3. Alljoyn之管中窥豹

    Alljoyn之管中窥豹 一.历史: Alljoyn是高通2011年推出的近距离P2P通讯技术,它为分布式应用程序在不同设备中提供了运行环境,特别是移动性.安全性和动态配置,支持Microsoft W ...

  4. 备忘-Android ViewPager 子页监听事件

    @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mListViews ...

  5. Tomcat7基于Redis的Session共享实战一

    本文主要介绍如何使用redis对tomcat7的session进行托管. 1.安装Redisredis安装比较简单,此处略过. 2.配置两个Tomcat在本机上配置两个Tomcat,分别为tomcat ...

  6. Python格式化输出

    今天写程序又记不清格式化输出细节了……= =索性整理一下. python print格式化输出. 1. 打印字符串 print ("His name is %s"%("A ...

  7. GitHub的使用记录

    前言: 该贴为笔者在使用GItHub中的一些使用注意,及Git的基本命令,会一直记录笔者在使用GitHub中可能产生的错误及解决方法(会一直更新中),待一些Git初使用者参考,如果有说明不详细或不对的 ...

  8. webservice返回值为Map类型的处理方法

    在写一个webservice的时候,方法的返回值是一个复杂类型,处理方法是写一个结果类(Javabean)作为返回值.想着webservice方法返回值为Map的没写过,然后就试着写了一个简单的Dem ...

  9. 浅谈ThinkPHP3.2的子域名部署和路由优化(一)

    前言:建立一个网站系统,往往包含多个子网站,例如PC官网,移动端官网,后台管理,数据源自一个相同的数据库,整个架构上,从ThinkPHP来看,可以大体理解为Model(M)是一样的,Controlle ...

  10. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...