创建场景 ·Create Scene· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么生产环境常用的Renderer 配置项setPixelRatio与logarithmicDepthBuffer的作用标准animate 循环模板controls resize render效果说明完整的三维场景框架带天空盒背景、环境光 平行光、OrbitControls 交互、窗口自适应。这是后续大部分案例的起始模板。核心概念Renderer 关键参数const renderer new THREE.WebGLRenderer({antialias: true, // 抗锯齿边缘更平滑 alpha: true, // canvas 透明背景 logarithmicDepthBuffer: true, // 对数深度缓冲大场景 Z-fighting 更少 }); renderer.setPixelRatio(window.devicePixelRatio);| 参数 | 作用 | |------|------| |antialias| MSAA 抗锯齿轻微性能开销 | |logarithmicDepthBuffer| 近远跨度极大时如城市天空深度精度更好 | |setPixelRatio| 视网膜屏清晰渲染建议Math.min(dpr, 2)限上限 |标准 animate 模板function animate() {requestAnimationFrame(animate); controls.update(); // 阻尼需每帧 update renderer.render(scene, camera); } animate();window.addEventListener(resize, () { camera.aspect width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); });实现步骤Scene PerspectiveCamerafov/aspect/near/far 显式传入WebGLRenderer 配置并挂载 DOMOrbitControls enableDamping天空盒 CubeTexture 作 backgroundAmbientLight DirectionalLightrAF 循环 resize 监听与入门案例的区别| 项目 | 入门 | 本案例 | |------|------------------------------------------|--------| | 渲染次数 | 一次 | rAF 持续循环 | | 交互 | 无 | OrbitControls | | 背景 | 默认 | 六面体天空盒 | | 光照 | 无Basic 材质 | 环境光 平行光 | | resize | 无 | 有 |源码完整源码见 在线案例编辑器。核心结构import * as THREE from three;import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;const box document.getElementById(box); const scene new THREE.Scene();const camera new THREE.PerspectiveCamera( 75, box.clientWidth / box.clientHeight, 0.1, 1000 ); camera.position.set(5, 5, 5);const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(box.clientWidth, box.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); box.appendChild(renderer.domElement);const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true;// 天空盒、灯光、模型加载 ...function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate();小结把本案例当作项目脚手架复制后往里加业务模型和特效相关轨道控制器 · 天空盒