文档章节

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

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

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

gbin1 ⋅ 2013/07/12 ⋅ 0

24、《每周一点canvas动画》——森林与星海

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

qq_39759115 ⋅ 04/17 ⋅ 0

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

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

望月从良 ⋅ 03/20 ⋅ 0

【转载】10个Web3D可视化精彩案例

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

MonoLog ⋅ 2017/11/29 ⋅ 0

Android卫星菜单:android-satellite-menu

android-satellite-menu实现点击主按钮,会弹出多个围绕着主按钮排列的子按钮,从而形成一个卫星弹出式菜单。子按钮弹出和消失的动画效果都很棒。这种弹出式菜单按钮应用在Path2.0中。 用法 ...

Remix_jx ⋅ 2014/11/03 ⋅ 0

用PowerPoint生动地演示几何应用题

最好ppt模板  两圆外切,大圆半径为小圆半径3倍,小圆沿大圆的圆周滚动一周回到原位置时,小圆自身转了多少圈?下面我们就一起来看看在PowerPoint中如何演示这个数学问题。   创建对象  ...

ppt模板下载空间 ⋅ 2015/11/28 ⋅ 0

21、《每周一点canvas动画》——万有引力

每周一点canvas动画代码文件 本章介绍,另一个动画应用——万有引力。听起来似乎有些玄乎,但是多事情千万不要被表面现象所迷惑,理解了原理就很简单!不管是地球上的是物体,还是宇宙中的星辰...

qq_39759115 ⋅ 04/17 ⋅ 0

39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign ⋅ 2012/09/12 ⋅ 6

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是“包裹及破坏” 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮...

foodon ⋅ 2014/10/30 ⋅ 1

39个超实用jQuery实例应用特效

摘要:程序员和Web设计师可以利用jQuery的诸多特性开发设计出许多光彩夺目的网站,当然这也取决于设计师们自己的创造力。 下面收集了39个开发者们最爱的jQuery应用以及教程,快来试试,让你的...

冰点沐雪 ⋅ 2012/09/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vuex学习

1、getters基本用法: 在store.js里面用const声明我们的getters属性。 const getters={ count:function (state) { return state.count +=100; }} export default new Vuex.S......

大美琴 ⋅ 41分钟前 ⋅ 0

292. Nim Game - LeetCode

Question 292. Nim Game Solution 思路:试着列举一下,就能发现一个n只要不是4的倍数,就能赢。 n 是否能赢1 true2 true3 true4 false 不论删除几,对方都能一把赢5 t...

yysue ⋅ 53分钟前 ⋅ 0

G6 关系数据可视化图形库 简单使用

官网 https://antv.alipay.com/zh-cn/g6/1.x/index.html 效果 首先生成给定数目的小球,并设置随机的颜色 按照顺序,设置小球的角度以及坐标 设置定时器,每隔一定的时间修改小球的角度和坐标...

阿豪boy ⋅ 56分钟前 ⋅ 0

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

zip压缩工具 zip命令可以压缩目录和文件,-r 压缩目录。 zip使用方法 zip 1.txt.zip 1.txt //压缩文件 zip -r 123.zip 123/ //压缩目录 unzip 1.txt.zip //解压 unzip 123.zip -d /root/456...

Linux_老吴 ⋅ 今天 ⋅ 0

react-loadable使用跳坑

官方给react-loadable的定义是: A higher order component for loading components with dynamic imports. 动态路由示例 withLoadable.js import React from 'react'import Loadable fro......

pengqinmm ⋅ 今天 ⋅ 0

记录工作中遇到的坑

1、ios safari浏览器向下滚动会触发window resize事件

端木遗风 ⋅ 今天 ⋅ 0

桥接设计模式

1、概述: 将抽象部分与他的实现部分分离,这样抽象化与实现化解耦,使他们可以独立的变化 如何实现解耦的呢,就是通过提供抽象化和实现化之间的桥接结构 桥接模式将继承模式转化成关联关系,他降...

职业搬砖20年 ⋅ 今天 ⋅ 0

20.zip压缩 tar打包 打包并压缩

6月25日任务 6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 6.5 zip压缩工具: zip支持压缩目录 zip压缩完之后原来的文件不删除 不同的文件内容其实压缩的效果不一样 文件内有很多重复的用xz压...

王鑫linux ⋅ 今天 ⋅ 0

double类型数据保留四位小数的另一种思路

来源:透析公式处理,有时候数据有很长的小数位,有的时候由在四位以内,如果用一般的处理方法,那么不足四位的小树会补充0到第四位,这样子有点画蛇添足的感觉,不太好看。所以要根据小数的...

young_chen ⋅ 今天 ⋅ 0

Django配置163邮箱出现 authentication failed(535)错误解决方法

最近用Django写某网站,当配置163邮箱设置完成后,出现535错误即:smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') Django初始配置邮箱设置 EMAIL_HOST = "smtp.1...

陈墨轩_CJX ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部