babylonjs note 05 build a village (06) Texture

Add Texture

const material = new BABYLON.StandardMaterial("name", scene);

const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
ground.material = groundMat; //Place the material property of the ground

color

BABYLON.Color3.Red();
BABYLON.Color3.Green();
BABYLON.Color3.Blue();
BABYLON.Color3.Black();
BABYLON.Color3.White();
BABYLON.Color3.Purple();
BABYLON.Color3.Magenta();
BABYLON.Color3.Yellow();
BABYLON.Color3.Gray();
BABYLON.Color3.Teal();

const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg", scene);
const boxMat = new BABYLON.StandardMaterial("boxMat");
boxMat.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png");

roof.material = roofMat;
box.material = boxMat;

import { ArcRotateCamera, Color3, HemisphericLight, MeshBuilder, Scene, Texture, StandardMaterial, Vector3 } from "@babylonjs/core";
import { createApp } from "../utils";

const app = createApp((canvas, engine) => {
    const scene = new Scene(engine);

    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
    const ground = MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);

    const groundMat = new StandardMaterial('groundMat', scene);
    groundMat.diffuseColor = new Color3(0,1,0);
    ground.material = groundMat;

    
    
    
    const box = MeshBuilder.CreateBox("box", {width: 1, height: 1, depth: 1}, scene);

    const boxMat = new StandardMaterial('boxMat', scene);
    boxMat.diffuseTexture = new Texture('assets/texture/ex01/floor.png', scene);
    box.material = boxMat;
    
    box.position.y = 0.5;
    
    const roof = MeshBuilder.CreateCylinder("roof", {height: 1.2, diameter: 1.3, tessellation: 3}, scene);
    
    roof.scaling.x = 0.75;
    roof.rotation.z = Math.PI / 2;
    roof.position.y = 1.22;

    const roofMat = new StandardMaterial('roofMat', scene);
    roofMat.diffuseTexture = new Texture('assets/texture/ex01/roof.jpg', scene)

    roof.material = roofMat;

    return scene;
})

app.run();