感谢来自BiBi的支持 ·Thanks BiBi· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么EffectComposer 多 Pass 后期处理管线UnrealBloomPass 辉光 Bloom 效果OrbitControls 相机轨道交互CSS2D/3D 标签 DOM 叠加requestAnimationFrame渲染循环与resize自适应效果说明本案例演示感谢来自BiBi的支持效果原场景渲染后经 EffectComposer 叠加 Bloom/模糊等全屏后期核心用到 EffectComposer、UnrealBloomPass、OrbitControls。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。EffectComposer以多 Pass 链式渲染RenderPass → 特效 Pass → 输出屏幕替代直接renderer.render。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。实现步骤搭建灯光与环境如有requestAnimationFrame 循环 update render代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { FontLoader } from three/addons/loaders/FontLoader.js; import { TextGeometry } from three/addons/geometries/TextGeometry.js; import { CSS3DRenderer, CSS3DObject } from three/examples/jsm/renderers/CSS3DRenderer.js import { UnrealBloomPass } from three/examples/jsm/postprocessing/UnrealBloomPass.js; import { EffectComposer } from three/examples/jsm/postprocessing/EffectComposer.js; import { RenderPass } from three/examples/jsm/postprocessing/RenderPass.js;const DOM document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(75, DOM.clientWidth / DOM.clientHeight, 0.1, 10000)camera.position.set(0, 0, 1200)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true , logarithmicDepthBuffer: true})renderer.setSize(DOM.clientWidth, DOM.clientHeight)renderer.setPixelRatio( window.devicePixelRatio * 2)DOM.appendChild(renderer.domElement)scene.add(new THREE.AmbientLight(0xffffff, 2))const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping trueconst renderPass new RenderPass(scene, camera);const bloomPass new UnrealBloomPass(new THREE.Vector2(DOM.clientWidth, DOM.clientHeight), 0.5, 0.4, 0.1);const composer new EffectComposer(renderer);composer.addPass(renderPass);composer.addPass(bloomPass);// Css3DOM const css3DRender setCss3DRenderer(DOM)// 添加内嵌 iframe const iframeDOM document.createElement(iframe)iframeDOM.src //player.bilibili.com/player.html?isOutsidetrueaid116435523210402bvidBV1h3oTB7EERcid37658037265p1iframeDOM.style.width 100%iframeDOM.style.height 80%iframeDOM.style.border noneconst mesh new CSS3DObject(iframeDOM)mesh.scale.multiplyScalar(1.2)mesh.position.y - 120scene.add(mesh)// 添加文字 const loader new FontLoader()loader.load(https://z2586300277.github.io/3d-file-server/ files/json/font.json, font createText(font))animate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)composer.render()css3DRender.render(scene, camera) // Css3D渲染}window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()css3DRender.resize()}function createText(font) {const text Three-Cesium-ExamplesThanks From BiBiStars Collect Forward Commentconst geometry new TextGeometry(text, {font: font,size: 80,depth: 5,curveSegments: 12,bevelEnabled: true,bevelThickness: 8,bevelSize: 3,bevelOffset: 0,bevelSegments: 5})geometry.center()const mesh new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({color:pink}))scene.add(mesh)}/css3d 渲染/ function setCss3DRenderer(DOM) {const css3DRender new CSS3DRenderer()css3DRender.resize () {css3DRender.setSize(DOM.clientWidth, DOM.clientHeight)css3DRender.domElement.style.zIndex 0css3DRender.domElement.style.position relativecss3DRender.domElement.style.top -DOM.clientHeight pxcss3DRender.domElement.style.height DOM.clientHeight pxcss3DRender.domElement.style.width DOM.clientWidth pxcss3DRender.domElement.style.pointerEvents none}css3DRender.resize()DOM.appendChild(css3DRender.domElement)return css3DRender}完整源码GitHub小结本文提供感谢来自BiBi的支持完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库