概况如下:

1、SphereGeometry实现自转的太阳;

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

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

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

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

效果图如下:

预览地址: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模拟实现太阳系行星体系的更多相关文章

  1. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  2. html+ccs3太阳系行星运转动画之土星有个环,地球有颗小卫星

    在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后 ...

  3. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  4. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  5. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

  6. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

  7. node.js模拟qq漂流瓶

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) node.js模拟简易漂流瓶,页面有扔瓶子和捡瓶子的功能,一个瓶子只能被捡到一次,阅读完就置状态位, ...

  8. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  9. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

随机推荐

  1. 部分 语法Mysql

    ##1.创建数据库 CREATE DATABASE S2230MySchool ##2.创建数据表 CREATE TABLE Student ( stuNo INT PRIMARY KEY AUTO_ ...

  2. java数组扩容

    有些时候使用数组代替栈,玩意数组容量不够需要扩容 则: 1.Array.toString();直接遍历打印数组 2.数组扩容采用Array.copyOf(),直接实现数组扩容功能,非常强大   (实际 ...

  3. Linux ln 命令

    Linux 中的文件分为 Hard Link 和 Symbolic Link 两种.Hard Link 文件又被称为硬链接文件.实体链接文件,Symbolic Link 文件则常被称为符号链接.软链接 ...

  4. BeanFactory体系结构

    BeanFactory是Spring中非常重要的一个类,搞懂了它,你就知道了bean的初始化和摧毁过程,对于深入理解IOC有很大的帮助. BeanFactory体系结构 首先看一下使用IDEA生成的继 ...

  5. 深入理解JVM-java字节码文件结构剖析(1)

    public class MyTest1 { private int a = 1; public int getA() { return a; } public void setA(int a) { ...

  6. oracle RAC LOG_ARCHIVE_DEST_1 与 LOG_ARCHIVE_DEST 冲突解决

    在做 oracle RAC 归档日志配置时,出现了一个错误,开始看资料的时候, 注意到了 LOG_ARCHIVE_DEST_n 与 LOG_ARCHIVE_DEST 不能同时使用, 但在配置的时候并没 ...

  7. 数据结构之队列java版

    //java由于泛型的擦除,用起来十分不方便 abstract class BaseQueue<T>{ abstract boolean enQueue(T x); abstract T ...

  8. bio,nio,aio学习

    http://qindongliang.iteye.com/blog/2018539 1 同步 指的是用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪 自己上街买衣服,自己亲自干这件事,别的 ...

  9. 变量Variable

    变量Variable 内存 #conding:utf-8 a = 1 #conding:utf-8 a = 1 b = a #conding:utf-8 a = 1 b = a a = 2 命名规则 ...

  10. Web 字体 font-family 再探秘

    之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family. 该篇文章基本没有太多移动端的字体选择及分析.并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文 ...