I need to create a website using pure html, css, js, php. In this website there are some categories and products that users can select for example one of them and go to the three.js page and configurate it as a 3d model and then order it.
I have created the three.js (configurator) space like this tutorial (https://youtu.be/wW0XwNhrDFQ?si=KiIzhKTLqyvhiHUW). But I don’t know how to pass data from my pure website (to send which product they want to the three.js) to the configurator page. I need to understand how can I create the part that they choose a product and then go to the page of three.js (as a sub-domain).
Consider building the entire thing without 3D / three.js at all first.
If you are unfamiliar with how to build complex projects, just start small - make a text / image-based configurator first. Make sure it does what it is meant to do. Make sure the data and routing works without issues etc (you can use anything for this, Laravel, Next.js, Jekyll, Hugo, or even pure PHP - as long as you set up the routing and server-side data nicely.)
Only when that part is finished, and you are able to configure products using just simple text / image UI - do the 3D. Rendering, regardless whether it’s 3D / 2D / prompting external AI API, should be decoupled and not influence how you built the rest of the configurator.
When you have the data + 3D viewing part done, only then add the interactions in 3D that will circle back and modify the data (if needed.)
The advice above about keeping the product/configuration data separate from the 3D renderer aged very well.
I’ve been working on this exact problem from the commerce side. The approach I ended up using is to make the normal shopping surface functional first: product options, price, stock, basket and checkout all work without waiting for the 3D scene. The Three.js viewer then loads separately in the background and synchronizes to the current configuration when it is ready.
This also avoids making the 3D renderer responsible for routing or commerce state. The website can remain a normal HTML/JS frontend, while the same product state is shared between the flat UI, the Three.js experience and the commerce backend.