3D Cuboids Playground

This is a 3D playground using Three.js and React/Next.js to manipulate cuboids in a scene

Developer notes:

I. Issues encountered:

1. Loading pcd file (because renderer.render was called before)
2. LoaderType not recognised
3. loading the pcd twice because of React strict mode and attempts to remove the old scene failed
4. I couldn't find anything related to the render method initially => the cuboid wasn't appearing
5. Adding a cube on the clicked position: After changing the camera position to view the entire pcd file this turned out even more challenging. Added a fixed which works for a specific camera position. However the zoom is disabled because the creation of the cubiods won't work properly after zoom, or for screen resize (the formula for the mouse position needs to be recalculated for that or overall improved -> an ideea would be a raycaster implementation)

II. Ideas to improve the assignment:

1. Add some edges to the cuboids
2. Only display the controls for a selected cuboid. Give option to click on cuboids for select and consider letting the user to also choose from a dropdown the cuboid he wants to edit. On hover highlight the cuboid in the scene (for this create an array with all the cuboids)
3. Add handlers on cuboid click (selection, change position on drag)
4. Allow zoom in and out while still properly calculating the mouse position on the scene.
5. Allow entire scene rotation and take it into account when creating a new cuboid
6. Edit cuboinds name. For a bigger project having a way to visualize all the cuboids and label them would be very usefull (ex a modal with a table containing all cuboinds)
7. For a real react app the following code should be considered for improves:

const sceneContainer = document.getElementById("scene-container") || document.body;
        sceneContainer.appendChild(renderer.domElement);

This is beucase is not a good practice to update state using DOM manipulation (beucause react won't be aware of that element and won't be able to properly update it). However for first version this should be fine, since the scene shouldn't be dependent on react re-renders but on the props (like renderer, scene, camera, etc.) and also the context makes sure that, if something gets reinitialized the hole content will be re-rendered.

(end of Developer notes)

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.