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实现超炫的loading加载动画效果
May 07 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS 制作波浪效果的思路
May 18 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查询域名状态whois的类
2006/11/25 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
jQuery无冲突模式详解
2019/01/17 jQuery
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
python分割和拼接字符串
2013/11/01 Python
python实现简易云音乐播放器
2018/01/04 Python
python之信息加密题目详解
2019/06/26 Python
python django中8000端口被占用的解决
2019/12/17 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
Java的五个基础面试题
2016/02/26 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
2014应届本科生自我评价
2014/09/13 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
idea下配置tomcat避坑详解
2022/04/12 Servers