3D Object Editor

This was a 3D file editing tool built for brand clients. Users could adjust the position, scale, and rotation of objects inside existing glTF models so the models would match the positioning parameters required by virtual try-on. The tool also supported editing material parameters to produce AR rendering results that better matched product requirements.

I was responsible for the project from prototype, technical validation, and production development through post-launch maintenance and iteration.

Prototype Stage

Material Editing Tool

The first version used .obj and .mtl files as the primary input formats. React was used for the interface, Three.js handled 3D rendering and object manipulation, and useContext managed editing state.

This version allowed users to adjust model material parameters directly in the browser and preview the result immediately. It served as an early technical validation for managers and related teams to confirm product direction and workflow.

The main challenge at this stage was understanding material and lighting parameters in Three.js and WebGL, then tuning the scene, camera, and lighting setup so the browser preview could accurately represent the model.

Internal Rendering Engine Integration

After the initial validation, part of the Three.js rendering flow was replaced with the company's internal rendering engine so the editor preview could stay consistent with the actual AR product.

Because the internal engine exposed a different operating model from Three.js, I needed to reintegrate the existing object loading, material editing, and scene control flows.

To preserve an interaction experience close to Three.js, I also worked with the core engine team to discuss the low-level APIs we needed, then implemented object rotation, axis controls, and inertial deceleration interactions on the frontend.

Model Positioning Tool

The 3D models provided by brand clients usually could not be used directly in AR try-on. Their position, scale, and rotation had to be adjusted first so they matched the coordinates and positioning behavior required by the product.

I built a visual positioning interface with Three.js so users could manipulate models directly and preview the result immediately. In addition to the editing features, I also validated model import and export correctness to ensure the adjusted positioning parameters could be read correctly by the downstream AR workflow.

glTF Support

As project requirements grew, the model format gradually shifted from .obj and .mtl to glTF. Compared with earlier formats, glTF contains a more complete data structure, including scene hierarchy, materials, buffers, accessors, and custom fields.

I used Three.js to parse input files while also validating whether each model complied with the glTF specification and the support conditions of the internal rendering engine. This ensured exported models could be used correctly in later AR flows.

Because directly modifying model data could unexpectedly change external .bin files, I implemented a separate glTF export flow that controlled which nodes and parameters needed updates while avoiding changes to unrelated model data. The later positioning and material editing tools both used glTF as their primary supported format.

Technical Challenges

1. Camera and Object Rotation Interactions

To let users inspect 3D models naturally, I implemented a rotation mechanism that supported mouse drag and touch interactions, including rotational inertia and frame-by-frame deceleration.

This feature did more than change the model rotation angle. It also needed to calculate momentum from drag distance, direction, and speed, then gradually reduce the rotation speed on each frame so the interaction felt smooth and predictable.

In the Three.js version, camera and model rotation could be implemented with existing APIs. After integrating the internal rendering engine, I worked with the core engine team to define appropriate control APIs, then implemented gesture detection, velocity calculation, and the animation flow on the frontend.

2. glTF Analysis

Converting glTF model structures into data that the internal rendering engine could use required handling relationships between scene nodes, coordinate transforms, material parameters, buffers, and custom fields.

When format or export issues appeared, I referenced the glTF specification and Three.js documentation, then analyzed data differences before and after parsing, editing, and re-exporting the model.

Because these features involved file reading and output, each fix required retesting existing model cases to confirm the new version did not change the original model structure or rendering result. This helped maintain consistency across versions.

My Contribution

I was the main frontend owner for this project from prototype to production launch, and I was also the primary owner of the Three.js work, model editing flow, and glTF file handling features.

In addition to building material editing, model positioning, rotation interactions, and file export features, I also implemented part of the automatic positioning logic. This helped the system generate initial position and scale settings from model information, reducing the amount of fully manual adjustment required.

The tool brought work that previously required external 3D editing software into the company's internal workflow. Designers and related team members could inspect models, adjust positioning and materials, and preview the result in the internal rendering engine within the same interface, reducing the cost of repeatedly exporting, editing, and validating across different tools.