This method is only available when creating a mesh using the MeshBuilder method.
The following meshes have identifiable faces: box; cylinder; extruded polygon and polyhedron have identifiable faces and have the faceUV and faceColors parameters in the options using the MeshBuilder method to create them. This means that each of their faces can have a different texture or color. For colors a particular color is mapped to a particular face. For textures part of the image file is mapped to a particular face. This can be done with any image and it is often useful to use a texture atlas(阿特拉斯) containing a number of images combined into one image file.
When you are concerned about the orientation of the images on the faces then it can be necessary to have different orientations of the separate images in the image file.
Using these methods on the above meshes there is no need for submaterials or submeshes
Face Numbers
The playground below shows that face numbering using MeshBuilder.CreateBox is that
- side 0 faces the positive z direction
- side 1 faces the negative z direction
- side 2 faces the positive x direction
- side 3 faces the negative x direction
- side 4 faces the positive y direction
- side 5 faces the negative y direction
faceUV[f] = ((c * 1) / 6, (r * 1) / 4, ((c + 1) * 1) / 6, ((r + 1) * 1) / 4);
Colors
faceColors[f] = new BABYLON.Color4(r, g, b, a);
faceUV[f] = ((c * 1) / 6, (r * 1) / 4, ((c + 1) * 1) / 6, ((r + 1) * 1) / 4);
faceColors[f] = new BABYLON.Color4(r, g, b, a);
Create a box with six color
import { ArcRotateCamera, Color3, HemisphericLight, MeshBuilder, Scene, Texture, StandardMaterial, Vector3, Vector4, Color4 } from "@babylonjs/core";
import { createApp } from "../utils";
const app = createApp((canvas, engine) => {
const scene = new Scene(engine);
/**** Set camera and light *****/
const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new HemisphericLight('light', new Vector3(1, 1, 0), scene);
// customize your scene here
/**** Materials *****/
// color
// const groundMat = new StandardMaterial('groundMat', scene);
// groundMat.diffuseColor = new Color3(0, 1, 0);
// texture
const roofMat = new StandardMaterial('roofMat', scene);
roofMat.diffuseTexture = new Texture('assets/texture/ex01/roof.jpg', scene)
const boxMat = new StandardMaterial('boxMat', scene);
boxMat.diffuseTexture = new Texture('assets/texture/ex01/cubehouse.png', scene);
//options parameter to set different images on each side
// const faceUV = [];
// faceUV[0] = new Vector4(0.5, 0, 0.75, 1); //rear face
// faceUV[1] = new Vector4(0, 0, 0.25, 1); //front face
// faceUV[2] = new Vector4(0.25, 0, 0.5, 1); //right side
// faceUV[3] = new Vector4(0.75, 0, 1, 1); //left side
// top 4 and bottom 5 not seen so not set
// faceColor
const faceColors = [];
faceColors[0] = new Color4(1, 0, 0, 1);
faceColors[1] = new Color4(0, 1, 0, 1);
faceColors[2] = new Color4(0, 0, 1, 1);
faceColors[3] = new Color4(1, 1, 0, 1);
faceColors[4] = new Color4(1, 0, 1, 1);
faceColors[5] = new Color4(0, 1, 1, 1);
// const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);
// ground.material = groundMat;
/**** World Objects *****/
// const box = MeshBuilder.CreateBox("box", { width: 1, height: 1, depth: 1, faceUV, wrap: true }, scene);
const box = MeshBuilder.CreateBox("box", { width: 1, height: 1, depth: 1, faceColors, wrap: true }, scene);
// box.material = boxMat;
box.position.y = 0.5;
// const roof = MeshBuilder.CreateCylinder("roof", { height: 1.2, diameter: 1.3, tessellation: 3 }, scene);
// roof.material = roofMat;
// roof.scaling.x = 0.75;
// roof.rotation.z = Math.PI / 2;
// roof.position.y = 1.22;
return scene;
})
app.run();
