three.js实现土星绕太阳体系

概况如下: 1.SphereGeometry实现自转的太阳,土星: 2.RingGeometry实现土星公转轨道: 3.ImageUtils加载球体贴图: 4.canvas中createRadialGradient实现太阳发光效果: 5.THREE.RingGeometry实现土星公转轨道. 效果图如下: 预览地址:three.js实现土星绕太阳体系初始化场景.相机.渲染器,设置相机位置,初始化光源,光源采用点光源PointLight,设置光源位置为场景中心位置,并将光源加入场景中. // 初…

three.js模拟实现太阳系行星体系

概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRadialGradient实现太阳发光效果: 5.THREE.Sprite精灵实现太阳系行星. 效果图如下: 初始化场景.相机.渲染器,设置相机位置. // 初始化场景 var scene = new THREE.Scene(); // 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄…

Three.js 学习笔记(1)--坐标体系和旋转

前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.(该项目的目标是创建一个易于使用,轻量级的3D库.该库提供了<canvas>,<svg>,CSS3D和WebGL渲染器.) 示例 …

开玩笑html5(五岁以下儿童)---绕地球月球，地球绕太阳运动（canvas实现，同样可以移动哦）

请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地球绕着太阳转,月球绕着地球转</title> </head> &…

vue.js路由vue-router

学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHeader5 前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用).我之前用…

vue.js路由vue-router（一）——简单路由基础

前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用).我之前用vue-cli脚手架写了一个简单的人员管理实例,现在我们不用脚手架,就用原生的vue来写,本文也主要是通过实例来讲解vue.js+vue-router相关知识. 简单路由跳转实例 1.起步下载vue-route…

JS实现环绕地球飞行的3D飞行线动画效果(JS+HTML)

1.项目介绍 JS+HTML实现绕地球飞行的3D飞行线动画效果,且3D地球可以随意拖动和滑动缩放,画面中心是蓝色地球,地球表面上的两点连线之间有光电随机出现沿着抛物线轨迹3D飞行,可使用较好的浏览器打开,如microsoft edge打开,效果如下图所示: 2.html源码如下所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD…

flv.js的追帧、断流重连及实时更新的直播优化方案

目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 3.3 实时更新 3.4 解决 stuck 问题 4. 封装插件 flvExtend.js 5. 其他问题参考 1. 前言最近在处理前端直播的业务,根据业务需要,使用 flv.js 的方案播放实时的flv视频流.不得不承认,flv.js 是一个伟大的库. 在使用flv.js开发的过程中,遇到了…

canvas绘制太阳系

原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象基本的三角函数 canvas部分有:坐标变换,渐变,混合模式,线条和图形的绘制. 实际效果: solar system(推荐在chrome或safari下运行) 场景首先建立场景类,主要用来组织管理对象,统一更新和绘制对象.这里用到了ES6的类语法,构造函数建立对象列表属性planets,绘制背景方法drawBG…

JavaScript tips ——搞定闰年

前言处理时间时,常常要考虑用户的输入是否合法,其中一个很典型的场景就是平闰年的判断,网上其实有很多类似的算法,但是其实不必那么麻烦,下面我讲讲的我的思路. 规则公元年数可被4整除为闰年,但是整百(个位和十位均为0)的年数必须是可以被400整除的才是闰年(比如1900年不是闰年),其他都是平年.例如:1997年是平年,2002年是平年:1996年是闰年,2000年是闰年.平年二月有28天,而闰年二月有29天. 最根本的原因是:地球绕太阳运行周期为365天5小时48分46秒(合365.24219…

认识我们的太阳系(Solar System)

一.初识太阳系如果太阳是一颗篮球,那么我们的地球是什么?? 如果太阳系里最大的行星:木星是一颗足球,那么我们的地球是什么?? 如果我们的地球是一颗排球,那么其他行星是什么?? 由此,我们可以看到,我们的地球跟太阳相比,是多么渺小,跟木星相比,依然是很渺小,但是地球是所有太阳内行星里的老大(岩石行星). 我们合起来比较一下: 二.什么是太阳系太阳系是以太阳为中心,和所有受到太阳的重力约束天体的集合体:8颗行星(2006年冥王星被去掉,因为其运动轨迹与其它八大行星不同,所以只剩下金星.水星.地球…

JavaScript tips —— 搞定闰年

用.NET模拟天体运动

用.NET模拟天体运动这将是一篇罕见而偏极客的文章. 我上大学时就见过一些模拟太阳系等天体运动的软件和网站,觉得非常酷炫,比如这个(http://www.astronoo.com/en/articles/positions-of-the-planets.html): 其酷炫之处不仅在于天体运动轨迹能画出美妙的弧线,更重要的是其运动规律完全由万有引力定律产生,不需要对其运动轨迹进行编程.所有天体受其它天体的合力,然后按照其加速度运行.只需一个起始坐标和起始速度,就能坐下来欣赏画面. 我从大学毕业…

Unity3D游戏开发初探—2.初步了解3D模型基础

一.什么是3D模型? 1.1 3D模型概述简而言之,3D模型就是三维的.立体的模型,D是英文Dimensions的缩写. 3D模型也可以说是用3Ds MAX建造的立体模型,包括各种建筑.人物.植被.机械等等,比如一个大楼的3D模型图.3D模型也包括玩具和电脑模型领域. 互联网的形态一直以来都是2D模式的,但是随着3D技术的不断进步,在未来的时间里,将会有越来越多的互联网应用以3D的方式呈现给用户,包括网络视讯.电子阅读.网络游戏.虚拟社区.电子商务.远程教育等等.甚至对于旅游业,3D互联网也能…

opengl入门学习

OpenGL入门学习说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色来做吗?显然是不行的. 本帖的目的是让大家放弃TC的老旧图形接口,让大家接触一些新事物. OpenGL作为当前主流的图形API之一,它在一些场合具有比DirectX更优越的特性. 1.与C语言紧密结合. OpenGL命令最初就是用C语言函数来进行描述的,对于学习过C语言的人来讲,Open…

canvas API ，通俗的canvas基础知识（四）

今天要讲的内容是canvas的转换功能,前面的内容没用看的同学可以出门右转,先看看前面的基础知识,废话不多说,开始进入正题吧! 何为转换功能?熟悉css3的同学都知道,css3里面有transform,translate,scale,rotate,animation等等,这就是css3的转换功能,同样,canvas也支持,但是只是支持部分,那我们来看看,都支持哪些,和css3相比,有什么区别? 1.scale scale(scaleWidth,scaleHeight) 缩放当前绘图参数:sc…

iOS开发环境C语言基础运算符和表达式

1 年龄判断程序 1.1 问题本案例需要使用交互的方式判断年龄的范围:用户从控制台输入一个年龄,由程序判断该年龄是否在18~50岁之间.程序交互过程如图-1所示: 图-1 1.2 步骤实现此案例需要按照如下步骤进行. 步骤一:定义变量变量age,用于保存用户从控制台输入的年龄. 代码如下: #include <stdio.h> int main(int argc, const char * argv[]) { int age; return 0; } 步骤二:从控制台输入年龄首先,…

OpenGl从零开始之坐标变换（上）

坐标变换是深入理解三维世界的基础,非常重要.学习这部分首先要清楚几个概念:视点变换.模型变换.投影变换.视口变换. 在现实世界中,所有的物体都具有三维特征,但计算机本身只能处理数字,显示二维的图形,因此我们要将三维物体用二维数据表示出来,这一联系的点就是坐标.在OpenGL三维空间中坐标的形式有两种:世界坐标系和局部坐标系. ①世界坐标系:始终固定不变.举例,以太阳系中心太阳为中心原点,建立世界坐标系的话,地球绕太阳的公转运动是世界坐标的变换. ②局部坐标系:物体本身的中心.地球的自传就是局部坐…

OpenGL入门学习(转)

OpenGL入门学习 http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色来做吗?显然是不行的. 本帖的目的是让大家放弃TC的老旧图形接口,让大家接触一些新事物. OpenGL作为当前主流的图形API之一,它在一些场合具有比Direct…

java中的日期处理

学习Java日期处理,看见这一篇比较详细,转载之. 转自:http://www.cnblogs.com/hqr9313/archive/2012/04/19/2458221.html 时间日期1)java中的时间类有:Date和Calendar 2)java中时间类的本质 long(毫秒数) Date = long +历法算法(方法gerYear()) Calendar = long +历法算法(方法ger()) 3) 时间的标准有两种 (1970)GMT long (0)UTC lon…

OpenGL------三维变换

我们生活在一个三维的世界——如果要观察一个物体,我们可以:1.从不同的位置去观察它.(视图变换)2.移动或者旋转它,当然了,如果它只是计算机里面的物体,我们还可以放大或缩小它.(模型变换)3.如果把物体画下来,我们可以选择:是否需要一种“近大远小”的透视效果.另外,我们可能只希望看到物体的一部分,而不是全部(剪裁).(投影变换)4.我们可能希望把整个看到的图形画下来,但它只占据纸张的一部分,而不是全部.(视口变换)这些,都可以在OpenGL中实现. OpenGL变换实际上是通过矩阵乘法来实现.无…

OpenGL理解

说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色来做吗?显然是不行的. 本帖的目的是让大家放弃TC的老旧图形接口,让大家接触一些新事物. OpenGL作为当前主流的图形API之一,它在一些场合具有比DirectX更优越的特性. 1.与C语言紧密结合. OpenGL命令最初就是用C语言函数来进行描述的,对于学习过C语言的人来讲,OpenGL是容易理解和学习的…

走进javascript——类型

ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String,Symbol,Number和Object.ECMAScript语言值是以ECMAScript语言类型为特征的值. 如果你奇怪为什么这里没有写Function类型,并且把Null也当做一种类型,建议你看一下hax在知乎上的一个回答JavaScript 里 Function 也算一种基本类型? 简单说…

Linux时间子系统之（一）：时间的基本概念

专题文档汇总目录 Notes:Linux时间基准点:Linux时间和broken-down time(struct tm):不同精度的时间表示time_t.timeval.timespec. 原文地址:Linux时间子系统之(一):时间的基本概念本文使用Q & A的方式来和大家以前探讨一下时间的基本概念一.什么是时间? 这个问题实在是太复杂了,我都不知道这是一个物理学.宇宙学.还是热力学异或是哲学问题,我只是想从几个侧面来了解一下时间这个概念.本节内容都是我坐在公交车上瞎想的,对物理学有兴趣…

时区，GMT时间，UTC时间，UNIX时间戳

秒秒是一个时间基本单位.一天24小时,一小时60分,一分钟60秒,这来自于秒的定义--1秒的时间间隔为平均太阳日[1]的1⁄86400.到了20世纪中叶,人们发现地球自转的时间并不是恒定的,于是在1956年改以地球绕太阳轨道公转一周的时间来定义秒[2].1967年,改用原子共振频率来定义秒[3],并在此基础上制作出了原子钟.目前,原子钟是世界上已知最准确的时间测量和频率标准. GMT时间格林尼治平时(Greenwich Mean Time,GMT),又称为格林尼治标准时间. 格林尼治平时的正…

MpVue 致力打造H5与小程序的代码共用

MpVue是什么基于 Vue.js 的小程序开发框架从底层支持 Vue.js 语法和构建工具体系. 使用vue开发小程序修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中使用vue语法开发,编译为小程序语法一套vue程序h5+小程序 Vue组件规范,熟悉vuejs即可开发小程序比wepy工具对vue语法支持度更高小程序的缺点语法和html css不兼容,单独开发学习成本 MpVue的能力彻底的Vue组件化开发能力:提高代码复用性…

opengl学习笔记（五）:组合变换，绘制一个简单的太阳系

创建太阳系模型描述的程序绘制一个简单的太阳系,其中有一颗行星和一颗太阳,用同一个函数绘制.需要使用glRotate*()函数让这颗行星绕太阳旋转,并且绕自身的轴旋转.还需要使用glTranslate*()函数让这颗行星离开原点,移动到它自己的轨道上.可以在glutWireSphere()函数中使用适当的参数,在绘制球体时指定球体的大小. planet.c #include <GL/glut.h> ,day =; void init(void) { glClearColor(0.0,0.0,0…

Linux时间子系统(一) 基本概念

本文使用Q & A的方式来和大家以前探讨一下时间的基本概念一.什么是时间? 这个问题实在是太复杂了,我都不知道这是一个物理学.宇宙学.还是热力学异或是哲学问题,我只是想从几个侧面来了解一下时间这个概念.本节内容都是我坐在公交车上瞎想的,对物理学有兴趣的人可以指出我的错误(一个搞linux kernel的人不会有太深刻的物理学知识的),对Linux时间子系统有兴趣的人还是忽略这个小节吧. 1.时间和空间以及相对性有没有绝对时间的概念呢?时间是否是独立于一切存在的呢?相信有绝对时间的存在比较符合…

Unity3D 笔记二 3D模型基础

一.3D模型基础 1.Hierarchy 显示的是界面上的游戏对象(GameObject),每个游戏对象都有.至少要有一个Camera,点击Camera就可以在Preview中看到摄像机的视角画面.每个对象有Position(位置).Rotation(旋转.角度).Scale(缩放大小)三组属性. 2.Unity3D采用的是:沿屏幕横向为X轴.沿屏幕纵向为Y轴.垂直屏幕方向为Z轴.右.上.背向观众三个方向为正方向.左手坐标系.3.Vector3是Unity中定义的一个含有x.y.z单个字段的类,…

利用TLE数据确定卫星轨道（1）－卫星轨道和TLE

1.卫星轨道太空中卫星和天体在各种引力的作用下都在一定的轨道中周期转动着,但实际的轨道是很复杂的,一般的项目也达不到那么精确的需求(其实精确的卫星参数数据也不可能随便公开的),所以采用一阶近似的开普勒椭圆轨道即可.确定一个开普勒椭圆轨道需要一些基本要素,要素的组合形式有多种,但不同形式的各组之间都有简单的换算关系.常用的是开普勒六要素,有明显的几何意义. 1. 轨道半长轴,是椭圆长轴的一半.对于圆,也就是半径,另外根据开普勒第三定律,半长轴与运行周期之间有确定的换算关系. 2. 轨道偏心率,椭…

【three.js实现土星绕太阳体系】的更多相关文章