I created Prelive 3D World Editor as an internal tool for the team to prepare interactive 3D environments. It brings placement, interaction setup, navigation checks, and world configuration into one visual workspace, connecting the design of a space with the data needed to bring it into a product.
My responsibilities
My role was product development: building the editor and connecting its spatial tools, configuration controls, and validation into a practical workflow for the team.
Tools and technologies
- React
- TypeScript
- Three.js
- React Three Fiber
- Zustand
- Recast Navigation
Project context and challenge
A 3D environment provides the setting, but an interactive world needs more than visual assets. It needs starting positions, characters, meaningful areas, and rules for interaction and movement.
These decisions are spatial: a character needs to sit in the right location, an interaction needs an appropriate reach, and a route needs to connect usable spaces. Coordinates alone make those relationships difficult to judge. I created the editor so the team could configure and inspect them directly in the environment.
Project goals
- Make spatial decisions visible and easier to review.
- Connect world design to structured data for development.
- Identify configuration and navigation issues before integration.
Process and key decisions
I kept the imported environment separate from its interactive configuration. This lets the team adjust placements and behavior settings while preserving the underlying 3D asset.
The workflow combines direct manipulation with precise property controls and JSON editing. Visual tools support spatial decisions; structured editing gives developers access to the same configuration. Validation connects the two by highlighting issues that need attention.
Solution
Configure the world visually
The editor supports player starting points, character placements, zones, and interactions. The team can position elements in the scene, refine their properties, and inspect how they relate to the surrounding space. Snapping, measurement, and undo/redo support careful iteration.
Inspect movement through the environment
Navigation tools generate a walkable surface and let the team inspect routes between selected points. This makes blocked paths and disconnected areas visible during development, supporting decisions about how characters should move through the world.
Prepare world data for development
Validation surfaces missing references and configuration issues, with links back to relevant scene elements. Draft saving, versioned world configuration, and JSON export help preserve changes and prepare the data for integration.
Validation and outcomes
The result is a working internal editor that brings spatial authoring and technical preparation into one workflow. Automated tests cover configuration validation, editing history, coordinate handling, and navigation generation and reload.
Its contribution to the team is a concrete way to review how a world is configured before integrating it into the wider product. This case study documents the delivered capabilities; team-wide productivity gains have not been quantified here.