当前位置: 首页 > 工具软件 > Two.js > 使用案例 >

two.js实现地球绕太阳转,月亮绕地球转,兔子绕月球转

汤英豪
2023-12-01

一、大致流程:

1、首先引入two.js <script src="two.js"></script>

2、绘制太阳,地球轨道,地球,地球组合,使其能绕太阳旋转

3、绘制月亮轨道,月亮,月亮组合,使其能绕地球转

4,绘制兔子轨道,兔子,兔子组合,使其能绕月亮转

5、将月亮轨道,月亮组合加入到地球组合中,使其能随着地球绕太阳转

6、将兔子轨道,兔子组合加入到月亮组合中,使其能随着月亮绕地球转

二、注意点:

1、每个组合先实现在自己轨道上旋转。

2、加入上级组合后载返回修改轨道与组合坐标,改为与上级中心一致的xy坐标。

3、把最大的组合earthGroup写在最下面,每个后添加的小轨道组合都插入在前面,不然会出错。

4、每个轨道都设置填充透明色,不然里面的月亮,地球都显示不出来,被挡住了。

三、详细思路:

1、地球绕太阳转:

(1)先绘制sun在画布中心,

        var sun=two.makeCircle(300,300,100);

(2)再绘制earchOrbit套在sun外面,

        var earthOrbit=two.makeCircle(300,300,200);
        earthOrbit.fill="transparent";

(3)再绘制earth在earchOrbit上,

        var earth=two.makeCircle(100,300,50);

(4)再创建earthGroup,将earth加入到earchGroup中,并设置偏移earchGroup.translation.set(earchOrbit中心坐标); 

        var earthGroup=two.makeGroup(earth);
        earthGroup.translation.set(300,300);

(5)返回修改earth坐标,因为earthGroup已偏移,故按照实际earth与earthGroup中心的距离来设置x,y坐标,

        var earth=two.makeCircle(-200,0,50);1.原(100,300),加入eG,且eG偏移(300,300)后,改为(-200,0)

(6)设置旋转函数,加入到two.on('update',function(){ })循环事件中,使地球能绕太阳(沿着earthOrbit)转起来

        two.on('update',function(){
            earthGroup.rotation+=1*Math.PI/180;
        });
        two.play();

2、月亮绕地球转

(1)先按照正常坐标,绘制月亮轨道moonOrbit,

        var moonOrbit=two.makeCircle(100,300,80);
        moonOrbit.fill="transparent";

(2)绘制moon

        var moon=two.makeCircle(20,300,20);

(3)创建moonGroup,将moon加入其中,并设置偏移moonGroup.translation.set(moonOrbit中心坐标); 

        var moonGroup=two.makeGroup(moon);
        moonGroup.translation.set(100,300);

(4)返回修改moon坐标,因moonGroup已偏移,故按照实际moon与moonOrbit中心的距离来设置xy坐标,

        var moon=two.makeCircle(80,0,20);//2.原(20,300),因mG偏移到(100,300),改为(80,0)

(5)设置旋转函数,使月亮能绕地球(沿着moonOrbit)转起来。

        moonGroup.rotation+=3*Math.PI/180;

(6)要想实现月亮随着地球一起绕太阳转,需先把moonOrbit,moonGroup加入到earthGroup中,再修改moonOrbit,moonGroup的坐标,使其与earth中心一致。

        var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后,改为(-200,0)

        moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后,因画布中心已偏移到(300,300),故改为(-200,0) 

3、兔子绕月亮转

(1)先按照正常坐标,绘制兔子轨道rabbitOrbit,

        var rabbitOrbit=two.makeCircle(20,300,50);

(2)绘制兔子rabbit

        var rabbit=two.makeCircle(20,250,10);

(3)创建rabbitGroup,将rabbit加入其中,并设置偏移rabbitGroup.translation.set(rabbitOrbit中心坐标); 

        var rabbitGroup=two.makeGroup(rabbit);
        rabbitGroup.translation.set(20,300);

(4)返回修改rabbit坐标,因rabbitGroup已偏移,故按照实际rabbit与rabbitOrbit中心的距离来设置xy坐标,

        var rabbit=two.makeCircle(0,-50,10);//5.原(20,250,10),加入rG后,改为(0,-50,10)

(5)设置旋转函数,加入到two.on('update',function(){ })循环事件中,使兔子能绕月亮(沿着rabbitOrbit)转起来。

        rabbitGroup.rotation+=6*Math.PI/180;

(6)要想实现兔子随着月亮一起绕地球转,需先把rabbitOrbit,rabbitGroup加入到moonGroup中,再修改rabbitOrbit,rabbitGroup的坐标,使其与moon中心一致。

        var rabbitOrbit=two.makeCircle(-80,0,50);//6.原(20,300,50),加入mG后,改为(-80,0,50)
        rabbitOrbit.fill="transparent";

        rabbitGroup.translation.set(-80,0);//7.原(20,300),加入mG后,改为(-80,0)

四、完整代码:

1、实现地球绕太阳转,完整代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
        #d1{
            border:1px solid #ddd;
            display:inline-block;
        }
    </style>
  <script src="two.js"></script>
 </head>
 <body>
  <div id="d1"></div>
    <script>
        
        var params={width:600, height:600, type:Two.Types.svg};
        var two= new Two(params).appendTo(d1);
        //1. 太阳
        var sun=two.makeCircle(300,300,100);
        sun.fill="#aaf";
        sun.stroke="transparent";
        //2.地球轨道
        var earthOrbit=two.makeCircle(300,300,200);
        earthOrbit.fill="transparent";
        earthOrbit.stroke="#aaa";
        //3.地球
        var earth=two.makeCircle(-200,0,50);
        earth.fill="#aff";
        earth.stroke="transparent";
        //4.地球组
        var earthGroup=two.makeGroup(earth);
        earthGroup.translation.set(300,300);
        two.on('update',function(){
            earthGroup.rotation+=1*Math.PI/180;
        });
        two.play();
    </script>
 </body>
</html>

2、月亮绕地球转,随着地球绕太阳转,完整代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
        #d1{
            border:1px solid #ddd;
            display:inline-block;
        }
    </style>
  <script src="two.js"></script>
 </head>
 <body>
  <div id="d1"></div>
    <script>
        
        var params={width:600, height:600, type:Two.Types.svg};
        var two= new Two(params).appendTo(d1);
        //1. 太阳
        var sun=two.makeCircle(300,300,100);
        sun.fill="#aaf";
        sun.stroke="transparent";
        //2.地球轨道
        var earthOrbit=two.makeCircle(300,300,200);
        earthOrbit.fill="transparent";
        earthOrbit.stroke="#aaa";
        //3.地球
        var earth=two.makeCircle(-200,0,50);//1.原(100,300),加入eg,且eG偏移(300,300)后,改为(-200,0)
        earth.fill="#aff";
        earth.stroke="transparent";
        //4.月球轨道
        var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后,改为(-200,0)
        moonOrbit.fill="transparent";
        moonOrbit.stroke="red";
        //5.月球
        var moon=two.makeCircle(80,0,20);//2.原(20,300),因mG偏移到(100,300),改为(80,0)
        moon.fill="green";
        moon.stroke="transparent";
        //6.月球组
        var moonGroup=two.makeGroup(moon);
        moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后,因画布中心已偏移到(300,300),故改为(-200,0) 
        //7.地球组
        var earthGroup=two.makeGroup(earth,moonGroup,moonOrbit);
        earthGroup.translation.set(300,300);
        two.on('update',function(){
            moonGroup.rotation+=3*Math.PI/180;
            earthGroup.rotation+=1*Math.PI/180;
        });/**/
        two.play();
    </script>
 </body>
</html>

3、兔子绕月亮转,完整代码如下:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
        #d1{
            border:1px solid #ddd;
            display:inline-block;
        }
    </style>
  <script src="two.js"></script>
 </head>
 <body>
  <div id="d1"></div>
    <script>
        
        var params={width:600, height:600, type:Two.Types.svg};
        var two= new Two(params).appendTo(d1);
        //1. 太阳
        var sun=two.makeCircle(300,300,100);
        sun.fill="#aaf";
        sun.stroke="transparent";
        //2.地球轨道
        var earthOrbit=two.makeCircle(300,300,200);
        earthOrbit.fill="transparent";
        earthOrbit.stroke="#aaa";
        //3.地球
        var earth=two.makeCircle(-200,0,50);//1.原(100,300),加入eG,且eG偏移(300,300)后,改为(-200,0)
        earth.fill="#aff";
        earth.stroke="transparent";
        //8.兔子轨道
        var rabbitOrbit=two.makeCircle(-80,0,50);//6.原(20,300,50),加入mG后,改为(-80,0,50)
        rabbitOrbit.fill="transparent";
        //9.兔子
        var rabbit=two.makeCircle(0,-50,10);//5.原(20,250,10),加入rG后,改为(0,-50,10)
        rabbit.fill="red";
        //10.兔子组合
        var rabbitGroup=two.makeGroup(rabbit);
        rabbitGroup.translation.set(-80,0);//7.原(20,300),加入mG后,改为(-80,0)
        //4.月球轨道
        var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后,改为(-200,0)
        moonOrbit.fill="transparent";
        moonOrbit.stroke="red";
        //5.月球
        var moon=two.makeCircle(-80,0,20);//2.原(20,300),因mG偏移到(100,300),改为(-80,0)
        moon.fill="green";
        moon.stroke="transparent";
        //6.月球组
        var moonGroup=two.makeGroup(moon,rabbitGroup,rabbitOrbit);
        moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后,因画布中心已偏移到(300,300),故改为(-200,0) 
        //7.地球组
        var earthGroup=two.makeGroup(earth,moonGroup,moonOrbit);
        earthGroup.translation.set(300,300);
        two.on('update',function(){
            earthGroup.rotation+=1*Math.PI/180;
            moonGroup.rotation+=3*Math.PI/180;
            rabbitGroup.rotation+=6*Math.PI/180;
        });/**/
        two.play();
    </script>
 </body>
</html>

4、掌握规律后,很好写出随着环绕旋转的效果了,只要在前面加3个图形,再修改参数即可。现在加个兔子身上的小球

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
        #d1{
            border:1px solid #ddd;
            display:inline-block;
        }
    </style>
  <script src="two.js"></script>
 </head>
 <body>
  <div id="d1"></div>
    <script>
        
        var params={width:600, height:600, type:Two.Types.svg};
        var two= new Two(params).appendTo(d1);
        //1. 太阳
        var sun=two.makeCircle(300,300,100);
        sun.fill="#aaf";
        sun.stroke="transparent";
        //2.地球轨道
        var earthOrbit=two.makeCircle(300,300,200);
        earthOrbit.fill="transparent";
        earthOrbit.stroke="#aaa";
        //3.地球
        var earth=two.makeCircle(-200,0,50);//1.原(100,300),加入eG,且eG偏移(300,300)后,改为(-200,0)
        earth.fill="#aff";
        earth.stroke="transparent";
        //11.兔子的小球轨道
        var ballOrbit=two.makeCircle(0,-50,30);//9.原(20,250,30),加入rG后,改为rabbit的xy坐标(0,-50,30)
        ballOrbit.fill="transparent";
        //12.兔子的小球
        var ball=two.makeCircle(0,-30,5);//8.原(20,220,5),加入bG后,改为(-30,0,5)
        //13.兔子的小球组合
        var ballGroup=two.makeGroup(ball);
        ballGroup.translation.set(0,-50);//10.原(20,250),加入rG后,改为rabbit的xy坐标(0,-50)
        //8.兔子轨道
        var rabbitOrbit=two.makeCircle(-80,0,50);//6.原(20,300,50),加入mG后,改为改为moon的xy坐标(-80,0,50)
        rabbitOrbit.fill="transparent";
        //9.兔子
        var rabbit=two.makeCircle(0,-50,10);//5.原(20,250,10),加入rG后,改为(0,-50,10)
        rabbit.fill="red";
        //10.兔子组合
        var rabbitGroup=two.makeGroup(rabbit,ballGroup,ballOrbit);
        rabbitGroup.translation.set(-80,0);//7.原(20,300),加入mG后,改为改为moon的xy坐标(-80,0)
        //4.月球轨道
        var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后,改为earth的xy坐标(-200,0)
        moonOrbit.fill="transparent";
        moonOrbit.stroke="red";
        //5.月球
        var moon=two.makeCircle(-80,0,20);//2.原(20,300),加入mG后,因mG偏移到(100,300),改为(-80,0)
        moon.fill="green";
        moon.stroke="transparent";
        //6.月球组
        var moonGroup=two.makeGroup(moon,rabbitGroup,rabbitOrbit);
        moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后,因画布中心已偏移到(300,300),改为earth的xy坐标(-200,0) 
        //7.地球组
        var earthGroup=two.makeGroup(earth,moonGroup,moonOrbit);
        earthGroup.translation.set(300,300);
        two.on('update',function(){
            earthGroup.rotation+=1*Math.PI/180;
            moonGroup.rotation+=3*Math.PI/180;
            rabbitGroup.rotation+=6*Math.PI/180;
            ballGroup.rotation+=6*Math.PI/180;
        });/**/
        two.play();
    </script>
 </body>
</html>

 类似资料: