标签：#threejs

Over the last year I shipped 9 production 3D configurators for polish manufacturers — pools, garage doors, saunas, pergolas, greenhouses, packaging, decorative lamps, terrace roofs, and light-boxes. Each one runs live on its own subdomain of my studio at grodev.pl . Some of the lessons were obvious in hindsight. Some cost me a weekend of debugging. Sharing the non-obvious ones here. 1. Draco compression is not optional for CAD-heavy models Manufacturers send you STEP or SolidWorks files exported to glTF . Raw output is 40–120 MB per variant. On 4G mobile that's a 20-second load with an empty white canvas. Draco compression brings that to 2–5 MB with no visible quality loss on product shots: import { GLTFLoader } from ' three/examples/jsm/loaders/GLTFLoader.js ' import { DRACOLoader } from ' three/examples/jsm/loaders/DRACOLoader.js ' const dracoLoader = new DRACOLoader () dracoLoader . setDecoderPath ( ' /draco/ ' ) // self-hosted, don't use CDN const loader = new GLTFLoader () loader . setDRACOLoader ( dracoLoader ) loader . load ( ' /models/pool-3.5m.glb ' , ( gltf ) => { scene . add ( gltf . scene ) }) Self-host the decoder — Google's CDN version added ~600 ms to first paint in my measurements. Copy node_modules/three/examples/jsm/libs/draco/ to your public/ folder. Tooling: gltf-pipeline -i model.glb -o model.draco.glb --draco.compressionLevel 10 2. Instancing beats individual meshes past ~200 objects A pergola with 40 louvres × 3 tilt positions × user color picker = 120 meshes updating on every frame. Naive approach tanks FPS to 12 on mid-range phones. InstancedMesh batches identical geometry into one draw call: const geo = new THREE . BoxGeometry ( 1 , 0.05 , 3 ) const mat = new THREE . MeshStandardMaterial () const louvres = new THREE . InstancedMesh ( geo , mat , 40 ) const dummy = new THREE . Object3D () for ( let i = 0 ; i < 40 ; i ++ ) { dummy . position . set ( 0 , 0 , i * 0.15 ) dummy . rotation . x = userTilt // update per frame is fine dummy . updateM

Indoor maps are often treated as a rendering problem: take a floor plan, extrude a few walls, and display the result. That is useful for a viewer, but it breaks down when a team needs to edit a real space, place assets, or hand the result to another application. We are building KiMap around a different boundary: turn a floor plan into an editable indoor scene in the browser, then keep the resulting structure useful for an SDK consumer. Why a floor plan is not enough A production indoor workflow needs more than a textured image on a plane. At minimum, the editor has to preserve the relationships between walls, floors, rooms, openings, and the objects placed in the space. Those relationships determine whether the result can later support navigation, facility workflows, a digital twin, or a custom web experience. That is why the current KiMap workflow starts with structure. You can define the indoor geometry, inspect it in 2D and 3D, and keep editing instead of committing to a static export too early. The browser editor boundary The editor is built with React and Three.js. The goal is not to replace every DCC tool. It is to make the early spatial workflow accessible to teams that need to test an indoor experience before investing in a full custom pipeline. The parts we are concentrating on are: editable floor-plan structure and bounded spaces 2D and 3D scene inspection in the same workflow reusable 3D furniture and local asset handling saving an indoor project without dropping the referenced model data a path toward SDK-oriented rendering and integration The last point matters. A scene that looks correct in an editor is not automatically useful to an application. We want the data boundary to be explicit enough that an SDK consumer can load the geometry and assets without rebuilding the scene from scratch. What we are testing next KiMap is in free early access. The most useful feedback is not generic interest; it is a concrete blocker from someone building an indoor-nav

I have been building VoxelDraft , a voxel editor that runs entirely in the browser without an account or installation. The editor supports block painting, layers, keyframe animation, GIF recording, local projects, and exports for OBJ/MTL, GLB, VOX, Minecraft Schematic, and Roblox RBXL. This post covers the architecture choices that kept those features manageable. Keep edit data serializable The editable model is an array of plain voxel records rather than a collection of Three.js objects: type VoxelData = { position : [ number , number , number ] color : string layerId ?: string } That decision makes JSON backups, local persistence, undo/redo snapshots, sharing, and format conversion much simpler. Three.js objects are derived render state, not the source of truth. Render repeated cubes with InstancedMesh Creating one mesh and one React component per cube becomes expensive as a model grows. VoxelDraft uses THREE.InstancedMesh where geometry and material can be shared. Each voxel contributes a transform matrix. Pointer intersections return the instanced mesh and instance ID, which can be mapped back to the editable voxel record. There are tradeoffs. Per-voxel colors need instance colors or grouping by material, and changing a single block still requires carefully updating the instance buffers. The reduction in draw calls is worth that complexity. Make exporters independent from UI The format exporters accept voxel records and produce a Blob . The UI is only responsible for validation and triggering a download. const blob = exportToVOX ( voxels ) const url = URL . createObjectURL ( blob ) VOX, Minecraft Schematic, and RBXL are generated directly. For GLB, the app builds a temporary Three.js scene and sends it to GLTFExporter from three-stdlib . Keeping binary generation separate from React event handlers makes exporters easier to test and reuse. Move GIF encoding off the main thread VoxelDraft records both animation output and modeling timelapses. GIF encoding can easi

Colocar los muebles de una habitación es un problema de optimización con muchas restricciones: la cama no va delante de la puerta, el escritorio quiere luz natural, hay que poder circular. Hay un número enorme de disposiciones posibles. RoomCraft AI las explora automáticamente a partir de una descripción en lenguaje natural. El pipeline de tres etapas Parser con LLM: el usuario describe su habitación en texto libre ("un dormitorio de 4x3 con la puerta al norte y una ventana al este"). Un LLM ( Llama 3.1 vía Groq ) lo convierte en una estructura de datos validada con Pydantic : dimensiones, aberturas, muebles deseados. Latencia: <1s. Optimizador con Simulated Annealing: aquí está el corazón del proyecto. Visualización y export: los layouts se renderizan en 3D en el navegador con Three.js y se exportan como plano técnico en PDF con ReportLab . Por qué Simulated Annealing El espacio de disposiciones posibles es combinatorio y lleno de óptimos locales. Una búsqueda voraz se queda atascada en la primera solución "decente". El Simulated Annealing imita el enfriamiento de un metal: al principio acepta movimientos malos con cierta probabilidad (alta "temperatura"), lo que le permite escapar de óptimos locales; según baja la temperatura, se vuelve cada vez más exigente y converge. Es una metaheurística ideal cuando el espacio de soluciones es irregular y no tienes gradiente. La función objetivo puntúa cada disposición de 0 a 100 según ergonomía: espacio de circulación, relaciones entre muebles, acceso a luz y aberturas. El sistema devuelve el top 5 de layouts, no solo el mejor, para dar opciones. Rendimiento Parse: <1s . Optimización: 2–5s . Export PDF: <1s . Footprint en reposo: ~100 MB de RAM. Qué aprendí Que combinar un LLM (para entender lenguaje) con una metaheurística clásica (para optimizar de verdad) es un patrón potentísimo: el LLM traduce el problema humano a uno formal, y un algoritmo determinista y barato lo resuelve mejor —y de forma más explicable— que pedirle

Concept design for a building is slow and expensive. A homeowner planning an extension, or a contractor trying to win a job, is stuck between two bad options: pay a drafter $500–2,000 for a concept package, or fight SketchUp's learning curve for a week. Meanwhile the actual idea — "a 4-bed duplex with a garage and a palm out front" — fits in one sentence. So I built Forge3D Spaces : you type that sentence, and a few seconds later you're walking through a furnished 3D house in your browser — with measured floor plans, DXF for AutoCAD, and a cost estimate that come out of the same model. No install. Here's how it works under the hood. The pipeline: sentence → structured plan → building The naive approach — "ask an LLM to emit a 3D scene" — falls apart fast. Models are bad at spatial consistency; walls don't meet, rooms overlap, doors float. So the LLM never touches geometry directly. It emits a structured program , and a deterministic solver turns that into a watertight building. The prompt becomes a spec. A strict JSON-schema call (OpenRouter, json_schema response format with every field required) turns "4-bed duplex with a garage" into a room program: room types, target areas, adjacencies, storeys. A slicing-tree solver lays it out. This is the old floorplanning trick from chip design — recursively split a rectangle with horizontal/vertical cuts until every room has its area. A squarify pass keeps rooms from collapsing into corridors. The output is exact rectangles with real dimensions, guaranteed non-overlapping and gap-free. Walls, openings, roof, furniture get generated from the solved plan. Every door and window is placed by rule, not by vibes. Because the plan is a real data structure, the 2D floor plan, the 3D model, the elevations, and the bill of quantities are all views of the same thing . Drag a wall and they all move together. Nothing drifts out of sync, because there's nothing to sync — it's one model. The rendering: WebGPU, and the fallback you actually

MikuMikuDance still lives mostly on the desktop: PMX models, VMD motion, skirt physics, camera work. We built AnimaStage Lite — an open-source browser studio so you can load assets, preview motion, add FX, and export vertical Shorts without installing MMD. 🔗 Repository: https://github.com/FBNonaMe/animastage-lite 🌐 Live demo: https://animastage-lite.app/ 🎬 Open the studio: https://animastage-lite.app/app Why the browser? Short-form creators need: 9:16 framing and 1080×1920 export Fast PMX + VMD iteration Stable WebGL on everyday laptops AnimaStage Lite is not a full MMD clone — it’s a focused stage : load, animate, light, record. Stack Layer Tech UI React 19 + TypeScript 3D Three.js + React Three Fiber Build Vite 6 Physics Bullet (Ammo.js) HQ video WebCodecs + mp4-muxer Live video MediaRecorder All core features run client-side . What it does Drag & drop PMX/PMD, VMD, textures, HDR Timeline + dopesheet + Bézier curves + VMD export Bullet physics — skirt, hair, accessories RTX Lite — bloom, DOF, weather, style presets MP4 HQ (frame-by-frame) and Live recording Clean capture — no gizmos in the final video 9:16 Lite — lighter render path to reduce WebGL context loss Optional: MediaPipe mocap, Gemini AI keys, Local/WebRTC collab. Try it Online: https://animastage-lite.app/app — drop your PMX + VMD. Locally: bash git clone https://github.com/FBNonaMe/animastage-lite.git cd animastage-lite npm install npm run dev https://animastage-lite.app/ — landing http://localhost:3000/app — studio (local) Optional AI: copy .env.example → .env and set VITE_GEMINI_API_KEY. Open source Star ⭐ the repo, open issues, send PRs: https://github.com/FBNonaMe/animastage-lite MMD models are not bundled — use only content you have rights to publish. What would you use this for — Shorts, VTuber previews, or learning Three.js? Comments welcome. ---