Json or .babylon file usability

alphaShash · May 27, 2019, 7:29am

Hallo everyone,

I am working on a project for my company on 3D model and im using BabylonJS.

I am completely new to Babylonjs. I would like to create json file or .babylon file which contains vertices , x axis, y axis, z axis , colors, width ,length , materials all under single ID as this ID will be fetched or imported by other json file for the webserver and will be displayed on frontend application.

Can you please do give me an example of .babylon file which could be generated by giving the values manually without using blender.

Thanks in advance

JohnK · May 27, 2019, 9:25am

Welome @alphaShash, hopefully this is what you are looking for FileFormat Map (.babylon) - Babylon.js Documentation. You could use this to manually create a .babylon file.

You could also use a playground create a mesh and download a .babylon file from there. Explained in a thread on the old forum in a couple of posts

Code to download a mesh http://www.html5gamedevs.com/topic/17254-sceneserializer/?do=findComment&comment=97160
Playground showing how to download a scene http://www.html5gamedevs.com/topic/17254-sceneserializer/?do=findComment&comment=97164

alphaShash · May 27, 2019, 9:30am

Hello @JohnK,

Thank you for the help. I will give a try on creating the .babylon file manually. in case of any doubt , i would like to get back for more help from you.

Thanks in advance.

sebavan · May 27, 2019, 12:57pm

You could also create the file from within Babylon itself. You could for instance setup your scene manually and then use the SceneSerializer to emit the JSON for you. It might be easier and probably pretty close from the code you would have written.

alphaShash · May 27, 2019, 1:03pm

Hi @sebavan,

Thank you for the reply, as far my code is completely hard coded with vectors, colors and its to big where ist contains an windows, door etc which i dont want to have such a long code instead wanted to b mentioned in json r .babylon file and can be called from that file,

down is a sample of my code of a single room for example.

var canvas = document.getElementById(“renderCanvas”);

var createScene = function() {

var scene = new BABYLON.Scene(engine);

	// camera
	var camera = new BABYLON.ArcRotateCamera(
		"Camera",
		-Math.PI / 2,
		Math.PI / 3,
		25,
		new BABYLON.Vector3(0, 0, 4.5),
		scene
	);
	camera.attachControl(canvas, true);

	var light = new BABYLON.HemisphericLight(
		"hemiLight",
		new BABYLON.Vector3(10, 10, 0),
		scene
	);
	var wallmat = new BABYLON.StandardMaterial("wallMaterial", scene);
wallmat.diffuseColor = new BABYLON.Color3( 0, 0, .8);
	
var wallmat1 = new BABYLON.StandardMaterial("wallMaterial", scene);
wallmat1.diffuseColor = new BABYLON.Color3( 0.8, 0, 0);

var innerwallmat = new BABYLON.StandardMaterial("innerwallmaterial", scene);
innerwallmat.diffuseColor = new BABYLON.Color3(
	240 / 255,
	223 / 255,
	203 / 255
);
var frontWall1Data = [
	new BABYLON.Vector3(-4.5, 0, -3),
	new BABYLON.Vector3(-4.3, 0, -3),
	new BABYLON.Vector3(-0.5, 0, -3),
	new BABYLON.Vector3(4.5, 0, -3),
	new BABYLON.Vector3(4.5, 0, 1),
	new BABYLON.Vector3(-4.5, 0, 1)
];

var frontWindow1Holes = [];
frontWindow1Holes[0] = [
	new BABYLON.Vector3(-2.15, 0, -2.3),
	new BABYLON.Vector3(2, 0, -2.3),
	new BABYLON.Vector3(2, 0, -0.3),
	new BABYLON.Vector3(-2.15, 0, -0.3)
];

var faceUV = new Array(3);
faceUV[0] = new BABYLON.Vector4(0, 0, 7 / 15, 1);

var frontWall1 = BABYLON.MeshBuilder.ExtrudePolygon(
	"northWall",{ shape: frontWall1Data,depth: 0.15,holes: frontWindow1Holes,faceUV: faceUV},scene
);
frontWall1.rotation.x = -Math.PI / 2;
frontWall1.position.y = 6;
frontWall1.material = wallmat;

var rearWallnb3Data = [
	new BABYLON.Vector3(-4.5, 0, -3),
	new BABYLON.Vector3(4.5, 0, -3),
	new BABYLON.Vector3(-0.5, 0, -3),	// rear door
	new BABYLON.Vector3(-0.5, 0, -0.75), // rear door
	new BABYLON.Vector3(0.5, 0, -0.75), // rear door
	new BABYLON.Vector3(0.5, 0, -3),	// rear door
	new BABYLON.Vector3(4.5, 0, -3),
	new BABYLON.Vector3(4.5, 0, 1),
	new BABYLON.Vector3(-4.5, 0, 1)
];

//Holes in XoZ plane


var rearFaceUV = [];
rearFaceUV[0] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);
rearFaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
rearFaceUV[2] = new BABYLON.Vector4(0, 0, 7 / 15, 1);

var rearWallnb3 = BABYLON.MeshBuilder.ExtrudePolygon(
	"southWall",
	{
		shape: rearWallnb3Data,
		depth: 0.1,
		faceUV: rearFaceUV
	},
	scene
);
rearWallnb3.rotation.x = -Math.PI / 2;
rearWallnb3.position.z = 9.15;
rearWallnb3.position.y = 6;

rearWallnb3.material = wallmat;

// right side wall
var sideWallnb3Data = [
	new BABYLON.Vector3(-3.15, 0, -3),
	new BABYLON.Vector3(6, 0, -3),
	new BABYLON.Vector3(6, 0, 1),
	new BABYLON.Vector3(3.1, 0, 1),
	new BABYLON.Vector3(0, 0, 1),
	new BABYLON.Vector3(-3.15, 0, 1)
];

var side3FaceUV = new Array(3);

side3FaceUV[2] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);
side3FaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
side3FaceUV[0] = new BABYLON.Vector4(0, 0, 7 / 15, 1); 

var sideWallnb3 = BABYLON.MeshBuilder.ExtrudePolygon(
	"eastWall",
	{ shape: sideWallnb3Data, depth: 0.1 , faceUV: side3FaceUV  },
	scene
);
sideWallnb3.rotation.z = -Math.PI / 2;
sideWallnb3.rotation.x = -Math.PI / 2;
sideWallnb3.position.x = -4.4;
sideWallnb3.position.z = 3.15;
sideWallnb3.position.y = 6;

sideWallnb3.material = wallmat1;

// left side wall
var sideWallnb4Data = [
	new BABYLON.Vector3(-3.15, 0, -3),
	new BABYLON.Vector3(6, 0, -3),
	new BABYLON.Vector3(6, 0, 1),
	new BABYLON.Vector3(3.1, 0, 1),
	new BABYLON.Vector3(0, 0, 1),
	new BABYLON.Vector3(-3.15, 0, 1)
];

var sideWindowHoles = [];
sideWindowHoles[0] = [
	new BABYLON.Vector3(2.5, 0, -2.3),
	new BABYLON.Vector3(-0.45, 0, -2.3),
	new BABYLON.Vector3(-0.45, 0, -0.3),
	new BABYLON.Vector3(2.5, 0, -0.3)
];

var side4FaceUV = new Array(3);

side4FaceUV[0] = new BABYLON.Vector4(0, 0, 7 / 15, 1);
side4FaceUV[1] = new BABYLON.Vector4(14 / 15, 0, 1, 1);
side4FaceUV[2] = new BABYLON.Vector4(7 / 15, 0, 14 / 15, 1);

var sideWallnb4 = BABYLON.MeshBuilder.ExtrudePolygon(
	"westWall",
	{ shape: sideWallnb4Data, depth: 0.1,	holes: sideWindowHoles, faceUV: side4FaceUV },
	scene
);
sideWallnb4.rotation.z = -Math.PI / 2;
sideWallnb4.rotation.x = -Math.PI / 2;
sideWallnb4.position.x = 4.5;
sideWallnb4.position.z = 3.15;
sideWallnb4.position.y = 6;

sideWallnb4.material = wallmat1;

// second floor

var firstfloorData = [
	new BABYLON.Vector3(-4.5, 0, 0),
	new BABYLON.Vector3(4.5, 0, 0),
	new BABYLON.Vector3(4.5, 0, 6),
	new BABYLON.Vector3(4.5, 0, 6),
	new BABYLON.Vector3(4.5, 0, 9),
	new BABYLON.Vector3(-4.5, 0, 9)
];

var floorFaceUV = new Array(3);

floorFaceUV[0] = new BABYLON.Vector4(0, 0, 0.5, 1);
floorFaceUV[2] = new BABYLON.Vector4(0.5, 0, 1, 1);

var floor = BABYLON.MeshBuilder.ExtrudePolygon(
	"floor",
	{
		shape: firstfloorData,
		depth: 0.1,
		faceUV: floorFaceUV
	},
	scene
);
floor.position.y = 3.1;
floor.position.z = 0.15;

// floor.material = floormat;


var ceilingData = [
	new BABYLON.Vector3(-4.4, 0, 0),
	new BABYLON.Vector3(4.4, 0, 0),
	new BABYLON.Vector3(4.4, 0, 6),
	new BABYLON.Vector3(4.4, 0, 6),
	new BABYLON.Vector3(4.4, 0, 9),
	new BABYLON.Vector3(-4.4, 0, 9)
];

var ceiling = BABYLON.MeshBuilder.ExtrudePolygon(
	"ceiling",
	{ shape: ceilingData, depth: 0.1 },
	scene
);
ceiling.position.y = 6.8;
ceiling.position.z = 0.15;

ceiling.material = innerwallmat;

var windowMaker = function(	width,height,frames,frameDepth,frameThickness) {
	var windowShape = [
		new BABYLON.Vector3(0, 0, 0),
		new BABYLON.Vector3(width, 0, 0),
		new BABYLON.Vector3(width, 0, height),
		new BABYLON.Vector3(0, 0, height)
	];
	var glassWidth = (width - (frames + 1) * frameThickness) / frames;
	var glassTopHeight = height / 3 - frameThickness;
	var glassBotHeight = 2 * glassTopHeight;
	var glass = [];
	var acf = frameThickness;
	for (var f = 0; f < frames; f++) {
		glass[2 * f] = [];
		glass[2 * f].push(
			new BABYLON.Vector3(acf, 0, 2 * frameThickness + glassBotHeight)
		);
		glass[2 * f].push(
			new BABYLON.Vector3(
				acf + glassWidth,
				0,
				2 * frameThickness + glassBotHeight
			)
		);
		glass[2 * f].push(
			new BABYLON.Vector3(
				acf + glassWidth,
				0,
				2 * frameThickness + glassBotHeight + glassTopHeight
			)
		);
		glass[2 * f].push(
			new BABYLON.Vector3(
				acf,
				0,
				2 * frameThickness + glassBotHeight + glassTopHeight
			)
		);
		glass[2 * f + 1] = [];
		glass[2 * f + 1].push(new BABYLON.Vector3(acf, 0, frameThickness));
		glass[2 * f + 1].push(
			new BABYLON.Vector3(acf + glassWidth, 0, frameThickness)
		);
		glass[2 * f + 1].push(
			new BABYLON.Vector3(
				acf + glassWidth,
				0,
				frameThickness + glassBotHeight
			)
		);
		glass[2 * f + 1].push(
			new BABYLON.Vector3(acf, 0, frameThickness + glassBotHeight)
		);
		acf += frameThickness + glassWidth;
	}
	var window = BABYLON.MeshBuilder.ExtrudePolygon(
		"window",
		{ shape: windowShape, holes: glass, depth: frameDepth },
		scene
	);
	window.rotation.x = -Math.PI / 2;
	// window.rotation.z = 1;
	return window;
};

var windowFTUM = windowMaker(4.15, 2, 4, 0.15, 0.1);
windowFTUM.position.x = -2.15;
windowFTUM.position.y = 3.7;
windowFTUM.position.z = 0.1;

var windowMaker1 = function(width,height,frames,frameDepth,frameThickness) {
	var windowShape = [
		new BABYLON.Vector3(0, 0, 0),
		new BABYLON.Vector3(width, 0, 0),
		new BABYLON.Vector3(width, 0, height),
		new BABYLON.Vector3(0, 0, height)
	];
	var glassWidth = (width - (frames + 1) * frameThickness) / frames;
	var glassTopHeight = height / 3 - frameThickness;
	var glassBotHeight = 2 * glassTopHeight;
	var glass = [];
	var acf = frameThickness;
	for (var f = 0; f < frames; f++) {
		glass[2 * f] = [];
		glass[2 * f].push(
			new BABYLON.Vector3(acf, 0, 2 * frameThickness + glassBotHeight)
		);
		glass[2 * f].push(
			new BABYLON.Vector3(
				acf + glassWidth,
				0,
				2 * frameThickness + glassBotHeight
			)
		);
		glass[2 * f].push(
			new BABYLON.Vector3(
				acf + glassWidth,
				0,
				2 * frameThickness + glassBotHeight + glassTopHeight
			)
		);
		glass[2 * f].push(
			new BABYLON.Vector3(
				acf,
				0,
				2 * frameThickness + glassBotHeight + glassTopHeight
			)
		);
		glass[2 * f + 1] = [];
		glass[2 * f + 1].push(new BABYLON.Vector3(acf, 0, frameThickness));
		glass[2 * f + 1].push(
			new BABYLON.Vector3(acf + glassWidth, 0, frameThickness)
		);
		glass[2 * f + 1].push(
			new BABYLON.Vector3(
				acf + glassWidth,
				0,
				frameThickness + glassBotHeight
			)
		);
		glass[2 * f + 1].push(
			new BABYLON.Vector3(acf, 0, frameThickness + glassBotHeight)
		);
		acf += frameThickness + glassWidth;
	}
	var window = BABYLON.MeshBuilder.ExtrudePolygon(
		"window",
		{ shape: windowShape, holes: glass, depth: frameDepth },
		scene
	);
	window.rotation.x = -Math.PI / 2;
	window.rotation.z = 1.6;
	return window;
};

var windowRTUL = windowMaker1(3, 2, 2, 0.15, 0.1);
windowRTUL.position.x = 4.5;
windowRTUL.position.y = 3.7;
windowRTUL.position.z = 5.6;

var doorMaker = function(width, height, depth) {
	var doorShape = [
		new BABYLON.Vector3(0, 0, 0),
		new BABYLON.Vector3(width, 0, 0),
		new BABYLON.Vector3(width, 0, height),
		new BABYLON.Vector3(0, 0, height)
	];
	edgeThickness = width / 8;
	var panelWidth = width - 2 * edgeThickness;
	var panelBotHeight = (height - 3 * edgeThickness) / 1.75;
	var panelTopHeight = 0.75 * panelBotHeight;
	var panel = [];
	panel[0] = [];
	panel[0].push(
		new BABYLON.Vector3(edgeThickness, 0, 2 * edgeThickness + panelBotHeight)
	);
	panel[0].push(
		new BABYLON.Vector3(
			edgeThickness + panelWidth,
			0,
			2 * edgeThickness + panelBotHeight
		)
	);
	panel[0].push(
		new BABYLON.Vector3(
			edgeThickness + panelWidth,
			0,
			2 * edgeThickness + panelBotHeight + panelTopHeight
		)
	);
	panel[0].push(
		new BABYLON.Vector3(
			edgeThickness,
			0,
			2 * edgeThickness + panelBotHeight + panelTopHeight
		)
	);
	panel[1] = [];
	panel[1].push(new BABYLON.Vector3(edgeThickness, 0, edgeThickness));
	panel[1].push(
		new BABYLON.Vector3(edgeThickness + panelWidth, 0, edgeThickness)
	);
	panel[1].push(
		new BABYLON.Vector3(
			edgeThickness + panelWidth,
			0,
			edgeThickness + panelBotHeight
		)
	);
	panel[1].push(
		new BABYLON.Vector3(edgeThickness, 0, edgeThickness + panelBotHeight)
	);
	var door = BABYLON.MeshBuilder.ExtrudePolygon(
		"door",
		{ shape: doorShape, holes: panel, depth: depth },
		scene
	);
	door.rotation.x = -Math.PI / 2;
	var panelB = BABYLON.MeshBuilder.CreateBox(
		"p1b",
		{ width: panelWidth, height: panelBotHeight, depth: depth / 2 },
		scene
	);
	panelB.position.x = edgeThickness + panelWidth / 2;
	panelB.position.y = edgeThickness + panelBotHeight / 2;
	panelB.position.z = depth / 2;
	var panelT = BABYLON.MeshBuilder.CreateBox(
		"p1t",
		{ width: panelWidth, height: panelTopHeight, depth: depth / 2 },
		scene
	);
	panelT.position.x = edgeThickness + panelWidth / 2;
	panelT.position.y = 2 * edgeThickness + panelBotHeight + panelTopHeight / 2;
	panelT.position.z = depth / 2;

	return BABYLON.Mesh.MergeMeshes([door, panelB, panelT], true);
};

var doormat = new BABYLON.StandardMaterial("door", scene);
doormat.diffuseColor = new BABYLON.Color3(82 / 255, 172 / 255, 106 / 255);
var backDoor = doorMaker(1, 2.25, 0.1, 0.05);
	// backDoor.rotation.y = Math.PI / 2;
	backDoor.position.x = -0.5;
	backDoor.position.y = 3;
	backDoor.position.z = 9.2;
	backDoor.material = doormat;


		return scene;

}

var engine = new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true
});
var scene = createScene();

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

// Resize
window.addEventListener(“resize”, function() {
engine.resize();
});

alphaShash · May 27, 2019, 1:07pm

Hi @sebavan and @JohnK,

Here is my code just an example for a single room if not fetched from json all the vector indices and color and material.

What i have found another solution is from the same code for example there is "frontwall1"n with the name “northWall” this northWall has to called in a json webserver.

Any info or tip would be really helpful as i am stuck at this point.

Thanks in Advance

sebavan · May 27, 2019, 1:12pm

So you could definitely after the code add BABYLON.SceneSerializer.Serialize(scene) which will return you the JSON file you can the reuse through the sceneLoader.

Basically keeping this code as your authoring tool to create your JSON files.

Then as it is JSON you could make any procedural adjustements to it to create several variants if needed.

alphaShash · May 27, 2019, 1:34pm

Hi @sebavan ,
my Webserver json file looks like this

{
“stockwerke” :
[
{
“stockwerk”: “1.OG”,
“raeume”:
[
{
“nummer”: “1.2”,
“presentation”: {
“x”: 0,
“y”: 150,
“length”: 100,
“width”: 100,
“walls”: {
“north”: “northWall”,
“south”: “southWall”,
“east”: “eastWall”,
“west”: “westWall”
}
},
“personen”:
[
{
“name”: “Bill Gates”,
“login”: “blgates”,
“telefon”: “0”
}
],
},
{
“nummer”: “Flur”,
“presentation”: {
“x”: 0,
“y”: 100,
“length”: 600,
“width”: 50,
“walls”: {
“north”: “eNone”,
“south”: “southWall”,
“east”: “eNone”,
“west”: “eNone”
}
}
}
]
}
]
}

alphaShash · June 12, 2019, 8:19am

HI @sebavan and @JohnK

Thank you both for the tips and tricks , i have got it and was successful in completing according my requirements, it was so helpful from you both.

Thanks alot once again

Topic		Replies	Views
Using Json or GeoJson in babylon to create meshes? Questions json	17	93	April 15, 2024
Updated .babylon file format Questions	13	719	September 24, 2019
Is there any GUI based particle editor for Babylon which i can use to export JSON file? Questions particles	30	3108	May 29, 2019
Access mesh data after serializing the scene Questions	4	1167	May 13, 2019
Backend rendering of a scene Questions	11	1207	March 10, 2024

Json or .babylon file usability

Related Topics