iPhone LiDAR 3D Model Three.js Rooms Made Editable

A GitHub repository named 3d-model-anything now links iPhone LiDAR room scans straight to editable Three.js scenes that load in any browser. The iphone lidar 3d model three.js workflow starts with an iPhone app that records geometry and photos, then an AI skill converts the data into clean Three.js objects you can tweak. According to the project's GitHub page, the steps stay iterative and rely on extra reference photos for correct scale. This piece walks through the capture steps, how the agent builds the scene, browser viewing options, and the limits that still exist. You will also find who can use it now and the exact first commands to try on your own machine.

Key takeaways

• The 3d-model-anything repo adds a scan-to-threejs skill that turns LiDAR output into browser-ready Three.js geometry through repeated measurement and refinement passes.
• Users run the supplied iPhone app on LiDAR-equipped devices to capture both room shape and reference photos in one session.
• After cloning the repo, the command npm run dev starts a local Three.js viewer at http://localhost:5188 for direct inspection and edits.
• Interior designers and game developers gain quick access to adjustable room models without manual 3D modeling from scratch.
• The process requires reference photos because current output still needs human checks for scale and alignment.

A GitHub repo brings LiDAR rooms into Three.js

A GitHub repository called 3d-model-anything now connects raw LiDAR captures from recent iPhones directly to editable Three.js scenes. According to the project's GitHub page, the repo supplies three core pieces: an iPhone capture app that records both depth data and photographs, an export format that preserves the measurements and images, and a scan-to-threejs agent skill that walks an AI coding agent through the reconstruction steps. The skill directs the agent to examine dimensions, place geometry, and check rendered views against the original photos taken during the scan.

The workflow stays manual and iterative. It does not produce a finished model from a single button press. Instead the agent measures walls and objects, builds meshes in Three.js, and compares the results to the source images until the match improves. This approach targets rooms and other interior spaces where repeated visual checks matter more than speed.

Three.js itself is the JavaScript library that renders 3D content in a web browser without extra plugins. The repo pairs the reconstructed scene with a viewer that supports several inspection modes, so you can walk through the model or examine it from above once the agent finishes its pass. Because the export keeps a consistent folder structure, you can drop new captures into the same location and reuse the same agent instructions for the next room.

Capture process on LiDAR iPhones

Users open the supplied iPhone app on a device that has LiDAR hardware. The app records both the room geometry that the sensor produces and the photographs taken at the same time. This combination gives the later reconstruction both distances and visual textures. The process works on any recent iPhone or iPad that includes the LiDAR scanner; older models without it cannot create new captures.

Once the scan finishes, the user exports the complete bundle through the standard iOS share sheet. The export lands in a folder named under data/captures-in, typically inside a subdirectory that matches the room name. The files follow a fixed structure called house-capture/5, so downstream tools know exactly where to find the point cloud, images, and metadata. According to the project's GitHub page, this export step keeps the original scan data intact and ready for the AI agent that turns it into an editable Three.js scene.

After the files sit in that local folder, the rest of the workflow no longer needs the original iPhone. Non-LiDAR devices can import the same exported folder and open the resulting Three.js viewer without any further hardware requirements. The viewer loads the geometry and textures directly in the browser, so a laptop or desktop without depth sensors can still explore the room in dollhouse, first-person, or wireframe modes.

The capture itself remains a deliberate, manual step rather than an automatic background process. Users choose when to start and stop the recording, walk the space at a steady pace, and make sure the photos cover the surfaces they want to keep. This controlled approach produces cleaner measurements for the reconstruction that follows.

AI agent turns scans into editable scenes

The scan-to-threejs skill sits inside the repository at .agents/skills/scan-to-threejs/SKILL.md. According to the project's GitHub page, this file supplies a structured set of instructions that an AI coding agent follows when it receives a captured room export. The agent begins by reading the LiDAR measurements and photo set, then builds a Three.js scene step by step rather than generating everything in one pass.

It first extracts dimensions and surface data to create base meshes. Next it assigns textures by matching pixels from the original photographs to the correct faces. After placement, the agent renders test views from the same camera positions used during capture and compares those renders against the source images using visual checks. Differences in alignment or lighting trigger adjustments until the match improves. The process repeats for each major surface in the room.

Because the workflow stays iterative, the agent can revise individual meshes or texture assignments without starting over. When finished, the resulting scene appears in the demos folder as separate editable layers, one per room. Each layer keeps its geometry, materials, and camera references intact so later changes remain isolated. The skill therefore turns raw scan data into a Three.js project you can open, inspect, and modify directly in the browser viewer supplied by the same repository.

Browser viewer modes for exploration

Once the repository is installed and you run npm run dev, the included Three.js runtime launches a local server at http://localhost:5188. From there you can switch between five distinct viewing modes for any reconstructed room: dollhouse, walking, overhead, wireframe and knolling.

Dollhouse tilts the entire scene at an angle so walls and furniture stay visible together. Walking mode places the camera at eye level for movement through doorways and around objects. Overhead gives a clean top-down layout useful for checking proportions. Wireframe strips away textures to show only edges and vertices. Knolling spreads elements across a flat plane for isolated inspection of each mesh.

The office demo, available at /play.html?room=office-v4&mode=fpv, keeps earlier reconstruction stages side by side. You can toggle between versions to see how geometry or texture placement changed during iteration. According to the project's GitHub page, the demo ships with the final meshes and selected textures only; raw scan data stays private.

Three.js handles the rendering in the browser, so no additional plugins are required. The modes help spot alignment errors or missing surfaces quickly because each view emphasizes different aspects of the same underlying data. If you load your own exported room, the same controls appear and the playground URL lets you bookmark a specific mode for repeated checks.

This setup works on any modern desktop browser that supports WebGL, which covers current Chrome, Firefox, Safari and Edge releases.

Current limits and open questions

The workflow on the project's GitHub page stays iterative by design. An agent follows the scan-to-threejs skill through separate passes of measurement, geometry creation in Three.js, and side-by-side checks of rendered views against the source photographs. Each pass can require adjustments to object placement, scale, or material assignments before the next comparison. The repository states outright that this is not a one-click converter that produces a finished scene.

The supplied office example uses controlled indoor lighting and relatively simple wall planes, so performance on other interiors stays untested. Spaces with sloped ceilings, recessed lighting, or dense object clusters could expose gaps in how the agent interprets depth data or matches textures. Outdoor scenes add further unknowns: changing sunlight, wind-blown surfaces, and ground cover that returns inconsistent LiDAR readings. The skill documentation limits its guidance to room-scale captures, leaving those conditions without defined steps.

You will still need to inspect the generated code and the exported capture files yourself after each agent run. The viewer modes help spot visual mismatches, yet they do not automate fixes. Whether the same measurement and comparison loop scales to multi-room layouts or non-rectangular architecture is not addressed in the current release.

Who can use this today

Interior designers can take room scans from a LiDAR iPhone and turn them into editable Three.js models they can adjust in the browser. Game developers gain a route to pull real interior geometry and photos into a scene they can tweak for prototypes or level work. Web creators who build interactive experiences get the same output without buying separate modeling tools.

The route works only if you already run Node 22.12 or newer and keep an agent that loads local skills. According to the project's GitHub page, you install the repo, run npm ci then npm run dev, and the viewer appears at localhost:5188. From there you open dollhouse, walking, overhead, wireframe or knolling views of the reconstructed room.

The capture step uses an iPhone app you build yourself with Xcode. You scan the space, export the data through the share sheet, drop the folder into the data directory, and point the agent at the scan-to-threejs skill. The agent reads measurements and photos, builds the Three.js scene, and lets you compare rendered angles against the original pictures. No commercial 3D package or cloud subscription enters the flow.

People outside those three groups still hit friction. The workflow stays focused on rooms, the app is source-only for now, and every reconstruction step stays iterative rather than automatic. If your agent does not support the local skill file or you lack Node 22, the chain stops before any browser view appears.

First steps with your own room

You start by cloning the wesbos/3d-model-anything repository so the viewer, runtime, and skill files sit on your machine. According to the project's GitHub page, the entire code base and the scan-to-threejs skill carry an MIT license, which means you can copy and modify them without restriction. The office demo assets live under separate terms listed in ASSETS-LICENSE.md, so treat those files as read-only examples.

Open the repo in Xcode and build the iPhone app. The source-available project supplies the full project file; no App Store binary is provided yet. Once the app runs on a LiDAR-equipped iPhone or iPad, walk through the room while the device records depth and color frames. The capture writes a folder that follows the house-capture/5 layout.

Share the finished session from the app using the system share sheet, then drop the extracted folder into data/captures-in/my-room inside the cloned repository. Non-LiDAR devices can still load and inspect these exports for review.

Next, open an agent that supports local skills and load the file at .agents/skills/scan-to-threejs/SKILL.md. Give the agent a direct request such as rebuilding the room from the new capture folder, checking measurements against the photos, and producing an editable Three.js scene. The skill walks through the same measurement, modeling, and visual-comparison steps used for the office demo, so you can iterate until the rendered views line up with the original photographs. Python 3 and Pillow are required for the comparison helpers.

The bottom line

Clone the wesbos/3d-model-anything repository first and test the scan-to-threejs skill on a single room you already captured. Watch the GitHub page for updates to the agent prompts and viewer tools, since the workflow is still manual in several places. If you need production-grade accuracy right away, keep using traditional photogrammetry software until the AI passes improve. Try one small room scan this week to see how much cleanup the Three.js output actually needs before you commit to larger projects.

Frequently asked questions

How accurate are the reconstructed Three.js rooms?

The project's GitHub page states that the workflow stays iterative and depends on reference photos for scale. No exact error measurements appear in the supplied material, so real-world accuracy remains uncertain until you test it yourself. The AI agent performs separate passes for measurement and geometry, yet final alignment still needs human review. Expect visible drift in complex corners or reflective surfaces until better calibration tools arrive.

Do I need an iPhone with LiDAR to view the models?

No. Once the Three.js scene exists, any modern browser can load and explore it. The LiDAR hardware is required only during the initial capture step on the iPhone. According to the project's GitHub page, the viewer runs locally after you run npm run dev, so desktop or tablet users can inspect and edit without special sensors.

Can the AI agent handle multiple connected rooms?

The scan-to-threejs skill processes rooms through repeated passes, but the supplied material does not confirm support for seamless multi-room connections. The workflow description focuses on single-room examples and leaves open questions about merging separate scans. You may need to run the agent on each room then combine the results manually in Three.js until further updates appear.

What Node version and extra tools are required?

The project's GitHub page does not list a required Node version or additional tools beyond the standard npm run dev command. Stable background knowledge suggests any recent LTS release of Node will work for the Three.js runtime, yet exact dependencies stay unstated. Clone the repository first and check the package.json file for the current requirements before installing.

Is the iPhone app available on the App Store now?

The supplied source material refers only to the supplied iPhone app inside the repository and gives no details on App Store availability. It remains unknown whether the app is public or requires direct installation from the GitHub files. Check the repo readme for build or sideloading instructions if the app does not appear in the store.

Sources

• GitHub - wesbos/3d-model-anything: Capture iPhone LiDAR and photos, reconstruct editable Three.js rooms, and explore them in a browser. · GitHub