当前位置：首页 > news >正文

Three.js 冰面教程

news 2026/7/8 0:24:25

冰面 ·Ice Floor· ▶ 在线运行案例

案例合集：三维可视化功能案例（threehub.cn）
开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
400个案例代码:网盘链接

你将学到什么

ShaderMaterial 自定义着色器实现核心视觉效果
OrbitControls 相机轨道交互
requestAnimationFrame渲染循环与resize自适应

效果说明

本案例演示冰面效果：基于 WebGL 实现「冰面」可视化效果，附完整可运行源码；核心用到 ShaderMaterial、OrbitControls。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

Scene / Camera / WebGLRenderer构成最小渲染闭环；大场景可开logarithmicDepthBuffer缓解 Z-fighting。
ShaderMaterial通过uniforms+ 自定义 GLSL 控制逐像素/逐点效果；透明粒子常配合depthTest: false。
OrbitControls提供轨道旋转/缩放；开启enableDamping后需在 animate 中controls.update()。

实现步骤

搭建 Scene、PerspectiveCamera、WebGLRenderer，挂载 canvas 并处理resize
定义 uniforms / onBeforeCompile 或 ShaderMaterial，编写 GLSL 与材质参数
创建 OrbitControls（及 Raycaster 等交互控件，若源码包含）
在requestAnimationFrame循环中更新状态并 render（Cesium 为viewer.render或自动渲染）

代码要点

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, 100000)
camera.position.set(5, 5, 5)
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
renderer.setSize(box.clientWidth, box.clientHeight)
box.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true
// https://github.com/rock-biter/ice-trails const textureLoader = new THREE.TextureLoader() const crackMap = textureLoader.load(FILE_HOST + 'images/shader/cracks.png') crackMap.wrapS = THREE.RepeatWrapping crackMap.wrapT = THREE.RepeatWrapping const perlinMap = textureLoader.load(FILE_HOST + 'images/shader/smokeMap.png') perlinMap.wrapS = THREE.RepeatWrapping perlinMap.wrapT = THREE.RepeatWrapping const groundMaterial = new THREE.ShaderMaterial({ vertexShader:uniform float uParallaxDistance;
varying vec2 vParallax; varying vec2 vUv;
void main() {
vUv = uv;
vec3 pos = position; vec4 wPos = modelMatrix * vec4(pos, 1.0);
mat3 tbn = mat3(vec3(1.,0,0), vec3(0,0.,-1.), vec3(0.,1.,0.)); tbn = transpose(tbn);
vec3 viewDir = normalize(wPos.xyz - cameraPosition); vec3 tbnViewDir = tbn * viewDir;
vParallax = tbnViewDir.xy; vParallax *= uParallaxDistance / dot(-tbnViewDir, vec3(0.0,0.0,1.0));
gl_Position = projectionMatrixviewMatrixwPos;}, fragmentShader:uniform sampler2D uCracksMap; uniform sampler2D uTrailMap; uniform sampler2D uPerlin;
varying vec2 vParallax; varying vec2 vUv;
void main() {
float perlin = texture(uPerlin, vUv).r; float perlin2 = texture(uPerlin, vUv * 10.).r; vec3 trail = texture(uTrailMap, vUv).rgb; float cracks = texture(uCracksMap, vUv * 4.).r; float nomalization = 1.0;
vec3 colorBlue = vec3(0.0,0.2,0.25); vec3 colorDeepBlue = vec3(0.0,0.01,0.03); vec3 colorGreen = vec3(0.1,0.2,0.35);
float accumulateFrosted = 0.;
for (int i = 0; i < 50; i++) { float aplitude = float(70 - i) / 1.; vec2 uv = vUv4. + vParallax0.002 * float(i + 1);
float currCrack = (1. - texture(uCracksMap, uv ).r) * aplitude;
float currTrail = texture(uTrailMap, vUv + vParallax0.0025float(i + 1)).r;
currCrack = currCrack * step(0.7, 1. - pow(currTrail,0.7));
cracks += currCrack; nomalization += aplitude;
accumulateFrosted += currTrail * aplitude; } cracks /= nomalization; accumulateFrosted /= nomalization; cracks += pow(1. - texture(uCracksMap, vUv4.).r, 3.)3. * step(0.92, 1. - pow(trail.r,0.6)); vec3 cracksParallax = texture(uCracksMap, vUv2. + vParallax0.1).rgb; // color += 1. - cracks; // color += 1.0 - cracksParallax;
vec3 frosted = colorBlue3. + perlin0.6 + perlin2 * 0.6; vec3 cracksColor = mix(colorBlue, colorGreen, pow(cracks,1.) * 1.); cracksColor += pow(cracks,1.) * 2.; cracksColor= perlin8. * colorBlue; cracksColor += pow(cracks,1.) * 0.5; // cracksColor= perlin24.;
vec3 prxCracksColor = mix(colorDeepBlue, colorBlue, pow(1. - cracksParallax.r,3.) * 10.); prxCracksColor *= perlin; cracksColor = mix(cracksColor, prxCracksColor, 0.3);
// vec3 color = mix(cracksColor, frosted, pow(trail.r,0.5)); // cracksColor = mix(cracksColor, vec3(0.1,0.7,0.7), pow(accumulateFrosted,1.5)); vec3 deepColor = mix(vec3(0.1,0.7,0.7),vec3(0., 0.3, 1.), 1. - pow(accumulateFrosted,1.5)); cracksColor = mix(cracksColor, deepColor, pow(accumulateFrosted,1.5)); vec3 color = mix(cracksColor, frosted, pow(trail.r,0.5) ); // color = mix( color, colorBlue * frosted, pow(trail.r,3.));
vec2 uv = vUv - 0.5; uv *= 2.0; color = mix(color, vec3(0.0, 0.01, 0.02), smoothstep(0.2,1.,length(pow(abs(uv), vec2(1.)))));
// 添加边缘透明度处理，剔除边缘纯色部分 float edgeDistance = length(uv); float alpha = 1.0 - smoothstep(0.8, 1.0, edgeDistance);
gl_FragColor = vec4(color, alpha);#include #include }, transparent: true, side: THREE.DoubleSide, uniforms: { uTrailMap: new THREE.Uniform(), uCracksMap: new THREE.Uniform(crackMap), uPerlin: new THREE.Uniform(perlinMap), uParallaxDistance: new THREE.Uniform(1), }, })
const groundGeometry = new THREE.PlaneGeometry(15, 15) groundGeometry.rotateX(-Math.PI * 0.5) const ground = new THREE.Mesh(groundGeometry, groundMaterial) scene.add(ground)
animate()
function animate() {
controls.update() requestAnimationFrame(animate) renderer.render(scene, camera)
}
window.onresize = () => {
renderer.setSize(box.clientWidth, box.clientHeight) camera.aspect = box.clientWidth / box.clientHeight camera.updateProjectionMatrix()
}