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

tQuery 天空盒与行星生成从 3D 星空到地球的完整教程【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquerytQuery 是一个基于 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 srcplugins/skymap/tquery.skymap.js/script script srcplugins/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考