two.js画地球自转

痛定思痛。 2022-05-27 06:51 192阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> svg,canvas{ background: #111; } body{ text-align: center; } </style>
    </head>
    <body>
        <div id="box"></div>
        <script src="two.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
        <script> var options={ height:320,width:400, type:Two.Types.svg }; var two=new Two(options).appendTo(box); const w=two.width,h=two.height; var sun=two.makeCircle(0,0,50), earth=two.makeCircle(0,0,15),moon=two.makeCircle(0,0,4); sun.fill="#f00";earth.fill="#00f";moon.fill='yellow'; var moonOrbit=two.makeCircle(0,-28,28);earthOrbit=two.makeCircle(w/2,h/2,125); moonOrbit.stroke='#fff'; earthOrbit.stroke='#fff'; moonOrbit.fill='transparent'; earthOrbit.fill='transparent'; var moonGroup=two.makeGroup(moon,moonOrbit); //0,0 moonGroup.translation.set(0,28); var group2=two.makeGroup(earth,moonGroup); //0,0 group2.translation.set(0,125); var group1=two.makeGroup(sun,group2); group1.translation.set(w/2, h/2); two.bind('update',function(frameout){ group1.rotation+=0.5*Math.PI/180; group2.rotation+=1*Math.PI/180; }).play(); two.update(); </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关关闭IDEA小地球标志 GetMapping的地球标志

> Controller中的PostMapping、GetMapping后面带这一个地球小图标碍事，去掉它。 ![在这里插入图片描述][74ac6ea74d194cc9bc4

一时失言乱红尘/ 2024年03月27日 10:28/ 0 赞/ 81 阅读

相关地球什么时候毁灭

地球不会在可以预测的未来毁灭。尽管人类可能会给地球造成污染和破坏，但地球本身是一个非常强大的生物，有能力自我恢复和适应环境变化。在长期的历史中，地球经历了许多变化，包括冰河

超、凢脫俗/ 2024年03月26日 08:53/ 0 赞/ 49 阅读

相关 031：cesium地球自转效果

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第031个 [点击查看专栏目录][Link 1]

分手后的思念是犯贱/ 2024年03月25日 23:29/ 0 赞/ 99 阅读

相关怎么保护地球生物多样性

为了保护地球生物多样性，有以下几点建议： 1. 保护野生动植物的栖息地：通过建立自然保护区和野生动植物保护区来保护野生生物的栖息地。 2. 控制和减少捕杀野生生物：通过控

逃离我推掉我的手/ 2024年03月25日 19:10/ 0 赞/ 114 阅读

相关 CSS特效003：太阳、地球、月球之间的绕转动画

GPT能够很好的应用到我们的代码开发中，能够提高开发速度。你可以利用其代码，做出一定的更改，然后实现效能。 css实战中，这种球体间的旋转，主要通过rotate()旋转函数来

た入场券/ 2024年02月19日 09:18/ 0 赞/ 47 阅读

相关 Qt旋转+自转动画demo

Demo 展示 ![在这里插入图片描述][20201226193022673.gif_pic_center] 实现方式 Qt动画框架是以控件的属性做插值（e.g.

喜欢ヅ旅行/ 2022年12月22日 11:19/ 0 赞/ 227 阅读

相关绝对惊艳的地球自转js

<html> <head><title>diqiuzizhuan</title></head> </html> <script>

深碍√TFBOYSˉ_/ 2022年08月05日 15:13/ 0 赞/ 219 阅读

相关游戏物体自转（旋转）

有时候UI界面要实现某个图片要旋转，一直转。。。如下图： ![Center][] 中间的地球是3D模型，自带旋转动画。四周的四个圆圈是2D图片，用代码控制旋转。

青旅半醒/ 2022年07月18日 09:05/ 0 赞/ 201 阅读

相关 two.js画地球自转

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

痛定思痛。/ 2022年05月27日 06:51/ 0 赞/ 193 阅读

相关【JS】地球节电一小时

今天用CSS3+JS写了个地球节电1小时的效果教程： [纪念地球节电一小时][Link 1] 预览： [http://b

我不是女神ヾ/ 2022年03月20日 12:49/ 0 赞/ 183 阅读