--- title: Volatile Nexus: Tinkering with Glass, Caustics, Cubes... description: An experimental Three.js piece combines glassy caustics, refraction, iridescence, floor reflections, and swarms of wandering cubes into one interactive scene.... canonical: https://daily.dev/posts/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js | daily.dev og:description: An experimental Three.js piece combines glassy caustics, refraction, iridescence, floor reflections, and swarms of wandering cubes into one interactive scene.... og:url: https://daily.dev/posts/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6 og:image: https://api.daily.dev/og/posts/14FGkjvp6.png og:image:alt: Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in 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. # Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js **[Codrops](https://daily.dev/sources/codrops)** · 5 min read · 0 upvotes · 0 comments ## Summary An experimental Three.js piece combines glassy caustics, refraction, iridescence, floor reflections, and swarms of wandering cubes into one interactive scene. The author details technical decisions like facing-term weighted refraction so cubes sit inside the glass rather than glowing on it, mouse-proximity repulsion for cubes using local-space ray transforms, a torus-based ripple displacement system for the glass ring derived from an earlier project, and procedural sound synthesis tied to the visual ripple energy and cube stream position. The whole thing ties into Three.js's material positionNode/normalNode system so refraction, caustics, and floor mirror effects update together for free. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can you make refracted objects appear inside glass instead of glowing on top of it in a Three.js shader? Weight the refracted layer by a facing term so it is strong when viewed straight through the glass and fades at grazing angles, where real glass turns mirror-like. This removes the additive wash effect and makes refracted objects, such as cubes, appear to sit inside the glass surface rather than glow on top of it. _Developers refining glass shader realism in three.js can find more experiments like this on daily.dev._ ### How do you implement efficient mouse-proximity repulsion for thousands of cubes in a Three.js scene? Unproject the cursor into a 3D pick ray each frame and transform it once into the swarm's local space, which is far cheaper than transforming a thousand cubes into world space. Cubes within the repel radius get pushed away perpendicular to the ray with squared falloff via a damped spring, returning to formation about half a second after the cursor leaves, with displacement capped to keep cubes in scene. _Anyone optimizing interactive particle or object swarms in three.js can browse similar techniques via daily.dev._ ## Similar posts on daily.dev - [Building an Interactive Wave Propagation Cube Grid with Three.js](https://daily.dev/posts/building-an-interactive-wave-propagation-cube-grid-with-three-js-bqgdu2m10) · Codrops · 1 upvotes · 0 comments - [Building an Endless Interactive Glass Xylophone with Three.js](https://daily.dev/posts/building-an-endless-interactive-glass-xylophone-with-three-js-tv6of1cep) · Codrops · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#game-development](https://daily.dev/tags/game-development), [#threejs](https://daily.dev/tags/threejs), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6) ```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":"Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js","url":"https://daily.dev/posts/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6"},"datePublished":"2026-08-31T16:00:30.941Z","dateModified":"2026-08-31T16:00:54.879Z","description":"An experimental Three.js piece combines glassy caustics, refraction, iridescence, floor reflections, and swarms of wandering cubes into one interactive scene....","image":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","thumbnailUrl":"https://media.daily.dev/image/upload/s--1KxV4ohY--/f_auto/v1722860400/public/Placeholder%2007","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/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript,game-development,threejs,creative-coding","timeRequired":"PT5M"} {"@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":"Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js-14fgkjvp6#faq","mainEntity":[{"@type":"Question","name":"How can you make refracted objects appear inside glass instead of glowing on top of it in a Three.js shader?","acceptedAnswer":{"@type":"Answer","text":"Weight the refracted layer by a facing term so it is strong when viewed straight through the glass and fades at grazing angles, where real glass turns mirror-like. This removes the additive wash effect and makes refracted objects, such as cubes, appear to sit inside the glass surface rather than glow on top of it. Developers refining glass shader realism in three.js can find more experiments like this on daily.dev."}},{"@type":"Question","name":"How do you implement efficient mouse-proximity repulsion for thousands of cubes in a Three.js scene?","acceptedAnswer":{"@type":"Answer","text":"Unproject the cursor into a 3D pick ray each frame and transform it once into the swarm's local space, which is far cheaper than transforming a thousand cubes into world space. Cubes within the repel radius get pushed away perpendicular to the ray with squared falloff via a damped spring, returning to formation about half a second after the cursor leaves, with displacement capped to keep cubes in scene. Anyone optimizing interactive particle or object swarms in three.js can browse similar techniques via daily.dev."}}]} ```