Three.js 随机城市白膜教程

随机城市白膜 ·White Model· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么OrbitControls 相机轨道交互监听窗口resize同步更新 camera 与 renderer效果说明本案例演示随机城市白膜效果生成仿真城市白膜核心用到 OrbitControls。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤搭建灯光与环境如有requestAnimationFrame 循环 update render代码要点import * as THREE from three;import { OrbitControls } from three/examples/jsm/Addons.js; const DOM document.getElementById(box)var scene new THREE.Scene();var camera new THREE.PerspectiveCamera(60, innerWidth / innerHeight); camera.position.set(-1, 0.5, 1).setLength(75);camera.lookAt(scene.position);var renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setAnimationLoop(animationLoop); function animationLoop() { renderer.render(scene, camera); } DOM.appendChild(renderer.domElement);window.addEventListener(resize, () { camera.aspect innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); });var controls new OrbitControls(camera, renderer.domElement); controls.target.set(0, 12, 0);controls.update(); controls.enableDamping true; controls.autoRotate true;var light new THREE.DirectionalLight(white, 3); light.position.set(1, 1, 1); scene.add(light); import { Mesh, MathUtils, PlaneGeometry, Color,BoxGeometry,MeshBasicMaterial } from three;/**生成仿真城市白膜*/ const buildingGeometry new BoxGeometry(1, 1, 1); buildingGeometry.translate(0, 0.5, 0); // 调整几何中心点 const buildingMaterial new MeshBasicMaterial({ color: 0xcccccc }); function generateCityModel() { const citySize 50; // 城市范围 const spacing 10; // 建筑间隔 const maxDistance citySize * spacing; // 最大影响范围 const plane new PlaneGeometry(maxDistance2, maxDistance2); plane.rotateX(-Math.PI / 2) scene.add(new Mesh(plane)) for (let z -citySize; z citySize; z) { for (let x -citySize; x citySize; x) { // 跳过城市中心一定区域避免过密 if (Math.abs(x) 5 Math.abs(z) 5) continue;// 计算建筑位置 const positionX x * spacing; const positionZ z * spacing; const distanceFromCenter Math.sqrt(positionX2 positionZ2);// 根据距离中心的远近调整建筑高度和生成概率 const distanceFactor 1 - MathUtils.clamp(distanceFromCenter / maxDistance, 0, 1); const heightScale Math.pow(distanceFactor, 4); // 高度衰减曲线if (Math.random() distanceFactor) { // 随机生成的概率 const building new Mesh(buildingGeometry, buildingMaterial);// 设置建筑位置 let offset (Math.random()0.5 - 1)spacing building.position.set(positionX offset, 0, positionZ offset);// 设置建筑缩放 building.scale.set( MathUtils.randInt(1, 4), // 宽度随机 1 Math.floor(Math.random()heightScale35), // 高度与距离中心相关 MathUtils.randInt(1, 4) // 深度随机 ); // 随机红色 if (Math.random() 0.1) { building.material building.material.clone(); building.material.color new Color(red); } scene.add(building); } } } }generateCityModel()完整源码GitHub小结本文提供随机城市白膜完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库