# ModernStillness – Interactive 3D Fireplace Environment

**URL:** <https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701>\
**Category:** Showcase\
**Tags:** gltf-loader, materials, textures, camera, animation, threejs, shaders, geometry\
**Created:** [October 23, 2025, 3:56pm UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701 "2025-10-23T15:56:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NormanDeen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/normandeen/32/69007_2.png) [@NormanDeen](https://discourse.threejs.org/u/NormanDeen)\
**Post date:** [October 23, 2025, 3:56pm UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/1 "2025-10-23T15:56:37Z")

</div>

**Live site:** [Nourtin](https://nourtin.com/)  
**Category:** 3D Environment | Product Demo | WebGL Experience  
**Year:** 2025  
**Location:** Sweden

* * *

 ![postwide](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/c/7cddef6a7545219d562f79f1c0b0eace7b834fad.jpeg)

**Project Video Preview**

### Overview

**ModernStillness** is a cinematic, interactive 3D environment designed specifically for **Tommre** , a Swedish company specializing in modular outdoor fireplaces.  
The project allows users to explore an atmospheric autumn garden, interact with dynamic UI popups, and experience Tommre’s fireplace collection through real-time simulations — including ambient lighting, fire effects, and animated particles.  
It serves as a visual prototype for a potential future platform that brings together all of Tommre’s products in one immersive experience.

* * *

 ![nourtin-logo-B](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/b/8b263ee64dcc0328e65e2b3d503a84c5b7302bcb.png)

[Portfolio — Nourtin](https://nourtin.com)  
by **Nour**  
\*

* * *

### - Features

- **Unified LoadingManager** to preload all assets (GLB, HDR, textures) with a single **Start** button after loading.

- **Intro video sequence** with **Skip** logic.

- **Fire simulation** using emissive glow, video texture, and synchronized sound.

- **Leaves system** : GPU-efficient `InstancedMesh` with physics (wind, lifespan, fade-out).

- **Dust particles** with smooth floating motion and bounding box logic.

- **Dynamic Popups UI** with scrollable panels and contextual sections (About / Models / Pulses).

- **Adaptive performance manager** (pixelRatio & FPS control).

- Ambient audio with loop and mute toggle.

* * *

### - Technologies

**Three.js** – 3D rendering, GLTF loader, materials, particles  
**GSAP** – Intro animation and UI transitions  
**DaVinci Resolve** – Cinematic video editing  
**Softimage XSI + 3ds Max + Corona** – Asset modeling, baking, texture creation  
**Figma** – UI/UX planning and prototype  
**Vanilla JS** – No build tools needed

### - Technical Stack

- GLB models with optimized baked textures (AO, roughness, emissive).

- Uses `MeshStandardMaterial` with high-quality maps (4096–8192 px).

- HDRI (1K) + baked shadows for realism and performance.

- Compressed textures using Shutter Encoder and manual mipmap tuning.

- Lightweight loading — no React, Webpack, or external bundlers.

* * *

### - My Role

- **Lead Developer** : Three.js scene setup, logic splitting, loading & performance tuning.

- **3D Artist** : Created, baked, and optimized assets with consistent PBR workflow.

- **UX Designer** : Built popup navigation, intro logic, and fallback handling for low-end devices.

* * *

### Challenges

Building **ModernStillness** was a balance between cinematic quality and real-time performance.  
The main challenge was integrating multiple heavy assets — high-resolution baked textures, GLB models, HDR lighting, and particle systems — **without using any build tools or frameworks**.  
We had to design a **unified loading flow** (with `LoadingManager`) that preloads all assets, triggers the intro video seamlessly, and transitions to the interactive scene smoothly.  
Another challenge was achieving **natural motion** for dust and leaves using `InstancedMesh` while keeping the frame rate stable across both desktop and mobile GPUs.  
Finally, we implemented a custom **adaptive performance manager** that dynamically adjusts pixel ratio and render quality to maintain a cinematic look under variable device loads.

* * *

### Technical Notes

The environment uses **GLTF models** with **baked textures** (AO, roughness, emissive) and a hybrid **lighting setup** — baked shadows combined with HDR-based ambient lighting.  
Particle systems (dust & leaves) are fully procedural and optimized using `InstancedMesh` and custom update loops.  
All textures are compressed and mipmapped for maximum sharpness with minimal GPU cost.  
Scene management and loading are handled entirely in **Three.js** (no build tools), focusing on **performance balance** between cinematic visuals and smooth playback on desktop and mobile.

> **By Nour Tinawi — Nourtin**  
> [Nourtin](https://nourtin.com)  
> [LinkedIn](https://linkedin.com/in/nour-tinawi)

---

<div class="post-metadata">

**Author:** ![Oserebameh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oserebameh/32/60456_2.png) [@Oserebameh](https://discourse.threejs.org/u/Oserebameh)\
**Post date:** [October 23, 2025, 8:27pm UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/2 "2025-10-23T20:27:19Z")

</div>

This is a very nice demo video, nice work! I clicked the link and was expecting the 3d to be the landing page or is it a separate route from the landing page?

---

<div class="post-metadata">

**Author:** ![NormanDeen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/normandeen/32/69007_2.png) [@NormanDeen](https://discourse.threejs.org/u/NormanDeen)\
**Post date:** [October 24, 2025, 7:26am UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/3 "2025-10-24T07:26:57Z")

</div>

Thanks, Oserebameh!  
The 3D environment loads directly — no separate route.  
You can explore it here:  
[modernstillness](https://modernstillness.nourtin.com/)

---

<div class="post-metadata">

**Author:** ![agrafikr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agrafikr/32/40836_2.png) [@agrafikr](https://discourse.threejs.org/u/agrafikr)\
**Post date:** [October 30, 2025, 8:40am UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/4 "2025-10-30T08:40:36Z")

</div>

There is an inconsistency between the (i) pop-up and the (i) action—I would choose a different symbol for this.

The floor is a little too muddy, but the wall looks good,

Is it just this view, can you walk, can you change the model?

---

<div class="post-metadata">

**Author:** ![NormanDeen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/normandeen/32/69007_2.png) [@NormanDeen](https://discourse.threejs.org/u/NormanDeen)\
**Post date:** [November 2, 2025, 6:06pm UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/5 "2025-11-02T18:06:18Z")

</div>

> Thanks a lot for the feedback!  
> You’re right about the (i) icon — I’ll separate the info popup from the interaction icon.  
> The muddy floor look is intentional for a soft, cinematic tone, but I’ll tweak the contrast a bit.  
> The project is still **under development** — right now you can orbit and zoom, but walking and model switching will be added soon. 🙂

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 2, 2025, 7:52pm UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/6 "2025-11-02T19:52:17Z")

</div>

That black cat is a nice touch!!! 👍

---

<div class="post-metadata">

**Author:** ![NormanDeen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/normandeen/32/69007_2.png) [@NormanDeen](https://discourse.threejs.org/u/NormanDeen)\
**Post date:** [November 3, 2025, 11:07am UTC](https://discourse.threejs.org/t/modernstillness-interactive-3d-fireplace-environment/87701/7 "2025-11-03T11:07:15Z")

</div>

Thanks! That’s my cat 😊 — she’s friendly and surprisingly loves cheese 🧀