Hey there guys, just another babylonjs newbie here
So this is the thing here, i have been messing around with babylonjs while learning but i just hit a stumbling block that is really making me go crazy
My main goal is to be able to change a face material when a pick event happens to collide with the target mesh
So i created a simple Cube using MeshBuilder like below,
const sampleBox = BABYLON.MeshBuilder.CreateBox('sampleBox', {
size: 10,
updatable: true
}, scene, true);
sampleBox.isPickable = true;
sampleBox.position = new Vector3(0, 0, 0);
let verticesCount = sampleBox.getTotalVertices();
Then i applied maltimaterial to 4 of the box faces like below
let material0 = new StandardMaterial('material0', scene);
material0.diffuseTexture = new Texture('/@kga_brawlhalla.jpg', scene);
material0.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material0.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material0.specularColor = new Color3.Black();
let material1 = new StandardMaterial('material2', scene);
material1.diffuseTexture = new Texture('/elina.jpg', scene);
material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material1.specularColor = new Color3.Black();
let material2 = new StandardMaterial('material2', scene);
material2.diffuseTexture = new Texture('/@kga_pubg.jpg', scene);
material2.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material2.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
material2.specularColor = new Color3.Black();
let material3 = new StandardMaterial('material3', scene);
material3.diffuseTexture = new Texture('/test-image.jpg', scene);
material3.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material3.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material3.specularColor = new Color3.Black();
// Define the multimaterial
let maltimat = new MultiMaterial('multi', scene);
maltimat.subMaterials.push(material0);
maltimat.subMaterials.push(material1);
maltimat.subMaterials.push(material2);
maltimat.subMaterials.push(material3);
// Assign mesh material to the mesh
sampleBox.material = maltimat;
// Define the subMeshes
sampleBox.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 0, 6, sampleBox));
sampleBox.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 6, 6, sampleBox));
sampleBox.subMeshes.push(new BABYLON.SubMesh(3, 0, verticesCount, 12, 6, sampleBox));
sampleBox.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 16, 6, sampleBox));
So when using the pick event i was able to change the material of a face that contained a submesh applied to it by accessing the submesh array and changing the materialIndex to one of the one contained in the maltimaterial the problems with this solution were as below
-
I tried using submeshId to identify the clicked face and change the material index but all it returns is zero
-
I used 4 submeshes for a reason such that i can check if a certain face contains a submesh material and i can just change the index else i can create a new BABYLON.submesh and apply to the selected face but how do i generate the startIndex automatically from the pick info or rather how do i do this
scene.onPointerPick = (event, pickInfo) => { if (pickInfo.hit) { let indices = pickInfo.pickedMesh.getIndices(); let faceId = pickInfo.faceId; let index0 = indices[pickInfo.faceId * 3]; let index1 = indices[pickInfo.faceId * 3 + 1]; let index2 = indices[pickInfo.faceId * 3 + 2]; let positions = pickInfo.pickedMesh.getVerticesData(VertexBuffer.PositionKind); if (submeshId){ sampleBox.subMeshes[pickInfo.subMeshId].materialIndex = 0; } else { new BABYLON.SubMesh(1,0,verticesCount, indexStart, count, sampleBox); } } }
Another solution was to use vertexData but i could only manage to do that with colors by manipulating the colors array but not able to do this with images.
let positions = [-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3];
let indices = [0, 1, 2, 3, 4, 5];
let colors = [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1];
let vertexData = new BABYLON.VertexData();
vertexData.positions = positions;
vertexData.indices = indices;
vertexData.colors = colors;
vertexData.applyToMesh(sampleMesh);
I would appreciate any help and even buy a soda and give a hug if i get some help and also if you were near me:hugs: