查看效果：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. matlab size、numel、length、fix函数的使用，补充nargin

    size():获取矩阵的行数和列数 (1)s=size(A), 当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时矩阵的行数,第二个元素是矩阵的列数.(2)[r,c]=size(A), 当有 ...

  2. jenkins配置源码管理git

    一.首先安装上来jenkins 二.下载安装jenkins的git插件:Git plugin 三.新建一个jenkins项目,选择构建一个自由风格的软件项目: 源码管理选择git,Repository ...

  3. 《HiWind企业快速开发框架实战》（1）框架的工作原理

    <HiWind企业快速开发框架实战>(1)框架的工作原理 1.HiWind架构 HiWind的基本架构如下: 持久层部分:同时为框架本身的业务服务,也为开发人员的自定义业务服务. 逻辑层: ...

  4. 谁能在同一文件序列化多个对象并随机读写(反序列化)？BinaryFormatter、SoapFormatter、XmlSerializer还是BinaryReader

    谁能在同一文件序列化多个对象并随机读写(反序列化)?BinaryFormatter.SoapFormatter.XmlSerializer还是BinaryReader 随机反序列化器 +BIT祝威+悄 ...

  5. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  6. Laravel 5.3 请求处理管道详解

    对于一个Web应用来说,在一个请求真正处理前,我们可能会对请求做各种各样的判断,然后才允许后续处理. 我们通常的做法: Script 01.php Script 02.php 优点:直观,容易理解 缺 ...

  7. CRM/ERP 企业管理软件中常见的七种程序设计模式

    管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1  RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...

  8. 解读sencha touch移动框架的核心架构(二)

    本来这行要详解Ext.extend的,但是发现网站有很详细的,那么就跳过去吧 为保持一个系列的分析,还是先搬过来吧,下章开始分析Ext4.0的新架构 在Java中,我们在实现继承的时候存在下面几个事实 ...

  9. Java之控制反转和依赖注入

    1.简介 依赖注入和控制反转,目的是为了使类与类之间解耦合,提高系统的可扩展性和可维护性,下面通过一个例子来引入这一概念. 2.案例 1)一般情况下的类耦合 Main.java public clas ...

  10. TortoiseGit与github实现项目的上传

    1. 下载并安装相关软件 这里主要涉及的软件包括msysgit和TortoiseGit. msysgit的下载地址:http://msysgit.googlecode.com/files/Git-1. ...