webgl 绘制太阳地球月亮

目录

1、开发环境

2、内容说明

1、计算球体的坐标和纹理

2、求顶点索引

3、数据加载到缓存中

4、绘制球体

5、其他

3、运行结果及代码下载

1、开发环境

浏览器 : 火狐 firefox(配置参考博客)
编程语言：webgl
编程软件：webstorm

2、内容说明

模拟太阳、地球、月亮运动；有光照和纹理

1、计算球体的坐标和纹理

球体坐标值的计算公式
x = rcos(θ) cos(φ)
y = rcos(θ) sin(φ)
z = rsin(θ)

  var latitudeBands  = 50;//纬度带var longitudeBands = 50;//经度带var positions      = [];//存储x，y，z坐标var indices        = [];//三角形列表（索引值）for(var latNum = 0; latNum <= latitudeBands; latNum++){//纬度范围从-π/2到π/2var lat = latNum * Math.PI / (latitudeBands) - Math.PI / 2;var sinLat = Math.sin(lat);var cosLat = Math.cos(lat);for(var longNum = 0; longNum <= longitudeBands; longNum++){//经度范围从-π到πvar lon = longNum * 2 * Math.PI / (longitudeBands) - Math.PI;var sinLon = Math.sin(lon);var cosLon = Math.cos(lon);var x = cosLat * cosLon;var y = cosLat * sinLon;var z = sinLat;var u = (longNum / (longitudeBands));var v = (latNum / (latitudeBands));positions.push(x);//坐标xpositions.push(y);//坐标ypositions.push(z);//坐标zpositions.push(u);//纹理upositions.push(v);//纹理v}}

2、求顶点索引

把坐标点排序，求出顶点索引列表，将每个四边形分成一对三角形，缝合成一个球体

 //生成一个顶点索引列表，将每个四边形分成一对三角形for(var latNum = 0; latNum < latitudeBands; latNum++){for(var longNum = 0; longNum < longitudeBands; longNum++){var first = latNum * (longitudeBands + 1) + longNum;var second = first + longitudeBands + 1;//第一个三角形的3个点索引indices.push(first);indices.push(first + 1);indices.push(second);//第二个三角形的3个点索引indices.push(second);indices.push(second + 1);indices.push(first + 1);}}

3、数据加载到缓存中

把生成的顶点和索引数据绑定到对应的缓存中，给着色器提供数据

var vertices = new Float32Array(positions);//顶点坐标数据和纹理坐标var indices = new Uint16Array(indices);//顶点索引数据// 创建顶点缓冲this.shpereVAO = gl.createBuffer();// 绑定顶点缓冲gl.bindBuffer(gl.ARRAY_BUFFER, this.shpereVAO);// 提交顶点数据gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);///创建顶点索引this.shpereVEO = gl.createBuffer();// 绑定顶点索引gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,  this.shpereVEO);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

4、绘制球体

使用刚才的缓存中的数据，调用绘制命令进行绘制

 gl.bindBuffer(gl.ARRAY_BUFFER, this.shpereVAO);//绑定顶点缓存gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,  this.shpereVEO);//绑定索引缓冲gl.drawElements(gl.TRIANGLES,50*50*6,gl.UNSIGNED_SHORT,0);//绘制命令

5、其他

纹理和光照就不在重述

3、运行结果及代码下载

代码下载

webgl 绘制太阳地球月亮相关推荐

openGl编程实现一个太阳地球月亮的一个简单运动系统
一. 项目目的使用openGl编程实现一个太阳地球月亮的一个简单运动系统,要求实现三维转动.点光源变化.纹理映射及阴影等效果二. 任务实现 \1. 满足三者实际大小/距离的比例关系: \2. 满足 ...
Python模拟太阳-地球-月亮运动模型
作者 | Charles,cv方向在读研究生.[Charles 的皮卡丘]专注于分享有趣好玩的Python小项目(AI.爬虫等等). 来源 | Charles 的皮卡丘编辑 | Jane [导语]春 ...
Python模拟登录，matplotlib模块，Python模拟太阳-地球-月亮运动模型
前言利用python模拟太阳-地球-月亮运动模型. 让我们愉快地开始吧~ 开发工具 **Python版本:**3.6.4 相关模块: pygame模块: matplotlib模块: numpy模块: ...
OpenGL：绘制太阳地球例子
#include <GL/freeglut.h> //本来OpenGL程序一般还要包含<GL/gl.h>和<GL/glu.h> //但GLUT的头文件中已经自动将这 ...
CSS太阳地球月亮转圈圈loading
一个css例子 css太阳月亮地球转转转知识点总结: justify-content: center; justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式 ...
three.js旋转，材质，灯光使用 —— 太阳地球月亮运动
import * as THREE from 'three' //引入控制器 import { OrbitControls } from 'three/examples/jsm/controls/Or ...
OpenGl太阳地球月亮运动系统
在讲解这个运动系统,首先我们的来讲解OpenGl里有关几个图形变换的知识,这里就以球为例,我们需要知道将球平移,旋转的2个知识.因为系统必须用到平移和旋转. 1 平移变换: glTranslatef( ...
Unity学生作业：太阳地球月亮自转和公转
1.第一步打开Unity. 2.第二步在场景中创建3个Sphere球体并分别命名为Moon, Sun和Earth. 在命名完之后调整3个球的大小和位置,并贴上贴图.将Moon作为Earth的子物体 ...
纯css3制作的太阳地球月亮效果
上课无聊看到的,虽然有很多兼容性问题,但先保存吧,原文链接如下: http://buluo.qq.com/p/detail.html?bid=16531&pid=9399270-1461480 ...

webgl 绘制太阳地球月亮

目录

1、开发环境

2、内容说明

1、计算球体的坐标和纹理

2、求顶点索引

3、数据加载到缓存中

4、绘制球体

5、其他

3、运行结果及代码下载

webgl 绘制太阳地球月亮相关推荐

最新文章

热门文章

webgl 绘制太阳 地球 月亮

目录

1、开发环境

2、内容说明

1、计算球体的坐标和纹理

2、求顶点索引

3、数据加载到缓存中

4、绘制球体

5、其他

3、运行结果及代码下载

webgl 绘制太阳 地球 月亮相关推荐

最新文章

热门文章

webgl 绘制太阳地球月亮

webgl 绘制太阳地球月亮相关推荐