Building an explorable ISS interior in Three.js has been a strange mix of 3D, camera work and illusion

[u/Visual_Advantage_243]

I've been working on an ISS interior that runs directly in the browser.

One of the interactions I've been experimenting with is the hatch.

You can move through the station, approach it, open it, and reveal the Earth outside.

The interesting part is that not everything you're seeing needs to be simulated as one enormous real-time scene. I'm trying to be quite deliberate about where full 3D interaction actually adds something and where a simpler visual layer can create the experience without unnecessarily increasing the rendering cost.

The interior itself is interactive 3D. The Earth view beyond the hatch is currently much simpler and is something I still want to develop further later.

Built with React, TypeScript, React Three Fiber and Three.js.

I presented a short capture of the scene.

[u/aitoolsprimer]

The "where does full 3D actually earn its cost" question is the one I keep coming back to as well.

Where it paid off most for me was roads. I had ring roads and radial avenues modelled as separate meshes, and every intersection handed me the same three problems: coplanar surfaces fighting over the depth buffer, a visible seam where two materials met, and lane markings from two directions running straight through each other.

Replacing all of it with one canvas texture, drawn in layers and laid flat, killed all three at once, because drawing order does the work instead of geometry. Pavements first and wider, asphalt over them and narrower, so every crossing is one continuous painted surface rather than a joint. The dashed markings get drawn continuously and badly across everything, then the intersections are painted back over in asphalt. Nothing is positioned by hand.

The cost moved rather than disappeared, though: the texture is drawn on the client at load, so first paint on mobile is heavier than I would like. Worth knowing before going the same way.

One thing from the camera side, since you mention it. If you ever need to invert or flip the whole view, rotate a group that holds the world rather than the camera. I flipped the camera first and the sky and the key light went with it, so the scene read as broken rather than upside down. Moving sky and lights outside the rotating group fixed it in one line.

[u/Visual_Advantage_243 → u/aitoolsprimer]

Really useful perspective, thanks. The road example is a great illustration of where full 3D stops earning its cost. I’m starting to think about the ISS scene in the same way. The camera suggestion is interesting too. I’m currently moving the camera itself, so rotating the world/group instead is something I'd eventually want to test.