溶解动画 ·Dissolve· ▶ 在线运行案例案例合集三维可视化功能案例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 threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import Stats from three/examples/jsm/libs/stats.module.jsvar scene, camera, renderer, clock, controller, stats var dissolveMaterials []init(); animate();function init() { scene new THREE.Scene(); clock new THREE.Clock(); camera new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(15, 5, 15) renderer new THREE.WebGLRenderer({ antialias: true, // 开启抗锯齿处理 alpha: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio)let shader_material new THREE.ShaderMaterial({ uniforms: { dissolveMap: { value: new THREE.TextureLoader().load(FILE_HOST threeExamples/shader/tex2.png) }, texture2: { value: new THREE.TextureLoader().load(FILE_HOST threeExamples/shader/earth1.jpg) }, color: { value: new THREE.Color(1, 0, 0) }, time: { value: 0 }, flag: { value: true } }, vertexShader:varying vec2 vUv; varying vec3 worldPos; void main() { vUv uv; worldPos (modelMatrix * vec4(position, 1.0)).xyz; gl_Position projectionMatrixmodelViewMatrixvec4(position, 1.0); }, fragmentShader:varying vec2 vUv; uniform sampler2D dissolveMap; uniform sampler2D texture2; uniform float time; varying vec3 worldPos; uniform bool flag; void main() { float bottom -2.0; float top 2.0; float yScale (worldPos.y - bottom)/(top - bottom); vec4 color texture2D( texture2, vUv); //vec4 color vec4(1.0, 0.0, 0.0, 0.3); //float t 1. - fract(time); float t; if(flag) { t fract(time); }else { t 1. - fract(time); } float h texture2D( dissolveMap, vUv).r;float dissolveWidth 4.0; // 值越大越窄float condition_if_1 step(h yScaledissolveWidth, t(dissolveWidth 1.0) 0.04); float condition_if_2 step(h yScaledissolveWidth, t(dissolveWidth 1.0)); color mix(color, vec4(1.0 ,1.0 , 0.0, 1.0), condition_if_1 ); color color * (1. - condition_if_2); gl_FragColor color; }, transparent: true, depthWrite: false }); dissolveMaterials.push(shader_material)var axisHelper new THREE.AxesHelper(10); scene.add(axisHelper) stats new Stats() document.body.appendChild(stats.dom);var geometry new THREE.BoxGeometry(4, 4, 4); var cube new THREE.Mesh(geometry, shader_material); scene.add(cube);controller new OrbitControls(camera, renderer.domElement); document.body.appendChild(renderer.domElement); window.onresize onResize; }function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); stats.update(); controller.update(clock.getDelta()); updateMaterial() }function updateMaterial() { dissolveMaterials.map(m { m.uniforms.time.value 0.005 if (m.uniforms.time.value 1) { m.uniforms.time.value 0 m.uniforms.flag.value !m.uniforms.flag.value } }) }function onResize() { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }完整源码GitHub小结本文提供溶解动画完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
Three.js 溶解动画教程
溶解动画 ·Dissolve· ▶ 在线运行案例案例合集三维可视化功能案例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 threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import Stats from three/examples/jsm/libs/stats.module.jsvar scene, camera, renderer, clock, controller, stats var dissolveMaterials []init(); animate();function init() { scene new THREE.Scene(); clock new THREE.Clock(); camera new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(15, 5, 15) renderer new THREE.WebGLRenderer({ antialias: true, // 开启抗锯齿处理 alpha: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio)let shader_material new THREE.ShaderMaterial({ uniforms: { dissolveMap: { value: new THREE.TextureLoader().load(FILE_HOST threeExamples/shader/tex2.png) }, texture2: { value: new THREE.TextureLoader().load(FILE_HOST threeExamples/shader/earth1.jpg) }, color: { value: new THREE.Color(1, 0, 0) }, time: { value: 0 }, flag: { value: true } }, vertexShader:varying vec2 vUv; varying vec3 worldPos; void main() { vUv uv; worldPos (modelMatrix * vec4(position, 1.0)).xyz; gl_Position projectionMatrixmodelViewMatrixvec4(position, 1.0); }, fragmentShader:varying vec2 vUv; uniform sampler2D dissolveMap; uniform sampler2D texture2; uniform float time; varying vec3 worldPos; uniform bool flag; void main() { float bottom -2.0; float top 2.0; float yScale (worldPos.y - bottom)/(top - bottom); vec4 color texture2D( texture2, vUv); //vec4 color vec4(1.0, 0.0, 0.0, 0.3); //float t 1. - fract(time); float t; if(flag) { t fract(time); }else { t 1. - fract(time); } float h texture2D( dissolveMap, vUv).r;float dissolveWidth 4.0; // 值越大越窄float condition_if_1 step(h yScaledissolveWidth, t(dissolveWidth 1.0) 0.04); float condition_if_2 step(h yScaledissolveWidth, t(dissolveWidth 1.0)); color mix(color, vec4(1.0 ,1.0 , 0.0, 1.0), condition_if_1 ); color color * (1. - condition_if_2); gl_FragColor color; }, transparent: true, depthWrite: false }); dissolveMaterials.push(shader_material)var axisHelper new THREE.AxesHelper(10); scene.add(axisHelper) stats new Stats() document.body.appendChild(stats.dom);var geometry new THREE.BoxGeometry(4, 4, 4); var cube new THREE.Mesh(geometry, shader_material); scene.add(cube);controller new OrbitControls(camera, renderer.domElement); document.body.appendChild(renderer.domElement); window.onresize onResize; }function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); stats.update(); controller.update(clock.getDelta()); updateMaterial() }function updateMaterial() { dissolveMaterials.map(m { m.uniforms.time.value 0.005 if (m.uniforms.time.value 1) { m.uniforms.time.value 0 m.uniforms.flag.value !m.uniforms.flag.value } }) }function onResize() { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }完整源码GitHub小结本文提供溶解动画完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
