最近研究了一下Three.js发现功能很强大,把之前写过的太阳系改造成3D版本,效果还不错,废话少说,直接上图:
下面我来简单的介绍一下实现过程。太阳系包含太阳,8大行星及其它们各自的卫星,在此着重介绍下地月运动。
1. 创建太阳(自发光)
function createSphere_sun(radius, segments,img){
return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments),new THREE.MeshLambertMaterial( {
//加载太阳纹理
map: THREE.ImageUtils.loadTexture(img) ,
//球体亮度,颜色越灰,球体越暗
emissive:0xffffff
}));
}
2. 创建太阳光线
/**
* 太阳光线
* @returns {THREE.ShaderSprite.sprite|{vertexShader, fragmentShader}|*|THREE.ShaderLib.sprite}
*/
function createSprits(color,img){
return new THREE.Sprite(new THREE.SpriteMaterial(
{
map: new THREE.ImageUtils.loadTexture( 'images/solar/glow.png' ),
useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center,
color: 0xFEAB10, transparent: true, blending: THREE.AdditiveBlending
}));
}
3. 创建行星体(向阳面和被阴面)
function createSphere(radius, segments,img) {
return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture(img),//加载星体纹理
}));
}
4. 创建星体公转轨道
/**
* 画轨道(天体轨道)
* @param radius 轨道半径
* @param segments
* @param angle
* @param opacity 透明度
* @returns {THREE.Mesh}
*/
function createOrbit(radius, segments,angle,opacity){
//innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength
var orbit = new THREE.Mesh(new THREE.RingGeometry(radius, radius + 8, 2 * segments, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('images/ring.png'),
side: THREE.DoubleSide,
transparent: true,
//透明度
opacity: opacity
}));
orbit.rotation.set(angle,0, 0);
return orbit;
}
5. 地月运动
function drawEarthAndMoon(axisHelper){
//创建地球
earth = createSphere(30,32,'images/solar/earth.jpg');
//地球自转倾斜角度
earth.rotation.set(Math.PI / 4,0, 0);
//创建月球
moon = createSphere(15,32,'images/solar/moon.jpg');
//在以地球球心为原点的坐标系中的位置
moon.position.set(80,0,0);
//月球公转:月球绕地球中心旋转
moon_object3D = new THREE.Object3D();//moon_object3D 将月球与地球绑定,以地球球心为中心旋转(即月球公转)
moon_object3D.position.set(500,0,0);//moon_object3D的位置为地球球心
//添加地球
moon_object3D.add(earth);
//添加月球
moon_object3D.add(moon);
//添加月球公转轨道
moon_object3D.add( createOrbit(80,50,Math.PI / 2,0.3));
//地球公转:地球绕太阳中心旋转
earth_object3D = new THREE.Object3D();
earth_object3D.add(moon_object3D);
moon_object3D.add(axisHelper);
earth_object3D.add(axisHelper);
scene.add(earth_object3D);
//添加地球公转轨道
scene.add(createOrbit(500,500,Math.PI / 2,0.3));
}
//画太阳系
function drawSolarSystem() {
var axisHelper = new THREE.AxisHelper(4);
// CUSTOM // 地球-月球
drawEarthAndMoon(axisHelper);
}
function render() {
earth_object3D.rotation.y += 0.001;//地球公转
moon_object3D.rotation.y += 0.01;//月球公转
earth.rotation.y += 0.01;//地球自转
moon.rotation.y += 0.01;//月球自转
requestAnimationFrame(animate);
renderer.render( scene, camera );
}
第一个版本做的比较简略,细节等下个版本完善后再作介绍。
想获取源码者请点击以下链接,别忘了点个赞哦 ∩_∩
学习交流QQ群 : 3D-WebGL学习交流群 391273975
原网址: 访问
创建于: 2018-10-13 16:36:50
目录: default
标签: 无
未标明原创文章均为采集,版权归作者所有,转载无需和我联系,请注明原出处,南摩阿彌陀佛,知识,不只知道,要得到
java windows火焰图_mob64ca12ec8020的技术博客_51CTO博客 - 在windows下不可行,不知道作者是怎样搞的 监听SpringBoot 服务启动成功事件并打印信息_监听springboot启动完毕-CSDN博客 SpringBoot中就绪探针和存活探针_management.endpoint.health.probes.enabled-CSDN博客 u2u转换板 - 嘉立创EDA开源硬件平台 Spring Boot 项目的轻量级 HTTP 客户端 retrofit 框架,快来试试它!_Java精选-CSDN博客 手把手教你打造一套最牛的知识笔记管理系统! - 知乎 - 想法有重合-理论可参考 安宇雨 闲鱼 机械键盘 客制化 开贴记录 文本 linux 使用find命令查找包含某字符串的文件_beijihukk的博客-CSDN博客_find 查找字符串 ---- mac 也适用 安宇雨 打字音 记录集合 B站 bilibili 自行搭建 开坑 真正的客制化 安宇雨 黑苹果开坑 查找工具包maven pom 引用地 工具网站 Dantelis 介绍的玩轴入坑攻略 --- 关于轴的一些说法 --- 非官方 ---- 心得而已 --- 长期开坑更新 [本人问题][新开坑位]关于自动化测试的工具与平台应用 机械键盘 开团 网站记录 -- 能做一个收集的程序就好了 不过现在没时间 -- 信息大多是在群里发的 - 你要让垃圾佬 都去一个地方看难度也是很大的 精神支柱 [超级前台]sprinbboot maven superdesk-app 记录 [信息有用] [环境准备] [基本完成] [sebp/elk] 给已创建的Docker容器增加新的端口映射 - qq_30599553的博客 - CSDN博客 [正在研究] Elasticsearch, Logstash, Kibana (ELK) Docker image documentation elasticsearch centos 安装记录 及 启动手记 正式服务器 39 elasticsearch 问题合集 不断更新 6.1.1 | 6.5.1 两个版本 博客程序 - 测试 - bug记录 等等问题 laravel的启动过程解析 - lpfuture - 博客园 OAuth2 Server PHP 用 Laravel 搭建带 OAuth2 验证的 RESTful 服务 | Laravel China 社区 - 高品质的 Laravel 和 PHP 开发者社区 利用Laravel 搭建oauth2 API接口 附 Unauthenticated 解决办法 - 煮茶的博客 - SegmentFault 思否 使用 OAuth2-Server-php 搭建 OAuth2 Server - 午时的海 - 博客园 基于PHP构建OAuth 2.0 服务端 认证平台 - Endv - 博客园 Laravel 的 Artisan 命令行工具 Laravel 的文件系统和云存储功能集成 浅谈Chromium中的设计模式--终--Observer模式 浅谈Chromium中的设计模式--二--pre/post和Delegate模式 浅谈Chromium中的设计模式--一--Chromium中模块分层和进程模型 DeepMind 4 Hacking Yourself README.md update 20211011
Laravel China 简书 知乎 博客园 CSDN博客 开源中国 Go Further Ryan是菜鸟 | LNMP技术栈笔记 云栖社区-阿里云 Netflix技术博客 Techie Delight Linkedin技术博客 Dropbox技术博客 Facebook技术博客 淘宝中间件团队 美团技术博客 360技术博客 古巷博客 - 一个专注于分享的不正常博客 软件测试知识传播 - 测试窝 有赞技术团队 阮一峰 语雀 静觅丨崔庆才的个人博客 软件测试从业者综合能力提升 - isTester IBM Java 开发 使用开放 Java 生态系统开发现代应用程序 pengdai 一个强大的博主 HTML5资源教程 | 分享HTML5开发资源和开发教程 蘑菇博客 - 专注于技术分享的博客平台 个人博客-leapMie 流星007 CSDN博客 - 舍其小伙伴 稀土掘金 Go 技术论坛 | Golang / Go 语言中国知识社区
最新评论