文档章节

Two.js实现卫星环绕动画效果

呵呵闯
 呵呵闯
发布于 2016/06/22 23:26
字数 666
阅读 103
收藏 0

第一种方法:分组法(推荐)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>video</title>
  <style>
     #playground{
      border:3px solid #aaa;
      width: 1200px;
      height: 600px;
      margin: auto;
     }
     
  </style>
  <script src="two.js"></script>
 </head>
 <body>
    <div id="container"></div>
    <script>
    /*先画出太阳,太阳外的地球体系想要围着太阳转就要建一个地球组,
    然后改变translation,调整小组旋转中心,知道新的原点坐标即旋转中心后
    根据新的原点绘制地球组(地球,月球轨道,月球小组);
    月球小组围绕太阳旋转道理相同,以地球在太阳为原点的体系中调整月球小组的旋转
    中心,即月球小组.translation调整为地球所在体系中的地球坐标(-200,0),
    绘制月球小组,相对于地球而言,月球坐标为(-地球轨道坐标,0);
    巧用translation、坐标体系、相对思想;*/
    var elem = document.getElementById('container');
    var two = new Two({ width: 600, height: 600 }).appendTo(elem);
    //创建太阳
    var sun = two.makeCircle(300,300,100);
    //sun.stroke="translation";
    sun.noStroke();
    sun.fill = '#e80';
    //创建地球轨道
    var earthOrbit = two.makeCircle(300,300,200);
    earthOrbit.noFill();
    //创建地球(根据新的原点绘制)
    var earth = two.makeCircle(-200,0,50);
    earth.stroke = 'transparent';
    earth.fill = '#18a';
    //创建月球轨道
    var moonOrbit = two.makeCircle(-200,0,80);
    moonOrbit.noFill();
    //创建月球
    var moon = two.makeCircle(-80,0,20);
    moon.noStroke();
    moon.fill = '#cdf';
    //创建月球组(月球+兔子+兔子轨道)
    
    var moonGroup = two.makeGroup(moon);
    moonGroup.translation.set(-200,0);
    //创建地球组(地球+月球小组+月球轨道)
    var earthGroup = two.makeGroup(earth,moonOrbit,moonGroup);
    //地球组绕着太阳转 => 地球组(0,0)应该在太阳的中心点
    earthGroup.translation.set(300,300);
    //监听每次触发update
    two.bind('update',function(){
      earthGroup.rotation += 1*Math.PI/180;
      moonGroup.rotation+=3*Math.PI/180;
    });
    two.play();//每秒钟60次update
    </script>
 </body>
</html>

第二种: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>video</title>
  <style>
     #playground{
      border:3px solid #aaa;
      width: 1200px;
      height: 600px;
      margin: auto;
     }
  </style>
  <script src="two.js"></script>
 </head>
 <body>
    <div id="playground"></div>
    <script src="sun-earth-moon.js"></script>
 </body>
</html>
    var elem = document.getElementById('playground');
    var two = new Two({ width: 800, height: 600 }).appendTo(elem);
    /*初始化变量*/
    var padding = 100;
    var earthOrbit_r = 200;
    var earthOrbits = earthOrbit_r + padding;//圆心
    var sun_r = 80; 
    var group = two.makeGroup();
    var earthAngle = 0;
    var earth_r=50;
    var distance=30;
    var moonAngle=0;
    /*获取转动目标的坐标变化量*/
    function getPositons(angle,r){
      return {
        x:r*Math.cos(angle * Math.PI / 180),
        y:r*Math.sin(angle * Math.PI / 180)
      };
    }
    /*初始化太阳*/
    var _sun = two.makeCircle(earthOrbits,earthOrbits,sun_r);
    _sun.fill = "red";
    /*初始化地球轨道*/
    var earthOrbit = two.makeCircle(earthOrbits,earthOrbits,earthOrbit_r);
    earthOrbit.noFill();
    earthOrbit.linewidth = 2;
    earthOrbit.stroke = "#efefef";
    group.add(earthOrbit);
    two.update();
    /*初始化地球*/
    var pos = getPositons(earthAngle,earthOrbit_r);
    var earth = two.makeCircle(earthOrbits + pos.x,earthOrbits + pos.y,earth_r);
    earth.stroke = "#444";
    earth.linewidth = 3;
    earth.fill = "blue";
    /*初始化月球轨道*/
    var moonOrbit = two.makeCircle(earth.translation.x,earth.translation.y,earth_r + distance);
    moonOrbit.noFill();
    moonOrbit.linewidth = 2;
    moonOrbit.stroke = "#ccc";
    group.add(moonOrbit);
    /*初始化月球*/
    var pos =getPositons(moonAngle,earth_r + distance);
    var moon = two.makeCircle(earth.translation.x + pos.x,earth.translation.y + pos.y,earth_r/4);
    moon.fill = "#474747";
     /*绑定事件*/
      two.bind('update',function (frameCount){
        /*地球*/
        var pos = getPositons(earthAngle++,earthOrbit_r);
        earth.translation.x = earthOrbits + pos.x;
        earth.translation.y = earthOrbits + pos.y;
        /*月球*/
        var moonPos = getPositons(moonAngle+=5,earth_r + distance);
        moon.translation.x = earth.translation.x + moonPos.x;
        moon.translation.y = earth.translation.y + moonPos.y;
        /*月球轨道*/
        moonOrbit.translation.x = earth.translation.x;
        moonOrbit.translation.y = earth.translation.y;
      });
      two.play();

 

© 著作权归作者所有

共有 人打赏支持
呵呵闯
粉丝 3
博文 77
码字总数 20722
作品 0
深圳
程序员
私信 提问
使用two.js生成的卫星环绕动画效果

来源: GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:Two.Typ...

gbin1
2013/07/12
760
0
24、《每周一点canvas动画》——森林与星海

在上一节《每周一点canvas动画》——3D物理效果中,我们介绍了3维环境下的速度与加速度效果。这一节,我们继续介绍另外两个物理效果:重力和屏幕环绕。 一、重力 三维系统中实现重力效果的方...

qq_39759115
04/17
0
0
VUE+WebPack前端游戏设计:能量气泡的螺旋升腾特效

游戏的虚拟世界里与现实世界总有一一对应之处。例如在现实世界中,你不工作就不会有收入,而在游戏世界里,玩家不挖矿就没有能源,没有能源自然就无法购买道具或建造各种设备,于是游戏就无法...

望月从良
03/20
0
0
android实例源码,渐变图像图片浏览高仿美团!

渐变颜色渐变文字渐变图像GradualshowcolorAndResourse 根据图片高度动态变化的ViewPager android Kotlin开发的一款超简单的图片浏览源码 android多种reveal动画效果 栗子——高仿美团首页分...

莫非有道
2017/11/08
0
0
【转载】10个Web3D可视化精彩案例

1、化学元素周期表 六种排列方式,炫酷动画效果,TWaver 3D轻松实现。 演示地址:http://demo.servasoft.com/che... 2、DNA螺旋图 DNA3D模型,包含几千个球体(几十万个面),高性能渲染,搭...

MonoLog
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

tomcat shutdown.sh不能完合关掉tomcat进程的解决方法

tomcat shutdown.sh不能完合关掉tomcat进程的解决方法 2017年06月30日 17:18:16 redlevin 阅读数:5311 标签: tomcatjava 1、在tomcat/bin/shutdown.sh文件中增加一个参数 原来的 exec...

linjin200
13分钟前
1
0
动态代理

//业务类接口public interface ICar { String getName();} //业务类实现public class CarImpl implements ICar { @Override public String getName() { S......

stocket
23分钟前
0
0
dubbo架构相关知识学习

dubbo架构分为十层: Service:接口层,提供服务端以及客户端实现,类ServiceBean和ReferenceBean Config:配置层,ServiceConfig和ReferenceConfig,从dubbo.xsd中属性依赖如下,我们可以看出s...

zzx10
23分钟前
1
0
devops平台搭建

一份可以同时满足传统与互联网业务的Dev平台攻略

miaojiangmin
24分钟前
0
0
windows server 2019添加开机启动项

windows server 2012以上的版本(2016,2019)在开始菜单中找不到“启动”,如果写了个bat批处理文件,如何能开机启动呢?可以打开文件资源管理器,把下面的位置粘贴到地址栏后回车。将bat文...

gugudu
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部