three.js模拟实现太阳系行星体系
概况如下:
1、SphereGeometry
实现自转的太阳;
2、RingGeometry
实现太阳系星系的公转轨道;
3、ImageUtils
加载球体和各行星贴图;
4、canvas
中createRadialGradient
实现太阳发光效果;
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模拟实现太阳系行星体系的更多相关文章
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- html+ccs3太阳系行星运转动画之土星有个环,地球有颗小卫星
在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后 ...
- js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- JS 模拟手机页面文件的下拉刷新
js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...
- 由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...
- node.js模拟qq漂流瓶
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) node.js模拟简易漂流瓶,页面有扔瓶子和捡瓶子的功能,一个瓶子只能被捡到一次,阅读完就置状态位, ...
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- js模拟触发事件
html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件] 可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...
随机推荐
- 部分 语法Mysql
##1.创建数据库 CREATE DATABASE S2230MySchool ##2.创建数据表 CREATE TABLE Student ( stuNo INT PRIMARY KEY AUTO_ ...
- java数组扩容
有些时候使用数组代替栈,玩意数组容量不够需要扩容 则: 1.Array.toString();直接遍历打印数组 2.数组扩容采用Array.copyOf(),直接实现数组扩容功能,非常强大 (实际 ...
- Linux ln 命令
Linux 中的文件分为 Hard Link 和 Symbolic Link 两种.Hard Link 文件又被称为硬链接文件.实体链接文件,Symbolic Link 文件则常被称为符号链接.软链接 ...
- BeanFactory体系结构
BeanFactory是Spring中非常重要的一个类,搞懂了它,你就知道了bean的初始化和摧毁过程,对于深入理解IOC有很大的帮助. BeanFactory体系结构 首先看一下使用IDEA生成的继 ...
- 深入理解JVM-java字节码文件结构剖析(1)
public class MyTest1 { private int a = 1; public int getA() { return a; } public void setA(int a) { ...
- oracle RAC LOG_ARCHIVE_DEST_1 与 LOG_ARCHIVE_DEST 冲突解决
在做 oracle RAC 归档日志配置时,出现了一个错误,开始看资料的时候, 注意到了 LOG_ARCHIVE_DEST_n 与 LOG_ARCHIVE_DEST 不能同时使用, 但在配置的时候并没 ...
- 数据结构之队列java版
//java由于泛型的擦除,用起来十分不方便 abstract class BaseQueue<T>{ abstract boolean enQueue(T x); abstract T ...
- bio,nio,aio学习
http://qindongliang.iteye.com/blog/2018539 1 同步 指的是用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪 自己上街买衣服,自己亲自干这件事,别的 ...
- 变量Variable
变量Variable 内存 #conding:utf-8 a = 1 #conding:utf-8 a = 1 b = a #conding:utf-8 a = 1 b = a a = 2 命名规则 ...
- Web 字体 font-family 再探秘
之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family. 该篇文章基本没有太多移动端的字体选择及分析.并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文 ...