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

最新推荐文章于 2022-04-21 21:44:16 发布

weixin_33962923

最新推荐文章于 2022-04-21 21:44:16 发布

阅读量644

点赞数

文章标签：前端 c/c++ python ViewUI

原文链接：https://my.oschina.net/wangch5453/blog/699537

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一种方法：分组法（推荐）

<!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();

转载于:https://my.oschina.net/wangch5453/blog/699537