Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Mika Flowers built an in-world marker tool for placing objects in Oniria, a 3D library made with Three.js. Rather than repeatedly editing coordinates in code, reloading the scene, and walking over to inspect each change, Flowers could go to a location in the library, drop a marker, and record its position and rotation. The markers were stored as persistent Sanity documents and could be exported.
Why a 3D library needed its own layout workflow
Oniria turns DEV articles into a navigable physical library: rooms represent categories, shelves represent collections, and books represent articles. Flowers says an early cyber-city aesthetic looked interesting but did not explain why information belonged in a particular place. The library layout made the information architecture visible in the environment.
That design also created a placement problem. As the space accumulated architecture, shelves, tables, chairs, rugs, plants, signs, lights, room entrances, and collision boundaries, arranging every asset through code became cumbersome. The tool emerged from that project-specific problem, not from a claim that Three.js has no editor.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →What made coordinate editing cumbersome?
Flowers describes an initial workflow that cloned loaded GLB assets and set their position, scale, and rotation with a Three.js helper. To move an object, the author changed numeric coordinates, saved, reloaded, and traveled through the scene to see whether the new placement worked. Repeating that loop made spatial adjustments dependent on estimating numbers and checking them in the rendered world.
#1 Best Overall
Three.js is a JavaScript library for adding 3D content to web pages, and its official site provides documentation, examples, and an editor. Flowers chose a custom workflow integrated with Oniria’s data and scene rather than making a separate editor the source of truth. This account describes one project’s decision; it is not a measured comparison of editor capabilities.
How the in-world marker tool worked
- Go to the intended location. Flowers navigated to the spot in the library where an object should be placed.
- Drop a marker. The marker represented a surveyed placement rather than a finished asset.
- Record the transform and context. The post shows fields for a label, room slot, district, x/y/z position, and yaw. It also includes example coordinates such as
16.154, 0, 5.369; these are illustrative placement values, not performance measurements. - Use the surveyed values for asset placement. The marker provided numbers derived from the desired location in the scene, which could then inform placement through the project’s asset workflow.
Flowers summed up the idea this way: “I could use the room itself to produce the numbers.” The change was from mentally estimating a position in code to surveying the location in the environment where the object belonged.
How placement notes persisted
Flowers reports that markers were Sanity documents with persistent IDs, so notes could survive a refresh and be revisited. The post also shows an export format named oniria-library-layout-pins-v1. This makes the tool more than a temporary visual aid: it recorded placement notes in the project’s existing data environment and exposed an export path.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →The examples connect layout details such as district, room, and shelf slot to Three.js placement. However, the post does not document enough implementation detail to establish a complete schema or how searchable shelves and dynamic slots behave.
Rank #3
What this workflow establishes—and what it does not
| Question | What Flowers’s account supports | What it does not establish |
|---|---|---|
| Where placement happens | In the scene, by navigating to a desired location and recording a marker. | That the tool replaces all code-based placement. |
| How layout notes persist | Markers are described as Sanity documents with persistent IDs, and an export format is shown. | Whether marker documents load at runtime or are baked into a build. |
| How transforms return to the scene | The author says surveyed values are used in asset placement. | The exact synchronization path back into the code-owned scene graph, or whether changes are automatically round-tripped. |
| Placement safeguards | The account describes recording location and rotation. | Grid snapping, collision validation, or automatic bounds checks. |
| Comparative outcomes | The author explains why repeated code edits and scene reloads became cumbersome. | Measured speed, accuracy, or superiority over other editors. |
Those boundaries matter if you are considering a similar tool. A marker workflow can make it easier to capture a desired location, but the available account does not show how data is versioned, reviewed, validated, or applied to a production scene. Those decisions need to be designed for the project rather than assumed from the presence of markers.
When an in-world tool makes sense
A project-specific marker tool is worth considering when layout is tightly connected to the project’s own data model—for example, when a placement needs to retain a district, room, or collection relationship alongside its transform. It may also suit teams that routinely inspect placements by walking through a scene and want to capture positions where they make decisions.
Rank #4
- Consider the workflow cost: if object placement is occasional and the scene is small, editing coordinates may remain simpler.
- Define the source of truth: decide whether code, content documents, an editor, or an export is authoritative before building synchronization around markers.
- Plan validation explicitly: determine how to catch collisions, invalid room assignments, and out-of-bounds placements; Flowers’s post does not report those safeguards.
- Make persistence inspectable: stable IDs and a documented export format can help preserve and move layout notes, but they do not by themselves guarantee diffability or automatic scene updates.
Three.js learning resources
For readers building a similar workflow, the Three.js site links to the project’s editor, documentation, examples, and learning resources. The official Fundamentals manual introduces the library’s role in adding 3D content to a webpage. Discover three.js offers an online book with a live editor and coverage including transforms, lighting, cameras, and model loading. Three.js Journey lists lessons on transforms, debug interfaces, model loading, and game creation.
Recommended Free Tools
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
