<html>
    <head>
        <title>Mazenstein</title>
    </head>
    <body>
        <h1>Bienvenue</h1>
    </body>
</html>

 
class Game {
    constructor(canvasElementId) {
        this._canvas = document.getElementById(canvasElementId);
        this._engine = new BABYLON.Engine(this._canvas, true);
    }
 
    createScene() {
        this._scene = new BABYLON.Scene(this._engine);
        this._scene.clearColor = new BABYLON.Color4(0, 0, 255, 1); //blue background
    }
   
    doRender() {
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });
    }
}
 
window.addEventListener('DOMContentLoaded', () => {
    // Create the game using the 'renderCanvas'.
    const game = new Game('renderCanvas');
 
    // Create the scene.
    game.createScene();
 
    // Start render loop.
    game.doRender();
});

<html>
    <head>
        <title>Mazenstein</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="mazenstein.js"></script>
        <style>
                html, body {
                    overflow: hidden;
                    width : 100%;
                    height : 100%;
                    margin : 0;
                    padding : 0;
                }
 
                #renderCanvas {
                    width : 100%;
                    height : 100%;
                }
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
    </body>
</html>

 
const cube = BABYLON.MeshBuilder.CreateBox("MyCube", { size: 1 });
cube.position = BABYLON.Vector3.Zero();

 
 
const cubeMaterial = new BABYLON.StandardMaterial("MyCubeMaterial", this._scene);
cubeMaterial.diffuseColor = BABYLON.Color3.Red();
 
cube.material = cubeMaterial;

this._camera = new BABYLON.ArcRotateCamera('MainCamera', BABYLON.Tools.ToRadians(45), BABYLON.Tools.ToRadians(45), 5, BABYLON.Vector3.Zero(), this._scene);
this._camera.attachControl(this._canvas, true);

 
const light = new BABYLON.HemisphericLight("HemisphericLight", new BABYLON.Vector3(0, 2, 0), this._scene);

 
const ground = BABYLON.MeshBuilder.CreatePlane("ground", { width: 16, height: 16 }, this._scene);

 
ground.rotation.x = BABYLON.Tools.ToRadians(90);
ground.position = new BABYLON.Vector3(0, -0.5, 0);

 
 
const groundMaterial = new BABYLON.StandardMaterial("gMaterial", this._scene);
const groundTexture = new BABYLON.Texture("assets/ground.png", this._scene);
 
groundMaterial.diffuseTexture = groundTexture;
ground.material = groundMaterial;

 
 
groundTexture.uScale = 16;
groundTexture.vScale = 16;
 
cubeMaterial.diffuseColor = BABYLON.Color3.Red();

cubeMaterial.diffuseTexture = new BABYLON.Texture("assets/wall.png", this._scene);

 
 
this._camera = new BABYLON.ArcRotateCamera('MainCamera', BABYLON.Tools.ToRadians(45), BABYLON.Tools.ToRadians(45), 5, BABYLON.Vector3.Zero(), this._scene);

this._camera = new BABYLON.UniversalCamera('MainCamera', new BABYLON.Vector3(4, 0, 4), this._scene);
this._camera.setTarget(new BABYLON.Vector3(0, 0, 0));

this._camera.speed = 0.1; //set walk speed
this._camera.minZ = 0.01; // set clipping distance
this._camera.angularSensibility = 1000; //mouse sensibility
this._camera.keysUp = [90]; // Z Key
this._camera.keysDown = [83]; // S Key
this._camera.keysLeft = [81]; // Q Key
this._camera.keysRight = [68]; // D Key

this._scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
this._camera.applyGravity = true;

 
this._scene.collisionsEnabled = true;
this._camera.checkCollisions = true;
ground.checkCollisions = true;
cube.checkCollisions = true;

 
this._camera.ellipsoid = new BABYLON.Vector3(0.15, 0.25, 0.15);

 
·      createCamera()
·      createLight()
·      createCube()
·      createGround()

createScene() {
    this._scene = new BABYLON.Scene(this._engine);
    this._scene.clearColor = new BABYLON.Color4(0, 0, 255, 1);
    this._scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
    this._scene.collisionsEnabled = true;
 
    this.createCamera();
 
    this.createLight();
   
    this.createCube();
 
    this.createGround();
}
 
createCamera() {
    this._camera = new BABYLON.UniversalCamera('MainCamera', new BABYLON.Vector3(4, 0, 4), this._scene);
    this._camera.setTarget(new BABYLON.Vector3(0, 0, 0));
    this._camera.speed = 0.1; //set walk speed
    this._camera.minZ = 0.01; // set clipping distance
    this._camera.angularSensibility = 1000; //mouse sensibility
    this._camera.keysUp = [90]; // Z Key
    this._camera.keysDown = [83]; // S Key
    this._camera.keysLeft = [81]; // Q Key
    this._camera.keysRight = [68]; // D Key
 
    this._scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
    this._camera.applyGravity = true;
    this._camera.checkCollisions = true;
    this._camera.ellipsoid = new BABYLON.Vector3(0.15, 0.25, 0.15);
 
    this._camera.attachControl(this._canvas, true);
}
 
createLight() {
    const light = new BABYLON.HemisphericLight("HemisphericLight", new BABYLON.Vector3(0, 2, 0), this._scene);
}
 
createCube() {
    const cube = BABYLON.MeshBuilder.CreateBox("MyCube",{ size: 1 });
    cube.position = BABYLON.Vector3.Zero();
 
    const cubeMaterial = new BABYLON.StandardMaterial("MyCubeMaterial", this._scene);
    cubeMaterial.diffuseTexture = new BABYLON.Texture("assets/wall_wall90.png", this._scene);
 
    cube.material = cubeMaterial;
    cube.checkCollisions = true;
}
 
createGround() {
    const ground = BABYLON.MeshBuilder.CreatePlane("ground", { width: 16, height: 16 }, this._scene);
    ground.rotation.x = BABYLON.Tools.ToRadians(90);
    ground.position = new BABYLON.Vector3(0, -0.5, 0);
 
    const groundMaterial = new BABYLON.StandardMaterial("gMaterial", this._scene);
    const groundTexture = new BABYLON.Texture("assets/ground.png", this._scene);
    groundTexture.uScale = 16;
    groundTexture.vScale = 16;
    ground.checkCollisions = true;
 
    groundMaterial.diffuseTexture = groundTexture;
 
    ground.material = groundMaterial;
}

const cube = BABYLON.MeshBuilder.CreateBox...

const faceColors = new Array(6);
faceColors[0] = new BABYLON.Color3(1, 0, 0); //red
faceColors[1] = new BABYLON.Color3(0, 1, 0); //green
faceColors[2] = new BABYLON.Color3(0, 0, 1); //blue
faceColors[3] = new BABYLON.Color3(1, 1, 0); //yellow
faceColors[4] = new BABYLON.Color3(1, 0, 1); //magenta
faceColors[5] = new BABYLON.Color3(0, 1, 1); //teal
 
const options = {
    size: 1,
    faceColors : faceColors
};
 
const cube = BABYLON.MeshBuilder.CreateBox("MyCube", options);
...
cubeMaterial.emissiveTexture = new BABYLON.Texture("assets/wall.png", this._scene);

 
 
...
const faceUV = new Array(4);
faceUV[0] = new BABYLON.Vector4(1, 1, 0, 0);//back
faceUV[1] = new BABYLON.Vector4(0, 0, 1, 1);//front
faceUV[2] = new BABYLON.Vector4(1, 0, 0, 1);//left
faceUV[3] = new BABYLON.Vector4(1, 0, 0, 1);//right
 
const options = {
    size: 1,
    faceColors: faceColors,
    faceUV: faceUV
};
...
cubeMaterial.emissiveTexture = new BABYLON.Texture("assets/wall.png", this._scene);

 

 

 
 
cubeMaterial.emissiveTexture = new BABYLON.Texture("assets/wall_wall90.png", this._scene);

const faceUV = new Array(4);
faceUV[0] = new BABYLON.Vector4(0.5, 1, 0, 0);//back
faceUV[1] = new BABYLON.Vector4(0, 0, 0.5, 1);//front
faceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);//left
faceUV[3] = new BABYLON.Vector4(0.5, 0, 1, 1);//right

 
 
const levelMap = new BABYLON.Texture("assets/map.png", this._scene,
    false, true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE,
    async () => { //onLoad callback
        const mapPixels = await levelMap.readPixels();
        //TODO
    }
);

 
async () => { //onLoad callback
    const mapPixels = await levelMap.readPixels();
    let x = 0;
    let y = 0;
 
    for (let index = 0; index < mapPixels.byteLength - 4; index += 4) {
        //TODO
    }
}

const color = new BABYLON.Color3(mapPixels[index], mapPixels[index + 1], mapPixels[index + 2]);
 
if ((color.r == 255) && (color.g == 255) && (color.b == 255)) { //white color
    //TODO
} else if ((color.r == 0) && (color.g == 0) && (color.b == 255)) { //blue color
    //TODO
}

private createWall(position, textureUrl) {
    const faceUV = new Array(4);
    faceUV[0] = new BABYLON.Vector4(0.5, 1, 0, 0);//back
    faceUV[1] = new BABYLON.Vector4(0, 0, 0.5, 1);//front
    faceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);//left
    faceUV[3] = new BABYLON.Vector4(0.5, 0, 1, 1);//right
   
    const options = {
        size: 1,
        faceUV: faceUV
    };
   
    const cube = BABYLON.MeshBuilder.CreateBox("MyCube", options);
    cube.position = position;
 
    const cubeMaterial = new BABYLON.StandardMaterial("MyCubeMaterial", this._scene);
    cubeMaterial.diffuseTexture = new BABYLON.Texture(textureUrl, this._scene);
 
    cube.material = cubeMaterial;
    cube.checkCollisions = true;
   
    return wall;
}

if ((color.r == 255) && (color.g == 255) && (color.b == 255)) { //white color
    const normalWallBox = this.createWall(new BABYLON.Vector3(x, 0, y), "assets/wall_wall90.png");
} else if ((color.r == 0) && (color.g == 0) && (color.b == 255)) { //blue color
    const normalWallBox = this.createWall(new BABYLON.Vector3(x, 0, y), "assets/wall_deco_wall_deco90.png");
}

if (...) {
} else if (...) {
   ...
}
 
x++;
if (x % 32 == 0) { //end of line of pixels reached
    x = 0;
    y++;
}
 
createGround() :
 
const ground = BABYLON.MeshBuilder.CreatePlane("ground", {
    width: 32,
    height: 32
}, this._scene);

 

 
ground.position = new BABYLON.Vector3((32 - 1) / 2, -0.5, (32 - 1) / 2); //on peut remplacer 32 -1 par 31, c’est juste pour expliciter l’application de la formule

 
 
groundTexture.uScale = 32;
groundTexture.vScale = 32;

 
private createCeiling() {
    const ceiling = BABYLON.MeshBuilder.CreatePlane("ceiling", {
        width: 32,
        height: 32
    }, this._scene);
 
    ceiling.rotation.x = BABYLON.Tools.ToRadians(-90);
    ceiling.position = new BABYLON.Vector3((t32 - 1) / 2, 0.5, (32 - 1) / 2);
 
    const ceilingMaterial = new BABYLON.StandardMaterial("gMaterial", this._scene);
    const ceilingTexture = new BABYLON.Texture("assets/ceiling.png", this._scene);
    ceilingTexture.uScale = 32;
    ceilingTexture.vScale = 32;
 
    ceilingMaterial.diffuseTexture = ceilingTexture;
 
    ceiling.material = ceilingMaterial;
}

 

private createAmbientLight() {
    const light = new BABYLON.HemisphericLight("HemisphericLight", new BABYLON.Vector3(0, 1, 0), this._scene);
    light.intensity = 0;
}