Apply and move a sticker to a car part

Questions
1

Hello! Can you help me with such intresting thing - for exaple I want to write a new redactor for needForSpeed and in my garage i want to tuning my car with stickers. So how can I move texture on the shape of car’s bumper for example? Can i do this with babylon.js? The perfect result will be if i will can move texture by mouse in 3d scene

2

The keyword you want to is “decals” :wink: Decals | Babylon.js Documentation

1 Like
3

i saw the decal but it’s a little has a reduce functional, how can i make do something like this? i wanna rotate and move decal or another mesh/image on surface http://tattoo-3d.com/ or https://discourse.threejs.org/t/how-does-three-achieve-model-material-automatically/26630

4

i continue to thinking how i can realize it, and the main goal to drag the decal is vusalize for user how it will looks if he click image here. so i wrote this https://playground.babylonjs.com/#1BAPRM#660

5

May be some one know why the decal is rotate on the cat’s tail? and how to prevent this

6

It rotates because the decal reuses the UV coordinates on the cat. On the tail the UV are rotated to match the surface

So you need to update the mesh so that UVs are always aligned

2 Likes
7

Hello!
I continue create a feature for shop where i working,
so the video has a large size and i cant add here but i downloaded it on google drive,

on the video we can see an layer created by fabricjs, then i transform text to .png and download it to the babylon scene.

code that i use is

const decalMaterial = new BABYLON.StandardMaterial("decalMat", this.scene);

decalMaterial.diffuseTexture = new BABYLON.Texture(this.imageDataUrl, this.scene);
decalMaterial.diffuseTexture.hasAlpha = true;
decalMaterial.zOffset = -100;


let decalSize = new BABYLON.Vector3(this.decalSizes.x, this.decalSizes.y, this.decalSizes.x/this.decalSizes.y * 50);

            let newDecal = BABYLON.Mesh.CreateDecal(
                "decal",
                this.meshes[0],
                pickInfo.pickedPoint,
                pickInfo.getNormal(true),
                decalSize
            );

and i have a question about decal size - because my model looks very complex for decal instrument - this is not a plane but 3d geometry - so the decal some times may not looks right - some part of texture may go through model and not lay on. I played a little with parameters in decalSize and understood that problem is in z parameter. Is there some additional parameter in decal that i can use for complex 3d model?
image

8

fixed it - the problem was on text overlay on previous in babylonjs, and in little resolution .png after fabricjs export. I set resolution to 5x, and put a diffuseMaterial creation in onPointer event, so the texture now doesnt contain a few decals.

9

final result, i think i have no more questions, thanks for babylonjs, I really enjoy work with babylon.js O:)

4 Likes