Year
2020
Technologies
ThreeJSJavaScriptHTMLWebGL
Category
Web
https://github.com/davidantaki/3d-mesh-render/blob/main/README.md
3D Mesh Render
This was originally a code challenge for InkBit back in 2020. It is for loading and visualizing 3D models for 3D printer applications. It uses ThreeJS and WebGL.
To run
npm install node uiserver.js
In a webbrowser go to localhost:9000
Tested on Chrome and Windows 10.
source code: https://github.com/mrdoob/three.js/
Interactive demos. https://threejs.org/examples/#misc_controls_transform
For more information, go to "./doc" folder.
Features Added
Basic Functions:
- Added the basic functionality of uploading an STL
- Converted to mesh and added to scene
- It puts the mesh on the lower left corner and snaps it to the floor
- Uses its bounding box to translate the mesh so that it is flush with plane
Select Mesh:
- You can select different meshes
- The mesh your cursor is over will be highlighted
- Used a raycaster for this
- The controls will switch to the selected mesh (once you click it)
- You can press “ESC” to deselect
Delete Mesh:
- If you press “delete”, the currently selected mesh will be deleted
Duplicate Mesh:
- You can duplicate the selected mesh by pressing “D”
Save Mesh List:
- Click the “SAVE MESH LIST” button and it will save all the meshs’ filenames, positions, and rotations
Future Improvements:
- Rewrite it so that the JavaScript doesn’t use global variables
- Make the data immutable so that it would be easier to test. And/or convert it into a React project as suggested.
- Write tests! (like with Jest, for instance) I know the code is quite breakable right now since I didn’t write tests for it…