В прошлом уроке ты научился создавать различные меши. Но они сейчас визуально выглядят как-то мрачновато. Давай поработаем над их визуальным видом.



Структура меша
var sphere1 = BABYLON.Mesh.CreateSphere("sphere1", 10.0, 9.0, scene);
var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
materialSphere1.wireframe = true;
sphere1.material = materialSphere1;



Переходим ко второй сфере. Давай окрасим её в красный цвет и придадим немного прозрачности:
var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 10.0, 12.0, scene);
var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0);
materialSphere2.alpha = 0.3;
sphere2.material = materialSphere2;



Теперь давай перейдем к наиболее используемому материалу — текстуре. Работаем с третьей сферой:
var sphere3 = BABYLON.Mesh.CreateSphere("sphere3", 10.0, 11.0, scene);
var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
materialSphere3.diffuseTexture = new BABYLON.Texture("t1.jpg", scene);
sphere3.material = materialSphere3;



Также, ты можешь вращать текстуру вертикально и горизонтально. Работаем с четвертой сферой:
var sphere4 = BABYLON.Mesh.CreateSphere("sphere4", 10.0, 5.0, scene);
var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
materialSphere4.diffuseTexture = new BABYLON.Texture("t1.jpg", scene);
materialSphere4.diffuseTexture.vOffset = 0.6; // 60%
materialSphere4.diffuseTexture.uOffset = 0.4; // 40%
sphere4.material = materialSphere4;



Переходим к последней сфере. Если твоя текстура имеет альфа-канал, и ты хочешь, чтобы слой альфа-канала был прозрачным, то нужно установить значение hasAlpha в состояние true. Если же ты написал false, то вместо прозрачности будет черный непрозрачный слой:
var sphere5 = BABYLON.Mesh.CreateSphere("sphere5", 10.0, 12.0, scene);
var materialSphere5 = new BABYLON.StandardMaterial("texture5", scene);
materialSphere5.diffuseTexture = new BABYLON.Texture("t2.png", scene);
materialSphere5.diffuseTexture.hasAlpha = true;
sphere5.material = materialSphere5;



Пример | Сорцы

Готовый код
// Инициализируем движок и указываем с каким элементом <canvas> ему работать
			var canvas = document.querySelector("#renderCanvas");
			var engine = new BABYLON.Engine(canvas, true);
			// -------------------------------------------------------------
			// Вызываем функцию создания сцены. И окрашиваем её в белый цвет
			var createScene = function (){
				var scene = new BABYLON.Scene(engine);
				scene.clearColor = new BABYLON.Color3(1, 1, 1);
			// Устанавливаем камеру
			var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
				camera.setTarget(BABYLON.Vector3.Zero());
				camera.attachControl(canvas, false);
			// Освещение
			var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
				light.intensity = 0.5;
			// 	Структура меша
			var sphere1 = BABYLON.Mesh.CreateSphere("sphere1", 10.0, 9.0, scene);
			var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
			materialSphere1.wireframe = true;
			sphere1.material = materialSphere1;
			// Наложение цвета с добавлением прозрачности
			var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 10.0, 12.0, scene);
			var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
			materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0);
			materialSphere2.alpha = 0.3;
			sphere2.material = materialSphere2;
			// Наложение текстуры
			var sphere3 = BABYLON.Mesh.CreateSphere("sphere3", 10.0, 12.0, scene);
			var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
			materialSphere3.diffuseTexture = new BABYLON.Texture("one.png", scene);
			sphere3.material = materialSphere3;
			// Наложение текстуры с вращением 
			var sphere4 = BABYLON.Mesh.CreateSphere("sphere4", 10.0, 12.0, scene);
			var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
			materialSphere4.diffuseTexture = new BABYLON.Texture("one.png", scene);
			materialSphere4.diffuseTexture.vOffset = 0.6; // 40%
			materialSphere4.diffuseTexture.uOffset = 0.4; // 60%
			sphere4.material = materialSphere4;
			// Наложение текстуры с альфа-каналом
			var sphere5 = BABYLON.Mesh.CreateSphere("sphere5", 10.0, 12.0, scene);
			var materialSphere5 = new BABYLON.StandardMaterial("texture5", scene);
			materialSphere5.diffuseTexture = new BABYLON.Texture("two.png", scene);
			materialSphere5.diffuseTexture.hasAlpha = true;
			sphere5.material = materialSphere5;
			// Позиционирование
			sphere1.position.x = 0;
			sphere2.position.x = 20;
			sphere3.position.x = 40;
			sphere4.position.x = 60;
			sphere5.position.x = 80;

			return scene;
			};
			// -------------------------------------------------------------
			// Указываем фреймворку, что сцена готова и отправляем её на рендеринг
			var scene = createScene();
			engine.runRenderLoop(function (){
				scene.render();
			});
			// Масшабируем сцены под любые разрешения
			window.addEventListener("resize", function (){
				engine.resize();
			})

Комментарии (2)


  1. Yoto
    20.09.2015 16:48
    +5

    Простите, а в чем смысл этой статьи? Если убрать картинки, то остается лишь парочка разных строчек кода.
    Если вы хотели показать результаты работы на примерах, то стоило рассмотреть нечто более интересное, чем окрашивание сферы/каркасную модель/альфа канал.
    Сделайте картинки поменьше. FullHD тут ни к чему


  1. jonic
    21.09.2015 00:55

    // Вызываем функцию создания сцены. И окрашиваем её в белый цвет
    var createScene = function (){
    

    Это создание функции, а не «вызывание»

    // Указываем фреймворку, что сцена готова и отправляем её на рендеринг
    var scene = createScene();
    

    #РукаЛицо, даже комментарии сами по себе абсурдны. Вы точно хотите рассказать нам что то новое и интересное? Или обучить новичков? Сами же их запутаете.

    Вот просто в пример последний, комментарий должен быть, типо: — Создаем и настраиваем сцену, присваиваем функцию по кадрового калбэка с отрисовкой сцены.

     // Масшабируем сцены под любые разрешения
                window.addEventListener("resize", function (){
                    engine.resize();
                })
    

    Не сцены, а viewport.