We are building a configurator for a bags & accessories brand. We’re providing our own 3D model and textures. The aim is to create a configurator where you can exchange the colour of the bag (body + belt) and also add a graphic to the front of the bag.
Here’s an example of our WIP. The graphics will change later.
Hoping the community here can help us get further. The answer to the following questions would help us get to the next step:
We have a problem with the UV-coordinates between the Asset and Draft modes. In the Asset mode it works, but not in Draft. Is there a way to activate the UV-coordinates in the Draft mode?
Is there a way to lock the camera to not go lower than our horizontal position? We don’t want to see the bottom of the object.
We need to control Environment light. We need to brighten or darken the entire model and Environment reflection to metal elements.
For the sticker/graphic customisation on our bags we would ideally want the customer to be able to scale them and position it themselves. Is there a technique to solve this?
Also we need to understand how a second sticker works together with the other stickers. We can add a second sticker but we cannot move it.
Thank you for using our forum. Please find my answers below:
UV coordinates
You can activate the Babylon.js inspector in the top right corner within the Control Panel. This is pretty helpful as you can go through every setting for each mesh, material and texture in your scene.
Setting the vScale to -1 should to the trick in your case. So instead of Viewer3D.materialParameter("body", "paintable", newStiker.Value.ToText() ) please try Viewer3D.materialParameter("body", "paintable", { src: newStiker.Value.ToText(), uScale: 1, vScale: -1 }.ToText()) (see 3d viewer control)
Limit camera angles
Restricting the camera is currently not possible without using custom JavaScript. Please see the following page on how to use custom JavaScript: 3d viewer control with custom JS). When you’ve set up your custom JS project and injected the Viewer, it’s just setting the Upper beta limit of your active camera.
let camera = /** @type {ArcRotateCamera} */ (viewer.scene.activeCamera);
camera.upperBetaLimit = Math.PI / 2;
Environment light
Here’s how to use a different Environment URL: 3d viewer control
The following link describes how you can create a .env file based on a .hdr or .dds file. Using An HDR Environment For PBR | Babylon.js Documentation
For changing properties like intensity or rotation of your environment, please use custom JS.
Scale and position
There is currently no built-in functionality to scale or move paintables directly in 3D. However, you could use a Graphic component which allows the user to move, scale and rotate the stickers in a 2D canvas. The value of the Graphic Component can then be used as the texture for your paintable parameter. (see 1.)
Second sticker
Given that you go with the suggested Graphic Component approach (see 4.), you can have as many stickers, logos, image uploads etc. as you like.
your Screenshot show the editor whereas my screenshots show the Preview. The Babylon.js inspector can only be activated in the Preview but not in the editor.
By the way, you can open the Preview by clicking on the “Preview” link on the top left corner within the editor.
Thanks, that makes sense. Now our only trouble is that we have limited knowledge of Javascript, and not likely to use it for other purposes in the near future.
So that raises a new question. Is there a tutorial or a possibility to get one about how to work with the JS coding, regarding our first set of questions? What windows to open and where to insert the code? Is there a straightforward solution for this with no programming involved?
please have a look at the following GitHub repository which you can use as starting point for you project: GitHub - Combeenation/custom-js-template.
Further information on how to use custom-js in your project can be found here: Custom JS
