# babylon.js 學習筆記(3)

```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;
};
```

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);
```

```//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);
```

```//設置屋頂及屋身的貼圖材質
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;
```

```//對比，畫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;
```

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);
...
```

```//調整地面/屋頂/屋身的大小及位置
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();

return scene;
};
```

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

<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;
}

#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/pep.js"></script>

<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();

const roof2 = buildSemiHouseRoof();
const box2 = buildSemiHouseBox();

return scene;
};

const scene = createScene();

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

engine.resize();
});
</script>
</body>

</html>
```

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