tQuery 天空盒与行星生成：从 3D 星空到地球的完整教程

tQuery 天空盒与行星生成：从 3D 星空到地球的完整教程

【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquery

tQuery 是一个基于 Three.js 的轻量扩展系统（extension system for three.js），它用 jQuery 式的链式语法大幅简化了 3D 场景开发。本教程将手把手带你完成两件最酷的事：用tQuery 天空盒打造沉浸式 3D 星空背景，再用内置插件一键生成从月球到地球的逼真行星，适合零基础的 WebGL 新手快速入门。

tQuery 是什么：Three.js 的轻量扩展系统

tQuery 把 Three.js 冗长的初始化代码封装成简洁的链式调用。例如创建一个带默认摄像机、灯光和渲染循环的 3D 世界，只需一行：

var world = tQuery.createWorld().boilerplate().start();

配合它庞大的插件生态，你可以像搭积木一样往场景里添加天空盒、行星、粒子系统等一切元素。核心插件代码位于 plugins/skymap/ 与 plugins/planets/ 目录，随项目仓库免费使用。

三步创建 3D 天空盒：最简配置方法

天空盒（Skybox）是用六张贴图包围场景的立方体，能瞬间营造出真实的 3D 星空或自然景观背景。在 tQuery 中创建天空盒只需要三步：

第一步，引入天空盒插件：

<script src="plugins/skymap/tquery.skymap.js"></script> <script src="plugins/skymap/tquery.cubetexture.js"></script>

第二步，创建世界：

var world = tQuery.createWorld().boilerplate().start();

第三步，一行代码添加天空盒：

tQuery.createSkymap('pisa').addTo(world);

就这么简单！createSkymap会自动加载六张立方体贴图，并用THREE.CubeGeometry生成一个包裹整个场景的巨型立方体，核心实现见 tquery.skymap.js。

内置天空盒资源一览

tQuery 预置了多套天空盒资源，无需自己准备贴图。在控制台运行Object.keys(tQuery.TextureCube.WellKnownUrls)即可查看完整列表，常用的包括：

• pisa：比萨斜塔广场，暖色调建筑景观
• skybox：经典云海日落，适合通用场景
• bridge2 / park2 / park3Med：不同风格的公园与桥梁环境
• swedishRoyalCastle：瑞典皇家城堡外景
• mars：火星地表，搭配行星生成非常带感

所有预设的贴图 URL 都定义在 tquery.cubetexture.js 中，资源文件存放在 plugins/assets/images/textures/cube/ 目录。

用立方体贴图打造逼真环境：反射与折射

天空盒的价值不止于背景。同一个立方体贴图还可以作为envMap应用到物体材质上，实现金属般的环境反射，或通过CubeRefractionMapping实现玻璃般的折射效果：

var cubeTexture = tQuery.createCubeTexture('skybox'); // 反射：给环面结物体镀上天空的倒影 tQuery.createTorusKnot().addTo(world) .setBasicMaterial().envMap(cubeTexture).back(); // 折射：换用折射映射即可 cubeTexture.mapping = new THREE.CubeRefractionMapping();

这样你的模型表面就会实时倒映出天空与云层，视觉效果瞬间提升一个档次，完整示例可参考 tips/tquery-skymap/02-reflection/。

从星空开始：一键生成 3D 星空

有了天空背景，再往宇宙深处走一步——用createStarField生成漫天繁星。它会随机分布数千个粒子，形成一片深邃的 3D 星空：

var stars = tQuery.createStarField().addTo(world);

默认生成 2000 颗星星，你也可以自定义数量与分布范围：

var stars = tQuery.createStarField({ nStars : 5000, fieldSize: tQuery.createVector3(20, 20, 20) }).addTo(world);

星星粒子使用了自定义混合模式，边缘柔和、层次分明，实现代码在 tquery.createstarfield.js。把 3D 星空和天空盒叠加使用，就是最经典的太空场景打底方案。

行星生成教程：从月球到地球

接下来是重头戏——行星生成。tQuery 提供了createPlanet插件，内置三种行星模式，用法都极其简单。

简单模式：月球（moon）

默认模式，一行代码生成带月球纹理的球体：

var moon = tQuery.createPlanet('moon').addTo(world);

地球模式：云层与细节（earth）

传入'earth'会生成一个双层结构：地表球体 + 半透明云层球体，云层微微悬浮在表面之上，非常逼真：

var earth = tQuery.createPlanet('earth').addTo(world);

这张 2048x1024 的高清地球贴图来自 plugins/planets/images/earth_atmos_2048.jpg，配合云层贴图 earth_clouds_1024.png 使用：

进阶模式：法线贴图地球（earthNormal）

想要电影级画质？'earthNormal'模式使用法线贴图 + 高光贴图 + 自定义 Shader，让大陆地形呈现出立体的光照细节：

var planet = tQuery.createPlanet('earthNormal').addTo(world);

三种模式的定义都在 tquery.createplanet.js 中，地球和月球纹理资源位于 plugins/planets/images/。

让行星转起来：基础动画

静态的行星不够生动，利用 tQuery 的hook循环钩子，只需几行代码就能让地球自转：

var planet = tQuery.createPlanet('earthNormal').addTo(world); world.hook(function(delta, now) { planet.get(0).rotation.y = 0.05 * now * Math.PI * 2; });

再把 3D 星空放在外层、太阳光从一侧打过来，一个完整的太阳系微缩场景就诞生了。示例页面见 plugins/planets/examples/index.html，动手试试吧！

结语

从天空盒到 3D 星空，再到可自转的逼真行星，tQuery 用极少的代码让 Three.js 开发变得轻松愉快。本篇教程覆盖了 plugins/skymap/ 与 plugins/planets/ 两大核心插件，掌握它们，你就能快速搭建出属于自己的太空漫游场景。下一步，不妨试试把行星放进火星天空盒（'mars'）里，感受异星地表与地球同框的奇妙效果！

【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquery