babylon.js 学习笔记(3)

一、理解babylon.js 坐标系

const createScene = function () {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    //方块1(靠左,靠下,靠前)
    const box1 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
    //Vector(x,y,z) 表示x,y,z三轴的坐标值
    box1.position = new BABYLON.Vector3(-1, -0.199, -0.4);

    //方块2(放在正中央)
    const box2 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
    box2.position = new BABYLON.Vector3(0, 0, 0);

    //方块3(靠右,靠上,靠后)
    const box3 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
    box3.position = new BABYLON.Vector3(1, 0.2, 0.4);

    var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 3, height: 1.5 }, scene);
    let groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
    ground.material = groundMaterial;
    ground.material.diffuseColor = BABYLON.Color3.Black();

    return scene;
};

在线地址:https://yjmyzz.github.io/babylon_js_study/day03/01.html

 

BABYLON.Vector3(x,y,z) 是一个很重要的对象,不仅能用于设置对象的位置,还能控制缩放大小,以及旋转角度。
//方块1(靠左,靠下,靠前)
const box1 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
//Vector(x,y,z) 表示x,y,z三轴的坐标值
box1.position = new BABYLON.Vector3(-1, -0.199, -0.4);
box1.scaling = new BABYLON.Vector3(0.5, 1, 1);

//方块2(放在正中央)
const box2 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
box2.position = new BABYLON.Vector3(0, 0, 0);
box2.scaling = new BABYLON.Vector3(1, 0.5, 1);
//绕y轴转45度
box2.rotation = new BABYLON.Vector3(0,Math.PI/4,0);

//方块3(靠右,靠上,靠后)
const box3 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
box3.position = new BABYLON.Vector3(1, 0.2, 0.4);
box3.scaling = new BABYLON.Vector3(1, 1, 0.5);
box3.rotation = new BABYLON.Vector3(-Math.PI/4,0,0);

在线地址:https://yjmyzz.github.io/babylon_js_study/day03/02.html 

 

二、画1个简单的小房子

如上图,画1个三棱柱,以及1个立方体,组合起来即可。但babylon.js中并没有创建三棱柱的api,只能创建圆柱体,还记得前面学过的吗?任何复杂的对象(即mesh),都是一堆小三角形及各种切面的组合,三角形数越多,最终的对象越逼真。当圆柱体的边数设置为3时,即退化成三棱柱。

//Cylinder的边tessellation足够大时,即为圆柱形
const roof0 = BABYLON.MeshBuilder.CreateCylinder("roof0", {diameter: 1.3, height: 1.2, tessellation: 32},scene);
roof0.position = new BABYLON.Vector3(-1,0.26,0);
roof0.scaling = new BABYLON.Vector3(0.25,0.25,0.25);

const roof1 = BABYLON.MeshBuilder.CreateCylinder("roof1", {diameter: 1.3, height: 1.2, tessellation: 32},scene);
roof1.position = new BABYLON.Vector3(-0.5,0.26,0);
roof1.scaling = new BABYLON.Vector3(0.25,0.25,0.25);
//绕x轴转90度
roof1.rotation = new BABYLON.Vector3(Math.PI / 2,0,0);

//Cylinder的边tessellation=3时,即为三棱柱
const roof2 = BABYLON.MeshBuilder.CreateCylinder("roof2", {diameter: 1.3, height: 1.2, tessellation: 3},scene);
roof2.position = new BABYLON.Vector3(0,0.24,0);
roof2.scaling = new BABYLON.Vector3(0.4,0.4,0.4);
roof2.rotation = new BABYLON.Vector3(0,Math.PI / 2,Math.PI / 2);


//三棱柱+方块,组合成1个简单的房子
const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3},scene);
roof.position = new BABYLON.Vector3(0.9,0.6,0);
roof.scaling = new BABYLON.Vector3(0.4,0.4,0.4);
roof.rotation = new BABYLON.Vector3(0,Math.PI / 2,Math.PI / 2);

const box = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
box.position = new BABYLON.Vector3(0.9, 0.24, 0);
box.scaling = new BABYLON.Vector3(0.95, 1.2, 0.95);

在线地址:https://yjmyzz.github.io/babylon_js_study/day03/03.html

样子是有了,但是光秃秃的,比较难看,可以给它贴上壁纸,先找二张壁纸图片:

//设置屋顶及屋身的贴图材质
const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("../assets/img/roof.jpg", scene);
const boxMat = new BABYLON.StandardMaterial("boxMat");
boxMat.diffuseTexture = new BABYLON.Texture("../assets/img/floor.png");

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

在线地址: https://yjmyzz.github.io/babylon_js_study/day03/04.html

房子是有窗户的,再来看看如何解决窗户的问题,答案仍然是在贴图上做文章,比如将下面这张带窗户的贴纸,在整个屋身上贴一圈即可

象不象某些地方的形象工程,哈

尝试用这个新贴图试一下:

//对比,画1个方块,用cubehouse贴图
const box2 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4 }, scene);
box2.position = new BABYLON.Vector3(1, 0.24, 0);
box2.scaling = new BABYLON.Vector3(0.95, 1.2, 0.95);
const boxMat2 = new BABYLON.StandardMaterial("boxMat2");
boxMat2.diffuseTexture = new BABYLON.Texture("../assets/img/cubehouse.png");
box2.material = boxMat2;

在线地址:https://yjmyzz.github.io/babylon_js_study/day03/05.html 

好象有哪里不对,这看上去,象个快递包裹^_~,让我们想一想:

一般情况下,不用看屋身的底部和顶部(注:底部是绿色的大地,顶部被屋顶挡住了),所以可以将这张贴图切为4份,分别贴在屋身的前后左右。从CreateBox的API文档知,有1个参数faceUV可以指定box每个面的贴图:

faceUV可以使用Vector4对象做为参数:

vector (lower left x, lower left y, upper right x, upper right y)

//屋身四面的贴图坐标
const faceUV = [];
faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //后面
faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //前面
faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //右面
faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //左面

...
const box2 = BABYLON.MeshBuilder.CreateBox("box", { size: 0.4,faceUV:faceUV }, scene);
...

  

 在线地址:https://yjmyzz.github.io/babylon_js_study/day03/06.html 

 

为了方便后面代码复用,我们把创建地面、屋顶、屋身 这些基本逻辑,封装一下:

//调整地面/屋顶/屋身的大小及位置
const adjust = (ground, roof, box) => {
    const scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
    ground.scaling = scaling;
    roof.scaling = scaling;
    box.scaling = scaling;
    box.position.y = ground.position.y + 0.25;
    roof.position.y = box.position.y + 0.4;

    box.position.x = -1;
    roof.position.x = box.position.x;
}

//创建地面
const buildGround = () => {
    const groundMat = new BABYLON.StandardMaterial("groundMat");
    groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 3 });
    ground.material = groundMat;
    return ground;
}

//创建屋顶
const buildRoof = () => {
    const roofMat = new BABYLON.StandardMaterial("roofMat");
    roofMat.diffuseTexture = new BABYLON.Texture("../assets/img/roof.jpg");

    const roof = BABYLON.MeshBuilder.CreateCylinder("roof", { diameter: 1.3, height: 1.2, tessellation: 3 });
    roof.material = roofMat;
    roof.scaling.x = 0.75;
    roof.rotation.z = Math.PI / 2;
    roof.position.y = 1.22;

    return roof;
}

//创建屋身
const buildBox = () => {
    const boxMat = new BABYLON.StandardMaterial("boxMat");
    boxMat.diffuseTexture = new BABYLON.Texture("../assets/img/cubehouse.png")

    const faceUV = [];
    faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //后面
    faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //前面
    faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //右面
    faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //左面

    const box = BABYLON.MeshBuilder.CreateBox("box", { faceUV: faceUV, wrap: true });
    box.material = boxMat;
    box.position.y = 0.5;

    return box;
}

//在这里添加自己的核心代码
const createScene = function () {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0.5, 0.5, 0));

    const ground = buildGround();
    const roof = buildRoof();
    const box = buildBox();

    adjust(ground, roof, box);

    return scene;
};

最后,再添加1种风格的房屋做为本篇收场:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A Basic House</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            touch-action: none;
        }

        #canvasZone {
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- 导入babylon核心功能 -->
    <script src="../js/babylon.js"></script>
    <!-- 允许scene中导入model -->
    <script src="../js/babylonjs.loaders.min.js"></script>
    <!-- 允许使用触屏 -->
    <script src="../js/pep.js"></script>
</head>

<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>

    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        //调整地面/屋顶/屋身的大小及位置
        const adjust = (ground, roof, box) => {
            const scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
            ground.scaling = scaling;
            roof.scaling = scaling;
            box.scaling = scaling;
            box.position.y = ground.position.y + 0.25;
            roof.position.y = box.position.y + 0.4;

            box.position.x = -0.8;
            roof.position.x = box.position.x;
        }


        //调整-联体别墅-地面/屋顶/屋身的大小及位置
        const adjustSemiHouse = (ground, roof, box) => {
            const scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
            roof.scaling = scaling;
            box.scaling = scaling;
            box.position.y = ground.position.y + 0.25;
            roof.position.y = box.position.y + 0.4;
            box.position.x = 0.5;
            roof.position.x = box.position.x;
        }

        //创建地面
        const buildGround = () => {
            const groundMat = new BABYLON.StandardMaterial("groundMat");
            groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 3 });
            ground.material = groundMat;
            return ground;
        }

        //创建屋顶
        const buildRoof = () => {
            const roofMat = new BABYLON.StandardMaterial("roofMat");
            roofMat.diffuseTexture = new BABYLON.Texture("../assets/img/roof.jpg");

            const roof = BABYLON.MeshBuilder.CreateCylinder("roof", { diameter: 1.3, height: 1.2, tessellation: 3 });
            roof.material = roofMat;
            roof.scaling.x = 0.75;
            roof.rotation.z = Math.PI / 2;
            roof.position.y = 1.22;

            return roof;
        }

        //创建-联体别墅-屋顶
        const buildSemiHouseRoof = () => {

            const roof = BABYLON.MeshBuilder.CreateCylinder("roof", { diameter: 1.3, height: 2.2, tessellation: 3 });

            roof.scaling.y = 0.75;
            roof.rotation.z = Math.PI / 2;
            roof.position.y = 1.22;

            const roofMat = new BABYLON.StandardMaterial("roofMat");
            roofMat.diffuseTexture = new BABYLON.Texture("../assets/img/roof.jpg");
            roof.material = roofMat;

            return roof;
        }

        //创建屋身
        const buildBox = () => {
            const boxMat = new BABYLON.StandardMaterial("boxMat");
            boxMat.diffuseTexture = new BABYLON.Texture("../assets/img/cubehouse.png")

            const faceUV = [];
            faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //后面
            faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //前面
            faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //右面
            faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //左面

            const box = BABYLON.MeshBuilder.CreateBox("box", { faceUV: faceUV, wrap: true });
            box.material = boxMat;
            box.position.y = 0.5;

            return box;
        }

        //创建-联体别墅-屋身
        const buildSemiHouseBox = () => {
            const boxMat = new BABYLON.StandardMaterial("boxMat");
            boxMat.diffuseTexture = new BABYLON.Texture("../assets/img/semihouse.png")

            const faceUV = [];
            faceUV[0] = new BABYLON.Vector4(0.6, 0.0, 1.0, 1.0); //rear face
            faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.4, 1.0); //front face
            faceUV[2] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //right side
            faceUV[3] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //left side

            const box = BABYLON.MeshBuilder.CreateBox("box", { width: 2, height: 1, faceUV: faceUV, wrap: true });
            box.material = boxMat;
            box.position.y = 0.5;

            return box;
        }

        //在这里添加自己的核心代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0.5, 0.5, 0));

            const ground = buildGround();

            const roof = buildRoof();
            const box = buildBox();
            adjust(ground, roof, box);

            const roof2 = buildSemiHouseRoof();
            const box2 = buildSemiHouseBox();
            adjustSemiHouse(ground, roof2, box2);

            return scene;
        };

        const scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

在线地址:https://yjmyzz.github.io/babylon_js_study/day03/07.html  

 

参考文档:

https://doc.babylonjs.com/features/introductionToFeatures/chap2/variation

posted @ 2023-05-20 15:23  菩提树下的杨过  阅读(276)  评论(0编辑  收藏  举报