# \#materials

**URL:** https://discourse.threejs.org/tag/materials/35.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Introducing Interstellar - Across Time & Space (An immersive 3D Journey)](https://discourse.threejs.org/t/introducing-interstellar-across-time-space-an-immersive-3d-journey/95484)

<div class="topic-metadata">

**Author:** [@pushpitsahay](https://discourse.threejs.org/u/pushpitsahay)\
**Replies:** 12\
**Last updated:** [October 21, 2026, 9:59pm UTC](https://discourse.threejs.org/t/introducing-interstellar-across-time-space-an-immersive-3d-journey/95484 "2026-10-21T21:59:09Z")

</div>

Introducing Interstellar! :rocket: What if you could experience the story of Interstellar beyond just watching it on a screen? I built Interstellar, an interactive web experience inspired by the movie, bringing its unf…

---

## [Highvale: a voxel survival game on three.js WebGPU, playable in the browser](https://discourse.threejs.org/t/highvale-a-voxel-survival-game-on-three-js-webgpu-playable-in-the-browser/95701)

<div class="topic-metadata">

**Author:** [@wojak](https://discourse.threejs.org/u/wojak)\
**Replies:** 0\
**Last updated:** [October 21, 2026, 9:57pm UTC](https://discourse.threejs.org/t/highvale-a-voxel-survival-game-on-three-js-webgpu-playable-in-the-browser/95701 "2026-10-21T21:57:57Z")

</div>

Hi all! I’ve been building Highvale, a block-building survival game that runs entirely on three.js’s WebGPURenderer, with every material written in TSL. :play\_button: Play: https://www.playhighvale.com Desktop, or a ph…

---

## [TSL Material Graph: a visual shader graph editor for TSL (Unity Shader Graph style)](https://discourse.threejs.org/t/tsl-material-graph-a-visual-shader-graph-editor-for-tsl-unity-shader-graph-style/95690)

<div class="topic-metadata">

**Author:** [@XaosWasHere](https://discourse.threejs.org/u/XaosWasHere)\
**Replies:** 0\
**Last updated:** [October 21, 2026, 9:54pm UTC](https://discourse.threejs.org/t/tsl-material-graph-a-visual-shader-graph-editor-for-tsl-unity-shader-graph-style/95690 "2026-10-21T21:54:31Z")

</div>

Hi everyone! I’ve been using TSL a lot since the WebGPU renderer landed, and the one thing I kept missing from Unity and Unreal was a visual shader graph. So I built one, and it’s now on npm. What it is - A node e…

---

## [Another 3d Dice roller! https://manthrax.github.io/three-polydice/polydice.html](https://discourse.threejs.org/t/another-3d-dice-roller-https-manthrax-github-io-three-polydice-polydice-html/95683)

<div class="topic-metadata">

**Author:** [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Replies:** 0\
**Last updated:** [October 21, 2026, 9:52pm UTC](https://discourse.threejs.org/t/another-3d-dice-roller-https-manthrax-github-io-three-polydice-polydice-html/95683 "2026-10-21T21:52:08Z")

</div>

Small world. :smiley: I’ve also vibed a 3d dice roller but I’ve used some different approaches from another dice roller posted here yesterday… It’s interesting but unsurprising how much crossover there is in the termin…

---

## [Recreate glass look 🪟](https://discourse.threejs.org/t/recreate-glass-look/95588)

<div class="topic-metadata">

**Author:** [@kalabedo](https://discourse.threejs.org/u/kalabedo)\
**Replies:** 0\
**Last updated:** [October 20, 2026, 11:36am UTC](https://discourse.threejs.org/t/recreate-glass-look/95588 "2026-10-20T11:36:21Z")

</div>

Hi there, i am trying to visualize different glass surfaces. Right now my approach is to use MSM with transparency plus a blueish tint. for the edges i use a seperate mesh that fakes the edge color we have with thick gl…

---

## [Migrating my Grass System to WebGPU and making a robust Grass Plugin](https://discourse.threejs.org/t/migrating-my-grass-system-to-webgpu-and-making-a-robust-grass-plugin/92893)

<div class="topic-metadata">

**Author:** [@Muhammad\_Bilal](https://discourse.threejs.org/u/Muhammad_Bilal)\
**Replies:** 28\
**Last updated:** [October 20, 2026, 9:25am UTC](https://discourse.threejs.org/t/migrating-my-grass-system-to-webgpu-and-making-a-robust-grass-plugin/92893 "2026-10-20T09:25:41Z")

</div>

I have been working on my grass system these days. Since WebGPU has become very stable and the support for it is out there in most of the browsers and the devices, I planned to migrate my grass system to WebGPU for bette…

---

## [Undriven – endless open world driving through forests, fields and mountains. Day/night, rain and thunderstorms. Free, no download](https://discourse.threejs.org/t/undriven-endless-open-world-driving-through-forests-fields-and-mountains-day-night-rain-and-thunderstorms-free-no-download/95485)

<div class="topic-metadata">

**Author:** [@Undriven](https://discourse.threejs.org/u/Undriven)\
**Replies:** 0\
**Last updated:** [October 17, 2026, 5:11pm UTC](https://discourse.threejs.org/t/undriven-endless-open-world-driving-through-forests-fields-and-mountains-day-night-rain-and-thunderstorms-free-no-download/95485 "2026-10-17T17:11:42Z")

</div>

Undriven is a relaxed open world driving game – no races, no timer, just the road. It keeps generating as you drive, so it never ends: forests, farmland, lakes, mountain passes with hairpins, a full day–night cycle, rain…

---

## [Morph Chess — sculpted gemstone pieces, gold inlays and reflective boards](https://discourse.threejs.org/t/morph-chess-sculpted-gemstone-pieces-gold-inlays-and-reflective-boards/95475)

<div class="topic-metadata">

**Author:** [@dousresl](https://discourse.threejs.org/u/dousresl)\
**Replies:** 0\
**Last updated:** [October 17, 2026, 12:32pm UTC](https://discourse.threejs.org/t/morph-chess-sculpted-gemstone-pieces-gold-inlays-and-reflective-boards/95475 "2026-10-17T12:32:33Z")

</div>

Hi everyone! I’ve been working on Morph Chess, a visual playground for chessboards and chess pieces built with Three.js. The current focus is on sculpted forms, gemstone materials, reflections, refraction and light. Rub…

---

## [R3F Sketch Material: a hand-drawn ballpoint look for any mesh, all in the shader](https://discourse.threejs.org/t/r3f-sketch-material-a-hand-drawn-ballpoint-look-for-any-mesh-all-in-the-shader/95455)

<div class="topic-metadata">

**Author:** [@Abhishek\_Verma](https://discourse.threejs.org/u/Abhishek_Verma)\
**Replies:** 0\
**Last updated:** [October 17, 2026, 6:33am UTC](https://discourse.threejs.org/t/r3f-sketch-material-a-hand-drawn-ballpoint-look-for-any-mesh-all-in-the-shader/95455 "2026-10-17T06:33:53Z")

</div>

Hey everyone! I made a material for React Three Fiber that makes any mesh look like it was drawn with a ballpoint pen. Scribbled hatching that follows the light, wobbly outlines that overshoot the corners, and hatched sh…

---

## [Babel Nexus-- 3D Hexagonal Reading Gallery](https://discourse.threejs.org/t/babel-nexus-3d-hexagonal-reading-gallery/93993)

<div class="topic-metadata">

**Author:** [@NishanStepak](https://discourse.threejs.org/u/NishanStepak)\
**Replies:** 5\
**Last updated:** [October 12, 2026, 2:21am UTC](https://discourse.threejs.org/t/babel-nexus-3d-hexagonal-reading-gallery/93993 "2026-10-12T02:21:37Z")

</div>

Babel Nexus 3D Hexagonal Gallery for Mathematics

---

## [\[ FREE GAME \] GoPuzzleGo – jigsaw puzzles in Three.js: car-paint metals, beveled pieces and planets you can assemble](https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131)

<div class="topic-metadata">

**Author:** [@Alexei\_Tacu](https://discourse.threejs.org/u/Alexei_Tacu)\
**Replies:** 0\
**Last updated:** [October 8, 2026, 7:58pm UTC](https://discourse.threejs.org/t/free-game-gopuzzlego-jigsaw-puzzles-in-three-js-car-paint-metals-beveled-pieces-and-planets-you-can-assemble/95131 "2026-10-08T19:58:06Z")

</div>

Hi everyone! :waving\_hand: I’ve been building GoPuzzleGo, a free browser jigsaw puzzle site, and recently moved the board to a Three.js renderer. Every piece is a real 3D object: extruded, beveled, lit, and you can tilt…

---

## [MANIFOLD — Procedural Mathematical Surfaces & Topologies in Three.js](https://discourse.threejs.org/t/manifold-procedural-mathematical-surfaces-topologies-in-three-js/94657)

<div class="topic-metadata">

**Author:** [@MatNoble](https://discourse.threejs.org/u/MatNoble)\
**Replies:** 2\
**Last updated:** [October 8, 2026, 8:31am UTC](https://discourse.threejs.org/t/manifold-procedural-mathematical-surfaces-topologies-in-three-js/94657 "2026-10-08T08:31:07Z")

</div>

Hello everyone, I’d like to share MANIFOLD, an interactive 3D digital gallery built with Three.js that explores procedural differential geometry, minimal surfaces, and topological manifolds in a cosmic, museum-like envi…

---

## [Virtual Game Pad](https://discourse.threejs.org/t/virtual-game-pad/84091)

<div class="topic-metadata">

**Author:** [@vis\_prime](https://discourse.threejs.org/u/vis_prime)\
**Replies:** 3\
**Last updated:** [October 6, 2026, 11:24pm UTC](https://discourse.threejs.org/t/virtual-game-pad/84091 "2026-10-06T23:24:39Z")

</div>

Control a Virtual Gamepad Using a Real One :video\_game::joystick: Plug in any Xbox-compatible controller and start interacting. (or just use the on-screen controls) VirtualGamePad Demo I got curious about the…

---

## [Porsche Driving Experience Game - Realistic Graphics (free)](https://discourse.threejs.org/t/porsche-driving-experience-game-realistic-graphics-free/94961)

<div class="topic-metadata">

**Author:** [@Vladimir\_Maximovich\_Tuchkevich](https://discourse.threejs.org/u/Vladimir_Maximovich_Tuchkevich)\
**Replies:** 2\
**Last updated:** [October 3, 2026, 12:11pm UTC](https://discourse.threejs.org/t/porsche-driving-experience-game-realistic-graphics-free/94961 "2026-10-03T12:11:43Z")

</div>

Dear colleagues, I would like to share my project showcase with you. I have made a small racing game with animated car model featuring trunk, spoiler, doors, wheels, lights, steering, exhaust, signals and gauge animatio…

---

## [Title: How to Handle Children/Hierarchy When Using THREE.InstancedMesh?](https://discourse.threejs.org/t/title-how-to-handle-children-hierarchy-when-using-three-instancedmesh/94836)

<div class="topic-metadata">

**Author:** [@Taron\_Holikyan](https://discourse.threejs.org/u/Taron_Holikyan)\
**Replies:** 1\
**Last updated:** [October 2, 2026, 4:58pm UTC](https://discourse.threejs.org/t/title-how-to-handle-children-hierarchy-when-using-three-instancedmesh/94836 "2026-10-02T16:58:11Z")

</div>

I’m working on a Three.js application where I’m using THREE.InstancedMesh for performance reasons. With a normal THREE.Mesh, I can have a hierarchy like: Parent Object ├── Child 1 ├── Child 2 └── Child 3 and during…

---

## [How to change texture of specific parts of the mesh in threejs?](https://discourse.threejs.org/t/how-to-change-texture-of-specific-parts-of-the-mesh-in-threejs/94824)

<div class="topic-metadata">

**Author:** [@marcoscarvalho](https://discourse.threejs.org/u/marcoscarvalho)\
**Replies:** 0\
**Last updated:** [September 30, 2026, 9:14am UTC](https://discourse.threejs.org/t/how-to-change-texture-of-specific-parts-of-the-mesh-in-threejs/94824 "2026-09-30T09:14:40Z")

</div>

Hi there, I am creating a configurator in threejs, and it will have many objects, like 70 different objects or more.. I started creating the models in Blender and my initial intention was joining all objects that have th…

---

## [FlightObserver 3D — Live Flight Tracker on a Fully 3D Eart](https://discourse.threejs.org/t/flightobserver-3d-live-flight-tracker-on-a-fully-3d-eart/94721)

<div class="topic-metadata">

**Author:** [@Vili](https://discourse.threejs.org/u/Vili)\
**Replies:** 1\
**Last updated:** [September 28, 2026, 2:40pm UTC](https://discourse.threejs.org/t/flightobserver-3d-live-flight-tracker-on-a-fully-3d-eart/94721 "2026-09-28T14:40:39Z")

</div>

Hi everyone, I’ve been working on a project called FlightObserver 3D and I’m excited to share it with the community here. It’s a real-time flight tracking visualization that renders live aircraft positions on an interac…

---

## [Conference Room Configurator](https://discourse.threejs.org/t/conference-room-configurator/94724)

<div class="topic-metadata">

**Author:** [@bcube.ae](https://discourse.threejs.org/u/bcube.ae)\
**Replies:** 1\
**Last updated:** [September 28, 2026, 6:33am UTC](https://discourse.threejs.org/t/conference-room-configurator/94724 "2026-09-28T06:33:35Z")

</div>

https://www.bcube.ae/lab/room-studio/run A photoreal boardroom you can walk through in a browser, with real-world lighting, a screen measured in nits and your own content playing on it. Built by Bcube to show what real-…

---

## [Shaderfrog2 glsl shaders](https://discourse.threejs.org/t/shaderfrog2-glsl-shaders/85357)

<div class="topic-metadata">

**Author:** [@steven](https://discourse.threejs.org/u/steven)\
**Replies:** 12\
**Last updated:** [September 28, 2026, 3:52am UTC](https://discourse.threejs.org/t/shaderfrog2-glsl-shaders/85357 "2026-09-28T03:52:45Z")

</div>

is there somebody who knows how we can make the shaders from shaderfrog2 work in three.js ?

---

## [Make a luminance parameter for light source](https://discourse.threejs.org/t/make-a-luminance-parameter-for-light-source/94671)

<div class="topic-metadata">

**Author:** [@meded90](https://discourse.threejs.org/u/meded90)\
**Replies:** 1\
**Last updated:** [September 25, 2026, 7:10pm UTC](https://discourse.threejs.org/t/make-a-luminance-parameter-for-light-source/94671 "2026-09-25T19:10:42Z")

</div>

I used metalness applied to construction, originally it is a luminance And there also exist light, and increasing diameter expected to work better with metalness (it expected to spread light smoothly through …

---

## [I Built a 2D to 3D Construction Takeoff App — Automatic BOQ Generation](https://discourse.threejs.org/t/i-built-a-2d-to-3d-construction-takeoff-app-automatic-boq-generation/94661)

<div class="topic-metadata">

**Author:** [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Replies:** 0\
**Last updated:** [September 25, 2026, 11:52am UTC](https://discourse.threejs.org/t/i-built-a-2d-to-3d-construction-takeoff-app-automatic-boq-generation/94661 "2026-09-25T11:52:22Z")

</div>

I built a construction quantity takeoff application that turns a 2D drawing into a 3D model and automatically generates a BOQ from the 3D elements. What the application does: • To Upload Autocad in the Application Conv…

---

## [we have better maps of mars than of the bottom of our own ocean.](https://discourse.threejs.org/t/we-have-better-maps-of-mars-than-of-the-bottom-of-our-own-ocean/94621)

<div class="topic-metadata">

**Author:** [@Swaresh\_Binaykiya](https://discourse.threejs.org/u/Swaresh_Binaykiya)\
**Replies:** 0\
**Last updated:** [September 23, 2026, 10:21pm UTC](https://discourse.threejs.org/t/we-have-better-maps-of-mars-than-of-the-bottom-of-our-own-ocean/94621 "2026-09-23T22:21:09Z")

</div>

we have better maps of mars than of the bottom of our own ocean. • 10,935 m deep. drop everest in and it still sinks 2 km under • 8 tons of pressure on every square inch • 12 people have walked on the Moon. About two …

---

## [How to Use three.js to Create a Transparent Alley Walkthrough？](https://discourse.threejs.org/t/how-to-use-three-js-to-create-a-transparent-alley-walkthrough/94559)

<div class="topic-metadata">

**Author:** [@twx](https://discourse.threejs.org/u/twx)\
**Replies:** 1\
**Last updated:** [September 22, 2026, 3:59pm UTC](https://discourse.threejs.org/t/how-to-use-three-js-to-create-a-transparent-alley-walkthrough/94559 "2026-09-22T15:59:48Z")

</div>

Figure Figure 1 is my implementation.Figure 2 is the effect I want to achieve.

---

## [Creative frontend — Three.js / R3F, GSAP, Next.js — cinematic product experiences (Istanbul, remote)](https://discourse.threejs.org/t/creative-frontend-three-js-r3f-gsap-next-js-cinematic-product-experiences-istanbul-remote/94400)

<div class="topic-metadata">

**Author:** [@Mine](https://discourse.threejs.org/u/Mine)\
**Replies:** 0\
**Last updated:** [September 16, 2026, 11:59am UTC](https://discourse.threejs.org/t/creative-frontend-three-js-r3f-gsap-next-js-cinematic-product-experiences-istanbul-remote/94400 "2026-09-16T11:59:31Z")

</div>

I build browser-based 3D product experiences end to end: geometry in Blender, scene in Three.js / React Three Fiber, site in Next.js and TypeScript, motion in GSAP and framer-motion, then testing and release. I design…

---

## [GateQuake, a 36-player arena with a 10,000-tile floor that collapses under you](https://discourse.threejs.org/t/gatequake-a-36-player-arena-with-a-10-000-tile-floor-that-collapses-under-you/93989)

<div class="topic-metadata">

**Author:** [@GateQuake](https://discourse.threejs.org/u/GateQuake)\
**Replies:** 1\
**Last updated:** [September 16, 2026, 5:27am UTC](https://discourse.threejs.org/t/gatequake-a-36-player-arena-with-a-10-000-tile-floor-that-collapses-under-you/93989 "2026-09-16T05:27:07Z")

</div>

Been building this for a while. The floor is the part worth writing up here, so that’s most of what follows. https://gatequake.com (free practice mode, no signup, no wallet) The setup A 100×100 grid of 3.5-unit tiles, …

---

## [3D Interactive Solar Car Model](https://discourse.threejs.org/t/3d-interactive-solar-car-model/94309)

<div class="topic-metadata">

**Author:** [@small\_j1337](https://discourse.threejs.org/u/small_j1337)\
**Replies:** 0\
**Last updated:** [September 13, 2026, 5:16am UTC](https://discourse.threejs.org/t/3d-interactive-solar-car-model/94309 "2026-09-13T05:16:42Z")

</div>

This is my custom made 3D landing page created through Three JS for my high school solar car team Garage 803 Racing. The website allows you to drag around to look at different exterior parts of the car and see the stats …

---

## [MeshLine thickness changes based on camera angle (Horizontal vs Vertical thinning) + flickering resolution](https://discourse.threejs.org/t/meshline-thickness-changes-based-on-camera-angle-horizontal-vs-vertical-thinning-flickering-resolution/94270)

<div class="topic-metadata">

**Author:** [@notharshprajapati](https://discourse.threejs.org/u/notharshprajapati)\
**Replies:** 0\
**Last updated:** [September 11, 2026, 4:35pm UTC](https://discourse.threejs.org/t/meshline-thickness-changes-based-on-camera-angle-horizontal-vs-vertical-thinning-flickering-resolution/94270 "2026-09-11T16:35:12Z")

</div>

I’m using meshline in R3F to draw 3D ropes, but I’m running into two annoying issues with MeshLineMaterial when using sizeAttenuation={1} 1st Horizontal vs Vertical Thinning - when i rotate the camera, the line’s thickn…

---

## [Showcase: River Raid WebGL Remake with Three.js](https://discourse.threejs.org/t/showcase-river-raid-webgl-remake-with-three-js/93974)

<div class="topic-metadata">

**Author:** [@Konuralp](https://discourse.threejs.org/u/Konuralp)\
**Replies:** 2\
**Last updated:** [September 11, 2026, 3:24am UTC](https://discourse.threejs.org/t/showcase-river-raid-webgl-remake-with-three-js/93974 "2026-09-11T03:24:34Z")

</div>

Hi everyone, I wanted to share a recent project we’ve been working on at WhiteCAD. We developed a web-based tribute to the classic retro game River Raid, built entirely using Three.js! Our goal was to bring the nostalg…

---

## [Sample drawing royal palm](https://discourse.threejs.org/t/sample-drawing-royal-palm/94164)

<div class="topic-metadata">

**Author:** [@meded90](https://discourse.threejs.org/u/meded90)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:28pm UTC](https://discourse.threejs.org/t/sample-drawing-royal-palm/94164 "2026-09-08T19:28:28Z")

</div>

---

## [NOOKS: building Earth in creative mode with three.js](https://discourse.threejs.org/t/nooks-building-earth-in-creative-mode-with-three-js/94161)

<div class="topic-metadata">

**Author:** [@Nooks](https://discourse.threejs.org/u/Nooks)\
**Replies:** 0\
**Last updated:** [September 8, 2026, 7:24pm UTC](https://discourse.threejs.org/t/nooks-building-earth-in-creative-mode-with-three-js/94161 "2026-09-08T19:24:49Z")

</div>

Hi everyone. Today I’m introducing Earth in creative mode with NOOKS. Toronto in the NOOKS public preview. Real geographic data becomes block worlds you can explore in your browser. The public preview displays four …

[Next page](https://discourse.threejs.org/tag/materials/35.md?match_all_tags=true&page=1&tags%5B%5D=materials)