概况如下:

1、SphereGeometry实现自转的太阳,土星;

2、RingGeometry实现土星公转轨道;

3、ImageUtils加载球体贴图;

4、canvascreateRadialGradient实现太阳发光效果;

5、THREE.RingGeometry实现土星公转轨道。

效果图如下:

预览地址:three.js实现土星绕太阳体系

初始化场景、相机、渲染器,设置相机位置,初始化光源,光源采用点光源PointLight,设置光源位置为场景中心位置,并将光源加入场景中。

 // 初始化场景
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, 300);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
// 设置光照,第一个参数表示光颜色,第二个参数为光照强度,范围为0-1,默认值为1,
var lights = new THREE.PointLight('#ffffff', 1);
lights.position.set(0, 0, 0);
scene.add(lights);

设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。

 // 设置窗口尺寸,第一个参数为宽度,第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);

定义太阳及其材质,太阳通过SphereGeometry来实现,通过ImageUtils来导入贴图。

 // 定义太阳材质,sunImgUrl表示太阳贴图地址
var sunTexture = THREE.ImageUtils.loadTexture(sunImgUrl, {}, function () {
renderer.render(scene, camera);
});
// 使用SphereGeometry实现太阳球体,sunSize表示球体半径
var centerBall = new THREE.Mesh(new THREE.SphereGeometry(sunSize, 30, 50), new THREE.MeshBasicMaterial({
map: sunTexture
}));

太阳发光效果通过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);
scene.add(centerBall);

实现土星绕太阳公转体系,公转轨道通过RingGeometry来实现,公转轨道偏移通过position来实现。

 // 创建土星体系
var createSsaturnLite = function () {
// 添加土星体系
saturnMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
// 土星对应元素
// 土星公转轨道
var track = new THREE.Mesh(new THREE.RingGeometry(saturnLiteRadius, saturnLiteRadius + 0.1, 50, 1), new THREE.MeshBasicMaterial());
saturnLite = new THREE.Mesh(new THREE.SphereGeometry(saturnLiteSize, 30, 30), new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture(imgUrl)
}));
saturnLite.position.set(saturnLiteRadius, 0, 0);
saturnLite.rotation.x = 1.9;
// 土星环对应元素
// 土星环公转轨道
var trackRing = new THREE.Mesh(new THREE.RingGeometry(saturnLiteSize + 3, saturnLiteSize + 8, 50, 1), new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(ringImgUrl),
side: THREE.DoubleSide
}));
// 土星环轨道中心
ringPoint = new THREE.Object3D();
ringPoint.add(trackRing);
ringPoint.position.set(saturnLiteRadius, 0, 0);
ringPoint.rotation.x = 0.3; var earthPoint = new THREE.Object3D();
earthPoint.add(saturnLite);
earthPoint.add(track);
earthPoint.add(ringPoint);
saturnMesh.add(earthPoint);
saturnMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(saturnMesh);
}

将创建好的太阳,土星自转公转体系渲染到场景中,自转和公转通过定时修改position值来实现,动画使用requestAnimationFrame来实现。

 // 执行函数
var render = function () {
renderer.render(scene, camera);
centerBall.rotation.y -= sunSpeed;
saturnMesh.rotation.z -= saturnRotationSpeed;
orbitcontrols.update();
requestAnimationFrame(render);
}

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

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

    概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRa ...

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

    前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library ...

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

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> ...

  4. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  5. vue.js路由vue-router(一)——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

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

    1.项目介绍 JS+HTML实现绕地球飞行的3D飞行线动画效果,且3D地球可以随意拖动和滑动缩放,画面中心是蓝色地球,地球表面上的两点连线之间有光电随机出现沿着抛物线轨迹3D飞行,可使用较好的浏览器打 ...

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

    目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...

  8. canvas绘制太阳系

    原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 ...

  9. JavaScript tips ——搞定闰年

    前言 处理时间时,常常要考虑用户的输入是否合法,其中一个很典型的场景就是平闰年的判断,网上其实有很多类似的算法,但是其实不必那么麻烦,下面我讲讲的我的思路. 规则 公元年数可被4整除为闰年,但是整百( ...

随机推荐

  1. hdu 2955 Robberies (01背包好题)

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. 《Java基础知识》Java 运算符

    计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量.我们可以把运算符分成以下几组: 算术运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 其他运 ...

  3. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  4. 参加杭州 2019 AI Bootcamp有感与总结(1)

    上周末参加了微软人工智能的活动,感慨多多. 感谢活动主讲和主办方. 通过参加活动,对微软认知服务和ML.NET的现状与发展有了更多的认识.文章不是活动内容的堆叠,总结少点,更多的大概是感慨. 微软认知 ...

  5. 【zabbix服务】修改zabbix_server默认端口号

    1. zabbix-server的默认端口号是10051.如果存在端口号冲突,需要更改端口号. 2. 更改配置文件 # 监听端口这行默认被注释的(将下面的端口改为自己定义的) [root@tanbao ...

  6. 如何将本地的项目推送到github

    一.创建密钥 1.本地终端命令行生成密钥 访问密钥创建的帮助文档:https://help.github.com/en/github/authenticating-to-github/generati ...

  7. jumpserver 资产管理及授权

    1.用户管理-添加[用户列表] 1.1点击创建用户 1.2创建用户 2.用户管理-添加[用户组] 2.1点击创建用户组 2.2创建用户组   3.资产管理添加资产 3.1添加节点 3.2添加资产(点击 ...

  8. JavaScript高阶函数(Heigher-order function)

    概念 <javascript设计模式和开发实践>中定义 函数既可作为参数被传递,也可以作为返回值输出 满足以下条件: 接受一个或多个函数作为输入 输出一个函数 高阶函数一般是那些函数型包含 ...

  9. OpenStack与ZStack深度对比:架构、部署、计算、运维监控等

    摘要 OpenStack从2010年开源至今,已经走过9个年头,其正在进入主流企业市场,但该项目依然面临较难部署和管理的老问题.有一点是毫无疑问的,那就是OpenStack保持着高速增长的态势,超过5 ...

  10. 团队项目之Alpha阶段项目复审

    组的名字和链接 优点 缺点,bug报告 最终名次 六姑娘 https://www.cnblogs.com/liujiamei/p/11992659.html 团队的小程序功能齐全,这说明团队在需求分析 ...