文档章节

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

呵呵闯
 呵呵闯
发布于 2016/06/22 23:26
字数 666
阅读 101
收藏 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
博文 67
码字总数 15949
作品 0
深圳
程序员
使用two.js生成的卫星环绕动画效果

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

gbin1
2013/07/12
739
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

没有更多内容

加载失败,请刷新页面

加载更多

启动线程以及安全终止线程

启动 使用start()方法可以启动线程。 start()方法的含义是告知线程规划器线程已初始化完毕,可以分给这个线程时间片了(执行run()方法)。 安全终止线程 示例代码 import java.util.concurr...

karma123
16分钟前
1
0
Python+OpenCV 图像风格迁移(模仿名画)

现在很多人都喜欢拍照(自拍)。有限的滤镜和装饰玩多了也会腻,所以就有 APP 提供了模仿名画风格的功能,比如 prisma、versa 等,可以把你的照片变成 梵高、毕加索、蒙克 等大师的风格。 这...

crossin
21分钟前
1
0
karabiner json语法

karabiner json语法 to_if_alone 如果同时制定了to, 那么to对应的key必须是非可见字符,例如control,shift或者command, 为什么呢? If to events are specified, to events are released befo...

黄威
22分钟前
1
0
学习设计模式——工厂方法模式

1. 认识工厂方法模式 1. 功能:定义一个用于创建对象的接口,让子类决定实例化哪一个类,该模式使一个类的实例化延迟到其子类中。 2. 组织结构: Product: 定义工厂方法中用来创建对象的接口...

江左煤郎
22分钟前
1
0
常用的大数据技术有哪些?

大数据技术为决策提供依据,在政府、企业、科研项目等决策中扮演着重要的角色,在社会治理和企业管理中起到了不容忽视的作用,很多国 家,如中国、美国以及欧盟等都已将大数据列入国家发展战...

董黎明
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部