Here are a list of items I knew I wanted for this editor:
- A select box for selecting multiple objects
- A “settings” UI for showing the current properties of the selected object(s)
- A “tools” UI for showing which tool you current have selected
- A “layers” view for showing all the objects in text format
- Shortcuts for quick modifications
After a few months of getting the Three.js functionality working, I was finally ready to start working on the user interface. I originally thought I was going to make the UI using jQuery, but there was something tempting about Vue.js that caught my eye. Like other “reactive” frameworks, these API’s provide solutions for binding HTML elements to abstract or primitive variable types. This means I can bind an input field to a 3D object, and “reactively” update the HTML value when the object values are changed.
The Other Problem
Up until about a month ago, I had never used a front-end templating framework like Vue, React, or Angular. Why choose Vue? I experimented with Vue first because it was the default system for Vite projects, and it also looked like it could accomplish what I needed.
Since my project was using “import” function to compile a single file application, it made since to use Vue’s latest “Composition API” to organize the UI elements with the current source code structure.
I feel like I unlocked a new way of thinking throughout the development of this application. I started reading a book called Design Patterns by Grady Booch, and I feel like my approach to coding has completely evolved. The more I learn and test out new libraries or programming patterns, the more predictable my applications become.
I think the next step is to observe where the application is, and consider where I want it to be. I must admit, I am very exhausted with working on this project almost every morning before my 8-hour web developer job. I’m tempted to pause this project and work on something else with my new found skills, but I’m also anxious to see where this project could land.
Did I accomplish my goal with this project? Not yet, but I feel incredibly successful with what I have extracted so far.