Three.js 扭曲教程-北京尧图网络

扭曲 ·Vortex Shader· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么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循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as THREE from three;import { GUI } from three/addons/libs/lil-gui.module.min.js; import { OrbitControls } from three/addons/controls/OrbitControls.js; import Stats from three/addons/libs/stats.module.js;var container; var scene, camera, renderer; var controls; var stats;var cubeMaterial;init(); update(); createGUI();function init() { container document.getElementById(box);// scene scene new THREE.Scene();// camera camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(1, 1, 1); camera.target new THREE.Vector3(0, 0, 0); scene.add(camera);// renderer renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement);controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.minDistance 2; controls.maxDistance 10; stats new Stats(); document.body.appendChild(stats.dom);// light initLight();// model initModel();// event window.addEventListener(resize, onWindowResize, false); }function initLight() { var light new THREE.DirectionalLight(0xffffff); light.position.set(0, 200, 100); scene.add(light); }// model function initModel() { const cubeShader { uniforms: { tDiffuse: { type: t, value: new THREE.TextureLoader().load(FILE_HOST threeExamples/shader/dlam.jpg) }, vScreenSize: { type: v2, value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, vCenter: { type: v2, value: new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2) }, fRadius: { type: f, value: window.innerWidth / 2.0 }, fUzuStrength: { type: f, value: 2.0 }, }, vertexShader:varying vec2 vUv; void main(){ vUv uv; gl_Position projectionMatrixmodelViewMatrixvec4(position, 1.0); }, fragmentShader:uniform sampler2D tDiffuse; varying vec2 vUv; uniform vec2 vScreenSize; uniform vec2 vCenter; uniform float fRadius; uniform float fUzuStrength;void main() { vec2 pos (vUv * vScreenSize) - vCenter; float len length(pos); if (len fRadius) { gl_FragColor texture2D(tDiffuse, vUv); return; }float uzu min(max(1.0 - (len / fRadius), 0.0), 1.0) * fUzuStrength; float x pos.xcos(uzu) - pos.ysin(uzu); float y pos.xsin(uzu) pos.ycos(uzu); vec2 retPos (vec2(x, y) vCenter) / vScreenSize; vec4 color texture2D(tDiffuse, retPos); gl_FragColor color; }, }cubeMaterial new THREE.ShaderMaterial({ uniforms: cubeShader.uniforms, vertexShader: cubeShader.vertexShader, fragmentShader: cubeShader.fragmentShader, side: THREE.DoubleSide });var geometry new THREE.PlaneGeometry(); var cube new THREE.Mesh(geometry, cubeMaterial); scene.add(cube); }function update() { requestAnimationFrame(update); renderer.render(scene, camera);controls.update(); stats.update(); }function onWindowResize() { var w window.innerWidth; var h window.innerHeight; camera.aspect w / h; camera.updateProjectionMatrix();renderer.setSize(w, h); }function createGUI() { var gui new GUI(); gui.add(cubeMaterial.uniforms[fRadius], value, 1.0, 1000.0).step(1.0).name(radius); gui.add(cubeMaterial.uniforms[fUzuStrength], value, -4.0, 4.0).step(0.1).name(uzuStrength); }完整源码GitHub小结本文提供扭曲完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集与 GitHub 开源仓库

Three.js 扭曲教程

相关推荐

3PEAK思瑞浦 T74L1G17Q-SC5R-S SOT353 缓冲器和收发器

3PEAK思瑞浦 T74L1G126Q-SC5R-S SOT353 缓冲器和收发器

Python深入浅出：从入门到工程实践14

更多资讯

从制度到行动：业务连续性管理办法的RTO/RPO与演练实践

Now Playing 检测不到歌曲？5 大音频设备与平台切换排查技巧

网络分析仪校准全解析：12项误差模型与Smart Cal实践

WorkBuddy_新建任务与工作模式13_Plan模式的完整流程

基于SSM的机房管理系统源码：设备台账与IP资源全流程管理

Stewart平台MATLAB仿真：逆解、动力学与实时可视化全流程实现

今日更新

MATLAB缩进快捷键与批量格式化实战指南

用Poco实现Qt风格信号与槽的跨平台C++方案

ESXi裸机虚拟化安装指南：从硬件兼容到虚拟机部署

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？