BabylonJS: Текстовая информация в трехмерном виде

Сайты не должны быть одинаковыми, как бы не старались производители мегафреймворков вроде bootstrap. Если у Вас есть идеи и хороший программист — то сайты могут быть просто космосом! В прямом смысле слова. Проверка идеи и мини-пример 3д представления информации на движке BabylonJS.
babylonjs

Аскетичный основной код страницы

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример сайта на Babylon</title>
	<style>
		html, body {
			overflow: hidden;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
 
		#renderCanvas {
			width: 100%;
			height: 100%;
			touch-action: none;
		}
	</style>
	<script src="js/babylon.2.2.js"></script>
	<script src="js/cannon.js"></script>
	<script src="scenes/scene.js"></script>
	<script src="scenes/scene_text.js"></script>
	<script src="scenes/scene_ball.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
	var canvas = document.querySelector("#renderCanvas");
	var engine = new BABYLON.Engine(canvas, true);
	var scene = createScene();
	engine.runRenderLoop(function () {
		scene.render();
	});
	window.addEventListener('resize', function () {
		engine.resize();
	});
</script>
</body>
</html>

Главная сцена scene, в нее включаем свет, камеру и какие-то наши личные объекты)

var createScene = function () {
 
	var scene = new BABYLON.Scene(engine);
	scene.clearColor = new BABYLON.Color3(0,.11,0.1);
 
	var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), scene);
	light.intensity = .9;
 
	var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, -3, -120), scene);
	camera.setTarget(BABYLON.Vector3.Zero());
	camera.attachControl(canvas, false);
 
	VegText.create(scene);
	VegText2.create(scene);
	VegText3.create(scene);
	return scene;
};

Наши текстовые плоскости, я люблю разносить настройки отдельно, база отдельно, наследники отдельно. Многое взято из документации, потому что не все нужно придумывать с нуля, когда можно творчески обработать)

var VegTextSettings = window.VegTextSettings =  {
	'fontSmall' : '24px Lato',
	'fontBig'   : 'bold 70px Lato',
	'fontBlack' : 'black',
	'fontWhite' : 'white'
}
var VegTextBasic = window.VegTextBasic = {
	create : function(scene, playgroundSize, x, y, z, first_text_color, texts)
	{
		//много магии из документации часть 1)
		var background = BABYLON.Mesh.CreatePlane('background', playgroundSize, scene, false);
		background.material = new BABYLON.StandardMaterial('background', scene);
		background.scaling.y = 0.5;
		background.position.x = x;
		background.position.z = z;
		background.position.y = y;
 
		var backgroundTexture = new BABYLON.DynamicTexture('dynamictexture', 512, scene, true);
		background.material.diffuseTexture = backgroundTexture;
		background.material.specularColor = new BABYLON.Color3(1, 1, 0);
		background.material.backFaceCulling = false;
		//конец магии из документации часть 1)
 
		var ic = texts.length;
		for(var i = 0; i<ic; i++) {
			var text = texts[i];
			//заливка происходит только по цвету фона первого текста - поэтому тут так и стоит first_text_color
			backgroundTexture.drawText(text[0], text[1], text[2], text[3], text[4], i == 0 ? first_text_color : null);
		}
 
		//много магии из документации часть 2)
		var ground = BABYLON.Mesh.CreateGround('ground', playgroundSize, playgroundSize, 1, scene, false);
		var groundMaterial = new BABYLON.StandardMaterial('ground', scene);
		groundMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);
		groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
		ground.material = groundMaterial;
		ground.position.y = -1;
		//конец магии из документации часть 2)
 
		return background;
	},
	addAnimation : function (scene, background, from, to)
	{
		var angle = from;
		var speed = (to - from) / 60;
		var animationFunction = function() {
			angle += speed;
			if (speed > 0 && angle >= to) return false; //а вот это жесткая заглушка - по идее надо прерывать цикл выполнения
			if (speed < 0 && angle <= to) return false;
			background.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(angle * Math.PI / 180, 0, 0);
		}
		scene.registerBeforeRender(animationFunction);
	}
}
var VegText = window.VegText = {
	create : function(scene)
	{
		VegTextBasic.create(scene, 100, 0, 0, 50, '#AE4', [
			['Vegcoders.com', null, 80, VegTextSettings.fontBig, VegTextSettings.fontBlack],
			['Вебразработка с хорошей кармой', null, 200, VegTextSettings.fontSmall, VegTextSettings.fontBlack],
			['+380975670100', 300, 400, VegTextSettings.fontSmall, VegTextSettings.fontWhite],
			['ksu@vegcoders.com', 270, 430, VegTextSettings.fontSmall, VegTextSettings.fontWhite]
		]);
	}
}
var VegText2 = window.VegText2 = {
	create : function(scene)
	{
		var background = VegTextBasic.create(scene, 100, 80, 0, 20, '#AE4', [
			['PHP+', null, 80, VegTextSettings.fontBig, VegTextSettings.fontBlack],
			['PHP 5.6', null, 200, VegTextSettings.fontSmall, VegTextSettings.fontBlack],
			['PostgreSQL', null, 260, VegTextSettings.fontSmall, VegTextSettings.fontBlack],
			['MySQL', null, 320, VegTextSettings.fontSmall, VegTextSettings.fontBlack],
		]);
		VegTextBasic.addAnimation(scene, background, 0, 45);
	}
}
var VegText3 = window.VegText3 = {
	create : function(scene)
	{
		var background = VegTextBasic.create(scene, 100, -80, 0, 20, '#AE4', [
			['JS+', null, 80, VegTextSettings.fontBig, VegTextSettings.fontBlack],
			['Javascript', null, 200, VegTextSettings.fontSmall, VegTextSettings.fontBlack],
			['jQuery', null, 260, VegTextSettings.fontSmall, VegTextSettings.fontBlack],
			['AngularJS', null, 320, VegTextSettings.fontSmall, VegTextSettings.fontBlack]
		]);
		VegTextBasic.addAnimation(scene, background, 360, 315);
	}
}

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">