模拟太阳系的html,three.js模拟实现太阳系行星体系功能
概况如下:
1、 spheregeometry 实现自转的太阳;
2、 ringgeometry 实现太阳系星系的公转轨道;
3、 imageutils 加载球体和各行星贴图;
4、 canvas 中 createradialgradient 实现太阳发光效果;
5、 three.sprite 精灵实现太阳系行星。
效果图如下:
预览地址:
初始化场景、相机、渲染器,设置相机位置。
// 初始化场景
var scene = new three.scene();
// 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄像机视锥体长宽比,
// 第三个参数为摄像机视锥体近端面,第四个参数为摄像机视锥体远端面
var camera = new three.perspectivecamera(20, dom.clientwidth / dom.clientheight, 1, 100000);
// 设置相机位置,对应参数分别表示x,y,z位置
camera.position.set(0, 0, 500);
var renderer = new three.webglrenderer({
alpha: true,
antialias: true
});
设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。
// 设置窗口尺寸,第一个参数为宽度,第二个参数为高度
renderer.setsize(dom.clientwidth, dom.clientheight);
// 初始化控制器
var orbitcontrols = new three.orbitcontrols(camera,renderer.domelement);
// 将渲染器加载到dom中
dom.appendchild(renderer.domelement);
定义太阳及其材质,太阳通过 spheregeometry 来实现,通过 imageutils 来导入贴图。
// 定义太阳材质
var suntexture = three.imageutils.loadtexture('./image/sun_bg.jpg', {}, function () {
renderer.render(scene, camera);
});
// 太阳以及太阳材质设定
centerball = new three.mesh(new three.spheregeometry(30, 30, 30), new three.meshbasicmaterial({
map: suntexture
}));
scene.add(centerball);
太阳发光效果通过 sprite 引入 canvas 渲染的 createradialgradient 来实现。
/**
* 实现球体发光
* @param color 颜色的r,g和b值,比如:“123,123,123”;
* @returns {element} 返回canvas对象
*/
var generatesprite = function (color) {
var canvas = document.createelement('canvas');
canvas.width = 16;
canvas.height = 16;
var context = canvas.getcontext('2d');
var gradient = context.createradialgradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2,
canvas.height / 2, canvas.width / 2);
gradient.addcolorstop(0, 'rgba(' + color + ',1)');
gradient.addcolorstop(0.2, 'rgba(' + color + ',1)');
gradient.addcolorstop(0.4, 'rgba(' + color + ',.6)');
gradient.addcolorstop(1, 'rgba(0,0,0,0)');
context.fillstyle = gradient;
context.fillrect(0, 0, canvas.width, canvas.height);
return canvas;
};
// 添加太阳发光效果
var centerballlite = new three.sprite(new three.spritematerial({
map: new three.canvastexture(generatesprite(sunspritecolor)),
blending: three.additiveblending
}));
centerballlite.scale.x = centerballlite.scale.y = centerballlite.scale.z = sunscalesize;
scene.add(centerballlite);
太阳系各行星公转轨道通过 ringgeometry 来实现,公转轨道偏移通过 position 来实现,行星体系通过 three.sprite 来实现。
/**
* 返回行星轨道的组合体
* @param starlitesize 行星的大小
* @param starliteradius 行星的旋转半径
* @param rotation 行星组合体的x,y,z三个方向的旋转角度
* @param speed 行星运动速度
* @param imgurl 行星的贴图
* @param scene 场景
* @returns {{satellite: three.mesh, speed: *}} 卫星组合对象;速度
*/
var initsatellite = function (starlitesize, starliteradius, rotation, speed, imgurl, scene) {
var track = new three.mesh(new three.ringgeometry(starliteradius, starliteradius + 0.05, 50, 1), new three.meshbasicmaterial());
var centermesh = new three.mesh(new three.spheregeometry(1, 1, 1), new three.meshlambertmaterial()); //材质设定
var starlite = new three.sprite(new three.spritematerial({
map: three.imageutils.loadtexture(imgurl)
}));
starlite.scale.x = starlite.scale.y = starlite.scale.z = starlitesize;
starlite.position.set(starliteradius, 0, 0);
var pivotpoint = new three.object3d();
pivotpoint.add(starlite);
pivotpoint.add(track);
centermesh.add(pivotpoint);
centermesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centermesh);
return {starlite: centermesh, speed: speed};
};
将创建好的太阳及行星自转公转体系渲染到场景中,自转和公转通过定时修改 position 值来实现,动画使用 requestanimationframe 来实现。
// 执行函数
var render = function () {
renderer.render(scene, camera);
centerball.rotation.y -= 0.01;
for (var i = 0; i < starlites.length; i++) {
starlites[i].starlite.rotation.z -= starlites[i].speed;
}
orbitcontrols.update();
requestanimationframe(render);
}
总结
以上所述是小编给大家介绍的three.js模拟实现太阳系行星体系功能,希望对大家有所帮助
模拟太阳系的html,three.js模拟实现太阳系行星体系功能相关推荐
- js模拟表单html形式,JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法: ...
- dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- 用python画太阳系_用 Python 动态模拟太阳系运转
提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周边行星 ...
- Node.js模拟发起http请求从异步转同步的5种方法
使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...
- python绘制动态模拟图-如何利用Python动态模拟太阳系运转
前言 提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周 ...
- JS模拟模式窗口效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- ul+js模拟select
ul+js模拟select html css .select_box{float: left; } .select_box input{width: 160px;height: 30px;text-a ...
- python模拟太阳系_用 Python 动态模拟太阳系运转
提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周边行星 ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- [js] 模拟 localStorage 时如何实现过期时间功能
[js] 模拟 localStorage 时如何实现过期时间功能 1.存储时记录下有效截止时间 2.取数据时判断是否超过有效时间,在有效期内则返回,不在则提示或返回空并且将其删除 class MySt ...
最新文章
- android 设置setmultichoiceitems设置初始化勾选_阿里巴巴Java开发手册建议创建HashMap时设置初始化容量,但是多少合适呢?...
- 哈佛大学通过百度搜索的数据写了篇论文:新冠病毒起源于去年8月的武汉...
- HTTP 500 服务器内部错误的解决方法
- 关于需求管理的胡思乱想---R3PR
- VMware vCenter Converter:将物理机转换为虚拟机
- mkdir: cannot create directory ‘/soft/hadoop-2.7.3/logs’: Permission denied问题
- ddm模型公式_简单判断目前行情——从股利贴现模型切入
- [BZOJ 2654]tree(陈立杰)
- 《C和指针》——宏中容易出现的错误
- 【Elasticsearch】 es watcher 视频 笔记
- Vue CLI 3 中文文档
- java swing实验_java实验报告Swing
- Spark机器学习:MLlib
- 电压跟随器的特点、作用和应用举例
- 20脚的RSIC-V MCU,竟然可以基于FOC开发PMSM电机
- 大势智慧参加腾讯云启「创见沙龙」,共探“全真互联网”新趋势
- 牛刀小试-Promise
- Windows 2000 单词表
- 如何更换我的密钥对?
- 科创人·中建三局一公司尹奎:数字化变革能创造全新行业,其意义超越形式、范式创新
热门文章
- 嵌入式培训课程哪里好?嵌入式开发学习路线
- 78M05-ASEMI三端正线性稳压器78M05
- 【雕爷学编程】Arduino动手做(59)---RS232转TTL串口模块
- C++A类继承B C类_长期投资指数基金到底选择A类收费还是C类收费
- 指纹识别_Android指纹认证教程
- Excel VLOOKUP实用教程之 08 VLOOKUP如果实现区分大小写的查找?(教程含数据excel)
- Visio 画流图 程序流图 斜线
- 一万年很长,所以只争朝夕
- 计算机按键 shift的作用,Shift键的作用大全 Shift是什么意思
- 财务系统服务器ebs系统,ebs系统(ebs财务系统是什么)