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


Posted in HTML / CSS onSeptember 03, 2019

概况如下:

1、 SphereGeometry 实现自转的太阳;

2、 RingGeometry 实现太阳系星系的公转轨道;

3、 ImageUtils 加载球体和各行星贴图;

4、 canvas 中 createRadialGradient 实现太阳发光效果;

5、 THREE.Sprite 精灵实现太阳系行星。

效果图如下:

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

预览地址: three.js模拟实现太阳系行星体系

初始化场景、相机、渲染器,设置相机位置。

// 初始化场景
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 / CSS 相关文章推荐
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 #HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 #HTML / CSS
前端实现打印图像功能
Aug 27 #HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 #HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 #HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 #HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 #HTML / CSS
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Popup弹出框添加数据实现方法
2017/10/27 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
浅析Python中的多条件排序实现
2016/06/07 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python 学习教程之networkx
2019/04/15 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
django rest framework使用django-filter用法
2020/07/15 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
企业安全生产责任书
2014/04/14 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
学校火灾防控方案
2014/06/09 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS