--- title: Building an Interactive Wave Propagation Cube Grid with... description: A detailed tutorial on building an interactive 3D wave propagation cube grid using Three.js. Covers project structure with Vite, setting up an InstancedMesh... canonical: https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building an Interactive Wave Propagation Cube Grid with Three.js | daily.dev og:description: A detailed tutorial on building an interactive 3D wave propagation cube grid using Three.js. Covers project structure with Vite, setting up an InstancedMesh... og:url: https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10 og:image: https://api.daily.dev/og/posts/BQGDu2m10.png og:image:alt: Building an Interactive Wave Propagation Cube Grid with Three.js og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building an Interactive Wave Propagation Cube Grid with Three.js **[Codrops](https://daily.dev/sources/codrops)** · 18 min read · 1 upvotes · 0 comments ## Summary A detailed tutorial on building an interactive 3D wave propagation cube grid using Three.js. Covers project structure with Vite, setting up an InstancedMesh grid with MeshPhongMaterial, implementing a mouse trail system using DataTexture to pass trail data to the GPU, and writing a custom vertex shader via onBeforeCompile to create Gaussian wave envelopes with time-fade, distance attenuation, and speed attenuation. Also covers color mixing in the fragment shader, syncing shadow depth materials, post-processing with EffectComposer using a custom vignette + chromatic aberration shader, GPU optimizations, and a mobile fallback with auto-generated random trail points. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you make an InstancedMesh cast and receive shadows correctly when its vertices are displaced by a custom vertex shader in Three.js? Create a separate MeshDepthMaterial, apply the exact same onBeforeCompile vertex shader override used on the main material, and assign it to the InstancedMesh's customDepthMaterial property. This keeps the shadow map pass deformed identically to the main camera pass, since Three.js requires matching vertex displacement in both passes to avoid shadow misalignment artifacts. _See the full shader setup on daily.dev for developers wiring custom shadows into instanced Three.js scenes._ ### Why was PCFSoftShadowMap replaced or avoided in a recent Three.js version? PCFSoftShadowMap was deprecated as of Three.js r182, so PCFShadowMap is used instead for the renderer's shadowMap.type when building shadow-casting instanced meshes. Increasing the light's shadow.radius (e.g., to 6) is the recommended way to achieve softer shadow edges without relying on the deprecated shadow map type. _Developers tracking Three.js shadow API changes can follow rendering updates like this on daily.dev._ ### How can you make overlapping ripple waves blend smoothly instead of creating chaotic spikes in a shader-based wave simulation? Compute a weighted average of wave heights rather than simply summing them: accumulate both a weighted waveHeight and a totalWeight for every trail point contributing to a vertex, then divide waveHeight by max(totalWeight, 1.0). This cancels out chaotic superposition from overlapping waves while still preserving the full peak height of a single, strong wave. _Shader developers refining wave or ripple effects can dig into techniques like this via daily.dev._ ## Similar posts on daily.dev - [Creating an Interactive 3D Cluster with Three.js, TSL and Three Start](https://daily.dev/posts/creating-an-interactive-3d-cluster-with-three-js-tsl-and-three-start-y4sedpfai) · Codrops · 2 upvotes · 0 comments - [How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier](https://daily.dev/posts/how-to-create-a-pixel-to-voxel-video-drop-effect-with-three-js-and-rapier-qqiiif8vg) · Codrops · 2 upvotes · 0 comments - [Shaders 103 - smoke](https://daily.dev/posts/shaders-103---smoke-dqivsjx8i) · Brad Woods' Digital Garden · 1 upvotes · 0 comments - [Three.js Port Of Evan Wallace's WebGL Water](https://daily.dev/posts/three-js-port-of-evan-wallace-s-webgl-water-gw0cdt6bw) · 80 LEVEL · 3 upvotes · 0 comments - [Building a Procedural Hex Map with Wave Function Collapse](https://daily.dev/posts/building-a-procedural-hex-map-with-wave-function-collapse-0wz2fqk8n) · Hacker News · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#game-development](https://daily.dev/tags/game-development), [#threejs](https://daily.dev/tags/threejs) [View this post on daily.dev](https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building an Interactive Wave Propagation Cube Grid with Three.js","url":"https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10"},"datePublished":"2026-07-09T10:11:18.193Z","dateModified":"2026-09-14T05:59:31.793Z","description":"A detailed tutorial on building an interactive 3D wave propagation cube grid using Three.js. Covers project structure with Vite, setting up an InstancedMesh...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ec9af220b5ec43522920ed924e03fd97?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ec9af220b5ec43522920ed924e03fd97?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,game-development,threejs","timeRequired":"PT18M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Building an Interactive Wave Propagation Cube Grid with Three.js"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10#faq","mainEntity":[{"@type":"Question","name":"How do you make an InstancedMesh cast and receive shadows correctly when its vertices are displaced by a custom vertex shader in Three.js?","acceptedAnswer":{"@type":"Answer","text":"Create a separate MeshDepthMaterial, apply the exact same onBeforeCompile vertex shader override used on the main material, and assign it to the InstancedMesh's customDepthMaterial property. This keeps the shadow map pass deformed identically to the main camera pass, since Three.js requires matching vertex displacement in both passes to avoid shadow misalignment artifacts. See the full shader setup on daily.dev for developers wiring custom shadows into instanced Three.js scenes."}},{"@type":"Question","name":"Why was PCFSoftShadowMap replaced or avoided in a recent Three.js version?","acceptedAnswer":{"@type":"Answer","text":"PCFSoftShadowMap was deprecated as of Three.js r182, so PCFShadowMap is used instead for the renderer's shadowMap.type when building shadow-casting instanced meshes. Increasing the light's shadow.radius (e.g., to 6) is the recommended way to achieve softer shadow edges without relying on the deprecated shadow map type. Developers tracking Three.js shadow API changes can follow rendering updates like this on daily.dev."}},{"@type":"Question","name":"How can you make overlapping ripple waves blend smoothly instead of creating chaotic spikes in a shader-based wave simulation?","acceptedAnswer":{"@type":"Answer","text":"Compute a weighted average of wave heights rather than simply summing them: accumulate both a weighted waveHeight and a totalWeight for every trail point contributing to a vertex, then divide waveHeight by max(totalWeight, 1.0). This cancels out chaotic superposition from overlapping waves while still preserving the full peak height of a single, strong wave. Shader developers refining wave or ripple effects can dig into techniques like this via daily.dev."}}]} ```