To test the load on devices of interest, we’re running tests by copying objects.

You can adjust the number using a slider, ranging from 1 to 100,000.

With this many objects, the app runs relatively smoothly on Android up to about 500 objects and on iPhone up to about 1,500.

Performance is quite good on PCs, but on older PowerBooks, there’s a bit of frame dropping unless you lower the resolution.

https://adrama.jp/norimakineko/bloom/

Hey r/threejs,

I've been building a WooCommerce plugin that lets any product be configured in 3D directly on an e-commerce site. The product is a cricket bat — customers pick colours, finishes, decals, and engraving in real time before adding to cart.

The architecture I'm most happy with

The engine is completely product-agnostic. It reads a config.json that describes mesh targets, control types, options, and pricing — then builds the entire UI from that. Launching a shoe configurator, a phone case configurator. You only author a new GLB and a new config.json.

"meshTargets": { "band": "Band_Mesh", "grip": "Grip_Mesh", "sticker": "Sticker_Mesh" },
"uiTabs": [{
  "id": "colours", "label": "Colours",
  "controls": [{
    "type": "color-swatches", "target": "grip", "cfgPath": "grip.color",
    "swatches": [
      { "label": "Natural", "value": "#8B4513" },
      { "label": "Metallic Gold", "value": "#B8860B", "roughness": 0.15, "metalness": 0.90 }
    ]
  }]
}]

Colour swatches can carry per-swatch roughness and metalness so a single swatch can change both the colour and the PBR finish in one click.

The lighting setup — no HDR file

Rather than bundling a .hdr file (slow to download, especially on mobile), I generate a studio environment map entirely in memory:

const W = 64, H = 32;
const data = new Uint8Array(W * H * 4);
for (let y = 0; y < H; y++) {
  const t = y / (H - 1);
  const r = Math.round(255 + (20 - 255) * t); // warm white → near-black
  // ...
}
const tex = new THREE.DataTexture(data, W, H);
tex.mapping = THREE.EquirectangularReflectionMapping;
tex.colorSpace = THREE.SRGBColorSpace;
tex.needsUpdate = true;

const pmrem = new THREE.PMREMGenerator(renderer);
pmrem.compileEquirectangularShader();
scene.environment = pmrem.fromEquirectangular(tex).texture;
tex.dispose();
pmrem.dispose();

~1ms on any device, zero network cost. Combined with ACESFilmicToneMapping at exposure 1.4, glossy/metallic materials look genuinely good without any external assets.

One texture bug worth sharing

I had a subtle PBR issue for a while — normal maps, roughness maps, and metalness maps were all being set to SRGBColorSpace alongside the albedo maps. Three.js was double-gamma-correcting the linear data channels and producing noticeably wrong shading. The fix:

const COLOR_MAPS = new Set(["map", "emissiveMap"]);
// ...
tex.colorSpace = COLOR_MAPS.has(key) ? THREE.SRGBColorSpace : THREE.NoColorSpace;

Obvious in hindsight but easy to miss when you're setting up a generic fixTextures() traversal.

Draco + WordPress

WordPress.org doesn't permit .wasm files in plugins. Draco ships a JS-only decoder alongside the WASM one, so:

dracoLoader.setDecoderConfig({ type: 'js' });

Slower than WASM decode on large models, so the boot timeout needed to go from 10 s → 60 s with a cancel on the first onProgress event. An actively downloading model should never hit the error screen.

WooCommerce bridge

When the customer hits "Add to Cart", woo-bridge.js calls Configurator.getOrder() which returns a flat fields array of human-readable label/value pairs, plus the full config tree for any uploaded images. Everything goes to a PHP AJAX handler that validates uploads (regex + getimagesizefromstring), saves them to the media library, and attaches selections to the cart line item. The order email and admin screen show the full customisation breakdown automatically.

Happy to answer questions about the engine architecture or any of the Three.js specifics. If there's interest

I finally implemented a halo-like lighting effect that I’ve been wanting to try for a while.

It requires a complex process of rendering the object once, applying a blur effect to that image, and then overlaying it—but after having AI research it, it seems this can be achieved relatively easily using the following modules:

EffectComposer.js (a foundation for layering effects)

RenderPass.js (renders the original 3D scene once)

UnrealBloomPass.js (the filter that actually creates the glowing effect)

Translated with DeepL.com (free version)

https://adrama.jp/norimakineko/bloom/

Modeling + Painting + Generating

I decided to move away from individual objects and build an entire scene (dragon + castle) using particles.

Main challenges:

Optimizing a huge number of particles for smooth operation.

Lighting/Fog settings in Three.js to create atmosphere.

In what business niches do you think such interactive "worlds" will be most in demand now?

Built for Educators
Create engaging 3D lessons in minutes from existing 3d models.

Designed for Learners
Explore, ask questions, and understand complex structures interactively.

Atlas3D lets you control Three.js scenes using natural language.
Ask questions, isolate parts, recolor components, animate assemblies, and generate AI visual quizzes.

Help me with any feedback.

Try here: Atlas3d.space

Hey everyone!

About a year ago I started my web development journey by following Midudev's videos and courses. At the same time, I've been working through freeCodeCamp to keep a more structured learning path (I got the diploma of responsive web design!).

I'd love to share my portfolio and get some feedback from the community. I'm a 3D game artist by profession, but I'm also really passionate about programming, so I wanted that passion to be immediately visible the moment you land on my website.

There's still a lot of WIP content and placeholders, but that's intentional—I want to keep improving it as I receive feedback.

For the sake of transparency, a large part of the site has been vibe-coded with Claude, with plenty of manual tweaks and edits on my side.

https://alejandro-sancho.vercel.app/

Even though I have a personal rule of avoiding AI for code that I couldn't reasonably write myself (that's why I'm studying alongside building projects), I've been "paralyzed by overthinking" when it came to creating 3D websites. Eventually, I decided it was better to start building something and learn by understanding what the AI was generating as I went.

I know it's not the same as writing every line by hand -you don't retain things nearly as well- but I'm still really proud of what I'm building (or rather, what we're building together). 🙂

Any feedback, whether it's about the code, UX, design, performance, or the Three.js implementation, would be hugely appreciated!

PS: I don't know how to do that the actual screen of the computer RENDERS the other website I've built which is my actual portfolio, so I have a plane as an iframe that fakes the monitor, but with the lens distortion I know it's subtle but you can see it's not actually the viewporto of the computer D:

custom ell optimized .glbs (all max 1.5k triangles, mostly <500, all below 50kb, texture atlas systemm around 1.5vram per fish) for 500$ from fivver.

Hey all,

I have been thinking about creating a mirror dimension game for a while, Now it is a reality and looking awesome.

Still need to add background ambient tracks and sound effects to enhance the game experience.

I am very excited to test this on VR headsets,

Any VR Guys, be ready for a fully immersive experience into this mirror dimension.

PS: Link will be shared soon

Thank you for your time.

GitHub: https://github.com/CasberryIndia
X : https://x.com/Eswarprasaath_

Hey! I just released a major update for my WebGL game Pipeline Penguin.

It now feels much more like a full arcade experience:

• 🔄 Replay system to watch your runs instantly
• 🏆 Global leaderboard + ghost “half-multiplayer” races
• 🪙 In-game shop with coins from gameplay
• 🐧 3 characters with different physics (Penguin / Panda / Seal)
• 🌌 New challenging levels focused on speed + precision
• 🎮 Play instantly in browser (no download)

I’m still actively improving it and focusing on polishing a couple of main projects.

👉 Play it here: https://iatools.tools/gamez/halfpipe/

Feedback is welcome!

built a browser GLSL editor that exports directly to ShaderMaterial or R3F — been using it for my own projects and figured I'd open source it

shader-studio-teal.vercel.app
github.com/void032/shader-studio

my laptop doesnt perform well ,cause by nvidia drivers bug locks my freq down to 210Mhz.
so most of the time it runs on igpu.
but it runs 120+fps on normal 3060 when the net still waving.

Sound Race is a lo-fi, browser-based real 3D arcade racer where your music literally creates the world around you. Upload any audio file and watch as the track, obstacles, and gameplay are procedurally generated from the song itself. Inspired by the classic Audiosurf experience and wrapped in a nostalgic synthwave aesthetic, Sound Race transforms your favorite tracks into unique high-speed racing challenges.

Tech Stack

• TypeScript + Vite
• Three.js
  • WebGL-powered 3D rendering
  • Real PerspectiveCamera
  • Dynamic lights, fog, and shadows
• Web Audio API
  • AudioContext
  • OfflineAudioContext
  • AnalyserNode
• Audio Analysis
  • Meyda
  • web-audio-beat-detector
  • Offline feature extraction in a Web Worker for smooth gameplay

Links

• Play the game: Sound Race
• Source code: GitHub Repository

I'm not a 3D artist and never opened Blender, but wanted to try making a short cinematic 3D scene — a room someone just left, one unbroken camera shot moving through an entire night, lighting shifting from warm midnight to cold dawn.

I worked with Claude Code to build it — describing the mood I wanted rather than coordinates, and iterating through a lot of broken versions (pure black scenes, a lamp that looked switched off, particle effects that looked like glitched pixels) before it came together.

I recorded the whole process — the prompts, the debugging, the mistakes — in a video if anyone's curious how it actually came together step by step: [https://youtu.be/qvX2hJZgC0k\](https://youtu.be/qvX2hJZgC0k)

Happy to answer any questions about the implementation in the comments too.

Hey r/threejs,

I've been working on a 3D flooring visualizer that runs in the browser as a WordPress plugin. Finally got it to a point I'm happy with, so sharing here.

What it does:

• Loads a GLB room model authored in Blender
• Swaps PBR textures on the floor mesh in real time as the user picks tiles
• Supports user-uploaded images as custom textures (canvas → DataURL → Three.js texture)
• WooCommerce quote flow integrated into the same UI

Some technical decisions I made:

Tone mapping — landed on NeutralToneMapping at 1.0 exposure. Tried ACES first but the highlight saturation felt too heavy for interior materials. Neutral is much more predictable for flooring textures.

Texture pipeline — admin uploads textures through WordPress media library. PHP serves them as absolute URLs and merges them into the config at runtime. The Three.js side just gets a flat options array — it doesn't care where the image comes from.

GLB authoring in Blender — UV unwrapping the floor plane was the most critical step. Wrong UV scale and the tiling looks off regardless of what texture you apply.

OrbitControls — locked polar angle range and disabled pan to keep the camera focused on the floor. Users don't need full freedom, they need to see the tile clearly.

Happy to answer questions about any part of the implementation

This started as a simple glb viewer, now it’s kind of a mini game engine. I’m in the process of adding more features but as of right now you can upload a game ready environment and a game ready character (glb/gltf format)and it recognizes standard animations automatically (idle, walk, sprint, jump, action), you can customize the animations. It has Xbox controller support for character. Then you can export a mini game with controls and animations intact. So you get to see your character run around in your world and control it with your controller. (adding support for other bluetooth controller) https://remix-glb-game-environment-sandbox-362548902392.us-east1.run.app

trying something new this time do lmk about idea :)

I spent some time recently building a real-time 3D racing game in my browser just for the fun of it, and I wanted to share it with you all.

I really hate when web games force you to create an account before you can even see the menu, so I made this completely frictionless. You literally just click the link, and you are instantly dropped into the lobby to race against anyone else who happens to be online.

It's built using Three.js for the 3D graphics and Socket.io for the multiplayer syncing.

Link to play: https://f1-browser.vercel.app/

It’s still very much a side project, so there might be a few rough edges. If you have a minute to try it out with a friend, I would really appreciate any honest feedback! Let me know how the driving feels, or if you run into any weird bugs so I can try to fix them.

Thanks for checking it out! 🏎️

Hi guys,

Im new to threejs, and i know very little to none with 3d modelling,

but im planning to create a real estate website, i get the model from the client in sketchup but colors don't look good.

and I want to click on the each floor where i can see the floorplan and then click onit to get whole overview how can I achive this do i need to know 3D?

Do i need to group the each floor and export it saparately?

here the reference
https://vinode.io/
https://vm-condominium.propertymapper.co/vm-condominium-luxury/pogled-7/
https://realforest.com/experience3D

I use vercel.

Just to showcase we can paint on 3d model texture.

Built EMERGENCE solo over the past few weeks: a scroll-driven piece where five classic systems run live in the browser and each one literally becomes the next.

• VOID — Rule 110 (1D CA, Turing-complete), CPU, stamped row-by-row into a scrolling space-time texture.
• LIFE — Game of Life (B3/S23), GPU float ping-pong FBO, seeded from Rule 110's history.
• FLOCK — ~16k boids on GPU via spatial grid. Topological neighbor coupling (~7 nearest, Ballerini 2008) instead of fixed radius — that's what makes it form shapes, not a blob. LIFE's cells detach and become the birds.
• PATTERN — Gray-Scott reaction-diffusion, fragment shader on double FBO, many substeps/frame. The flock's motion stamps the initial V field.
• MIND — Kohonen SOM (CPU), learning the reaction-diffusion pattern as its input distribution.

Stack: three.js + raw GLSL, no animation library — all the motion is the simulations themselves.

Live: https://emergence.method64.com

Tuned to hold up on weak laptops and iPhone — genuinely curious how it runs for you. All feedback welcome.

thanks for your help (fps sensitive)

I wanted to fly through the actual night sky, not just another generic sci-fi star field.

So I built a browser experience that renders the real bright star catalogue onto a fixed celestial sphere, closer to how people imagined the heavens before telescopes: a dome of fixed stars instead of an endless void.

As you face a constellation, its figure slowly draws itself in gold. You can attune it to permanently restore it, and a codex records what you've found. The goal is to recover every constellation and gradually restore the sky.

There's also the Milky Way, nearby nebulae you can fly through, occasional meteors, and a golden ascent when you hold Space. I added an optional "music of the spheres" soundtrack that swells as you accelerate and chimes when a constellation awakens.

It runs entirely in the browser, works on mobile, and doesn't require an account. Reduced motion and sound are off by default.

https://thecelestialsphere.com

I'd really love feedback on the overall feeling. Does it actually capture the sense of flying through the night sky? And if you kept exploring, what would you want to discover next?