Three.js 模型天空教程

模型天空 ·Model Sky· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么用glTF 天空穹顶模型代替 CubeTexture 六面贴图天空模型与 天空盒 方案的对比renderer.setAnimationLoop与requestAnimationFrame的配合效果说明加载gltfSky/scene.gltf—— 一个半球/穹顶状的天空模型整体缓慢绕 Y 轴旋转产生云卷云舒的动态天景。地面有 GridHelper 辅助定位相机 OrbitControls 环绕观察。核心概念两种天空实现方式| 方式 | 本案例 | 天空盒 skyAndEnv | |------|--------|-----------------------------------------------------| | 实现 | glTF 穹顶 mesh | CubeTexture 六面 PNG | | 背景 | 真实几何体在场景中 |scene.background无穷远 | | 动画 | 可旋转整个天空模型 | 背景随相机转本身不转 | | 优点 | 可带复杂几何/动画 | 实现简单、性能稳定 | | 缺点 | 占 draw call需够大 | 仅静态贴图 |模型天空适合动态云层、 stylized 天空、需要与场景光照统一的项目。glTF 天空模型注意事项尺度天空模型要足够大或相机在模型内部否则能看到穹顶边缘位置通常与场景中心对齐相机在穹顶内部深度常配合material.depthWrite false或渲染顺序避免遮挡问题本 glTF 资源已处理旋转本案例gltf.scene.rotation.y 0.005制造天空流动感setAnimationLoop 与 rAF// 主循环OrbitControls 渲染function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate();// 加载完成后额外注册 setAnimationLoop 只负责转天空 renderer.setAnimationLoop(() { gltf.scene.rotation.y 0.005; });本案例同时存在两个循环animate()的 rAF → 负责controls rendersetAnimationLoop→ 每帧只改天空 rotation::: tip 更清晰的写法 合并为一个循环更规范function animate() {if (sky) sky.rotation.y 0.005; controls.update(); renderer.render(scene, camera); }:::实现步骤Scene / Camera / Renderer / OrbitControls rAFGridHelper AxesHelperGLTFLoader加载gltfSky/scene.gltf→scene.add(gltf.scene)setAnimationLoop或合并进 animate 旋转天空代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three/addons/loaders/GLTFLoader.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 100)camera.position.set(0, 5, 20)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setClearColor(0xffffff, 1)renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping trueanimate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}const gird new THREE.GridHelper(100, 20)scene.add(gird)const axes new THREE.AxesHelper(1000)scene.add(axes)new GLTFLoader().load(FILE_HOST models/glb/gltfSky/scene.gltf, (gltf) {scene.add(gltf.scene)renderer.setAnimationLoop(() gltf.scene.rotation.y 0.005)})完整源码GitHub小结本文提供模型天空完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库