Cotec 3D editor
3D web editor for Cotec cat trees. Project got terminated by client before completion in 2022. Still, it reached advance stage and main functionality is there. Core idea was about involving clients in designing their own custom cat trees in online store with user friendly 3D editor because ordering custom builds through mail or phone was problematic.
Editor runs on threejs library. Besides that everything else I did myself including 3D models.
Editor
Usage
Ideally editor interface should not require any explanation but project never reached stage of UX/UI redesign.
- Click on plus button to add new tree element
- Selected element has green outline
- Newly added element is automatically selected
- Use arrow buttons to cycle between possible elements
- Use rotate buttons to rotate selected element
- Click on trash button to remove selected elements
- Click and drag within editor window to rotate view
- UI buttons disappear when view is rotated
- Click outside of cat tree elements to deselect
- When nothing is selected you can change textures
- Quickly click 9 times to show debugging information
Backlog
Things never completed:
- Better UI, current version was made for development purposes
- Encoding tree build in URL, making it possible to share designs
- Live price calculation based on used elements
- Embeding editor in online store with payment system
- Making it easy to extend, in case new tree part was produced
- Dynamic background, enabling visualisation in client room
- Editing history with undo and redo buttons
Demos
Prototype demonstrating core of editor functionality. At this stage visuals where not important.