このページの原文: (無し)
📦 2-07: リファクタリング(関数化)
現在、コードはメイン処理の部分に処理がすべてべた書きになっています。
これを関数化してまとめていきましょう。
⏱ 現在(処理べた書き)
↑ CodePen の JS タブでコードが見れます。
現在はメイン処理がべた書きになっています。
const createScene = () => {
const scene = new BABYLON.Scene(engine);
/**** カメラとライトをセット *****/
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
/**** マテリアル *****/
// 色
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0)
// テクスチャ
const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg");
const boxMat = new BABYLON.StandardMaterial("boxMat");
boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/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
// top 4 and bottom 5 not seen so not set
/**** World Objects *****/
const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, faceUV: faceUV, wrap: true});
box.material = boxMat;
box.position.y = 0.5;
const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});
roof.material = roofMat;
roof.scaling.x = 0.75;
roof.scaling.y = 2;
roof.rotation.z = Math.PI / 2;
roof.position.y = 1.22;
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
ground.material = groundMat;
return scene;
}
💻 関数化しよう
上のべた書きコードの処理を分割し、関数化し、外に出して整理しましょう。
↑ CodePen の JS タブでコードが見れます。
こうなります。
const createScene = () => {
const scene = new BABYLON.Scene(engine);
/**** カメラとライトをセット *****/
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
const ground = buildGround();
const box = buildBox();
const roof = buildRoof();
return scene;
}
/****** 関数化したものたち ***********/
const buildGround = () => {
//color
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
ground.material = groundMat;
}
const buildBox = () => {
// テクスチャ
const boxMat = new BABYLON.StandardMaterial("boxMat");
boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/cubehouse.png")
// それぞれの面に違った画像をあてるためのオプションパラメータ
const faceUV = [];
faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face
faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face
faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side
faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side
// top 4 and bottom 5 not seen so not set
/**** World Objects *****/
const box = BABYLON.MeshBuilder.CreateBox("box", {faceUV: faceUV, wrap: true});
box.material = boxMat;
box.position.y = 0.5;
return box;
}
// 屋根組み立て
const buildRoof = () => {
// テクスチャ
const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/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;
}
☞ 次
次はメッシュの結合について見ていきましょう。