BabylonJS - Основные элементы
Babylon.js - популярный фреймворк, помогающий разработчикам создавать 3D-игры. Он имеет встроенные функции для реализации функций 3D. Давайте создадим простую демонстрацию с использованием Babylon.js и разберемся с основными функциями, необходимыми для начала работы.
Сначала мы создадим демонстрацию, содержащую основные элементы Babylon.js. Кроме того, мы также познакомимся с различными функциями Babylon.js.
Пример демонстрации 1
В этом разделе мы узнаем, как создать демонстрацию, содержащую основные элементы BabylonJS.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
Для запуска BabylonJS нам нужны современные браузеры с поддержкой WEBGL. Последние браузеры - Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+ и т. Д. Имеют поддержку WEBGL, и демонстрационные версии могут быть запущены на тех же платформах, чтобы увидеть результат. Создайте каталог для хранения файлов babylonjs. Загрузите последний файл BabylonJSscripts с сайта BabylonJS. Все демонстрационные ссылки в этом руководстве протестированы с помощью babylonjs версии 3.3.
Шаг 1
Создайте простую html-страницу и подключите файл Babylon.js.
Создайте тег холста, который используется BabylonJS для визуализации содержимого внутри тега body, как показано ниже.
Добавьте CSS на холст, чтобы он занимал всю ширину и высоту экрана.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
</body>
</html>Шаг 2
Давайте теперь начнем с кода BabylonJScode для рендеринга содержимого на холсте.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>
</body>
</html>Теперь добавьте тег скрипта в структуру html и сохраните ссылку на холст в переменной canvas.
Чтобы начать работу с Babylon.js, создайте экземпляр движка и передайте ссылку на холст для его рендеринга.
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>Глобальный объект BABYLON содержит все функции Babylon.js, доступные в движке.
Шаг 3
На этом этапе мы сначала создадим сцену.
Сцена - это место, где будет отображаться все содержимое. Мы создадим разные типы объектов и добавим их в сцену, чтобы сделать их видимыми на экране. Чтобы создать сцену, добавьте следующий код в уже созданную структуру html. В настоящее время мы добавим к уже созданному коду как продолжение вышеупомянутой структуры html.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();Окончательный файл html будет выглядеть следующим образом -
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
return scene;
};
var scene = createScene();
</script>
</body>
</html>В приведенном выше примере определена функция CreateScene, и функция var scene = createScene () вызывает ее.
Функция CreateScene создает сцену внутри нее, а следующая строка добавляет цвет к сцене, что делается с помощью BABYLON.Color3 (1, 0.8, 0.8), а цвет здесь розовый.
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);Выполнение указанной выше демонстрационной ссылки в браузере ничего не отобразит прямо сейчас на экране браузера. В код нужно добавить еще один шаг, который называется engine.runRenderLoop, как на шаге 4.
Шаг 4
Чтобы сцена действительно была видна на экране, нам нужно отрендерить ее с помощью вызова engine.runRenderLoop. Давайте теперь посмотрим, как это делается.
Цикл рендеринга
engine.runRenderLoop(function() {
scene.render();
});Функция Engine.runRenderLoop вызывает scene.render, который визуализирует сцену и делает ее видимой для пользователя. Окончательный .html будет выглядеть следующим образом -
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Сохраните указанный выше файл как basicscene.html и проверьте вывод в браузере. Показанный экран имеет розовый цвет, как показано ниже -
Шаг 5
Теперь, когда у нас есть сцена, нам нужно добавить к ней камеру.
Добавление камеры и света
Приведенный ниже код добавляет камеру в сцену. Есть много типов камер, которые можно использовать на Вавилоне.
ArcRotateCameraэто камера, которая вращается вокруг цели. Им можно управлять с помощью мыши, курсора или сенсорных событий. Необходимые параметры: имя, альфа, бета, радиус, цель и сцена. Давайте обсудим детали камеры в следующем разделе.
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);Теперь нам нужно понять, как добавить света.
Источники света используются для создания диффузного и зеркального цвета, получаемого каждым пикселем. Есть много типов огней. Мы узнаем о различных типах огней в разделе «Огни».
Здесь я использую PointLight на сцене. PointLight излучается во всех направлениях, как и солнце. Параметры - это имя, позиция и сцена, на которой будет использоваться.
Чтобы добавить свет, выполните следующий код -
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);Шаг 6
Давайте теперь посмотрим, как добавлять формы.
Добавление фигур
В демонстрацию, представленную выше, добавлены 4 формы.
- Sphere
- Torus
- Box
- Cylinder
Чтобы добавить сферу, выполните следующий код -
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);После добавления сферы код выглядит следующим образом:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
scene.activeCamera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Вывод
Приведенный выше код генерирует следующий вывод -
Давайте теперь добавим другие формы - Тор и Коробку. Выполните следующий код, чтобы добавить форму тора.
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);Мы добавим позицию в поле. BABYLON.Vector3 (-5, 0, 0) принимает направления x, y и z.
После выполнения приведенный выше код генерирует следующий вывод:
Давайте теперь добавим окончательную форму, показанную на скриншоте выше - цилиндр.
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);Положение добавляется к цилиндру, который имеет направление x 5. Окончательный код показан ниже -
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Вывод
После выполнения приведенный выше код сгенерирует следующий вывод:
Фигуры будут двигаться в соответствии с направлением, в котором вы перемещаете курсор; то же самое делается с помощью прикрепления управления камерой к сцене.
scene.activeCamera.attachControl(canvas);Давайте теперь обсудим каждую форму подробно.
Вот краткое изложение всех форм и синтаксиса -
| Старший Нет | Форма | Синтаксис |
|---|---|---|
| 1 | Коробка | |
| 2 | Сфера | |
| 3 | Самолет | |
| 4 | Диск | |
| 5 | Цилиндр | |
| 6 | Тор | |
| 7 | Морской узел | |
| 8 | Линия сетки | |
| 9 | Штриховые линии | |
| 10 | Лента | |
| 11 | Трубка | |
| 12 | Земля | |
| 13 | Земля с высотыКарта | |
| 14 | Плиточный грунт | |
Базовый элемент - положение, поворот и масштабирование
В этом разделе мы узнаем, как позиционировать, вращать или масштабировать элементы, которые мы добавили до сих пор.
Мы создали коробку, сферу, цилиндр, узел и т. Д. Теперь мы увидим, как позиционировать, масштабировать и вращать фигуры.
| Sr. No. | Элемент и описание |
|---|---|
| 1 | Должность При изменении положения сетка будет изменяться с одного положения на другое. |
| 2 | Вращение При вращении сетка будет вращаться вокруг нее. |
| 3 | Масштабирование Масштабирование сетки можно выполнять по осям x, y или z. |
Базовый элемент - воспитание детей
С помощью Parenting мы создадим отношения родитель-потомок между сетками и посмотрим, как они себя ведут. Итак, какие бы преобразования вы ни применили к родителю, то же самое будет применено и к потомку. Давайте теперь поймем то же самое с демонстрацией, показанной ниже.
Демо
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
boxa.position = new BABYLON.Vector3(0,0.5,0);
var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
boxb.position = new BABYLON.Vector3(3,0.5,0);
boxb.scaling = new BABYLON.Vector3(2,1,2);
var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
boxc.parent = boxb;
boxc.position.z = -3;
var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
ground.position = new BABYLON.Vector3(0,0,0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Вывод
Объяснение
Мы создали 3 блока в сетке выше. В демонстрации применяется масштабирование boxb, и оно назначается в качестве родительского для boxc, которое также масштабируется, поскольку масштабируется его родительский boxb и тот же. Вы можете поиграть с демонстрацией, чтобы увидеть, как работает связь родитель-потомок.
Чтобы создать сетку, вы должны использовать родительский элемент другой сетки -
child.parent = parentmesh;
Базовый элемент - окружающая среда
Давайте теперь обсудим среду сцены в этом разделе. Мы поговорим оscene background color, ambientcolor, skyboxes, fog modeи др. на месте происшествия.
Мы видели scene background color is demos которые мы создали до сих пор.
Цвет фона сцены
Давайте теперь посмотрим, как работает цвет фона сцены.
Синтаксис
Ниже приведен синтаксис цвета фона сцены -
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();Указанное выше свойство изменит цвет фона сцены.
Цвет окружения сцены
Давайте теперь посмотрим, как работает окружающий цвет сцены.
Синтаксис
Ниже приведен синтаксис окружающего цвета сцены:
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);AmbientColor используется вместе с StandardMaterialокружающий цвет и текстура. Если для сцены нет ambientColor,StandardMaterial.ambientColor и StandardMaterial.ambientTextureне имеет никакого эффекта. StandardMaterial ambientColor / ambientTexture станет активным после применения ambientColor для сцены. По умолчанию сцена даетсяscene.ambientColor и установить на Color3 (0, 0, 0), что означает отсутствие ambientColor.
Режим сцены тумана
Теперь мы поймем, как работает режим Scene Fog.
Синтаксис
Ниже приводится синтаксис режима тумана сцены.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;Следующий список доступных режимов тумана -
BABYLON.Scene.FOGMODE_NONE - по умолчанию, туман отключен.
BABYLON.Scene.FOGMODE_EXP - плотность тумана следует экспоненциальной функции.
BABYLON.Scene.FOGMODE_EXP2 - то же, что и выше, но быстрее.
BABYLON.Scene.FOGMODE_LINEAR - плотность тумана линейно зависит.
Если задан режим тумана EXP или EXP2, то вы можете определить его плотность следующим образом:
scene.fogDensity = 0.01;Если режим тумана ЛИНЕЙНЫЙ, вы можете определить, где туман начинается и заканчивается следующим образом:
scene.fogStart = 20.0;
scene.fogEnd = 60.0;Чтобы придать цвет туману, выполните следующий код -
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);Skybox
Skybox - это способ создания фона в играх, который делает сцену реалистичной. Это больше похоже на обертку экрана, которая покрывает текстуру, используемую для материала. Правильно выбирайте изображения, чтобы они выглядели реалистично для сцены, которую вы хотите создать. Чтобы создать скайбокс, вам нужно создать коробку и применить к ней материал. Мы подробно обсудим различные материалы в следующей главе.
Теперь мы увидим, как создать скайбокс, используя бокс и материал.
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);Мы создадим коробку размером 100, чтобы она покрывала всю сцену. Мы начнем с подачи материала в коробку, что делается следующим образом:
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);Этому материалу мы присвоим свойства.
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);Мы должны использовать текстуру отражения, которая в основном используется для создания зеркального материала. Свойство текстуры отражения использует CubeTexture, который принимает изображение в качестве входных данных. Поскольку куб имеет 6 граней, изображение, необходимое для скайбокса, должно быть 6, т.е. внутри оно должно храниться как skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Изображения, использованные для скайбокса, вставлены ниже; это грани куба со всех шести сторон. Когда вы применяете текстуру к форме, она дает детали используемого изображения и делает сцену реалистичной. Мы использовали режим координат как SKYBOX_MODE, как показано ниже -
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;Существуют и другие свойства, используемые для материала, такие как backfaceCulling, diffuseColor, specularColor, disableLighting и т. Д. Свойства подробно описаны в разделе материалов.
В демонстрации мы покажем сцену окружения, созданную с помощью скайбокса, сферу, вращающуюся в сцене, и плоскость, движущуюся вокруг. На сцену нанесен туман, который вы заметите при повороте.
Демо, показывающее сцену окружающей среды
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni",
new BABYLON.Vector3(10, 50, 50), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
camera.attachControl(canvas, true);
var material1 = new BABYLON.StandardMaterial("mat1", scene);
material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);
var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
sphere.material = material1;
// Fog
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;
//skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
plane.position.x = -2;
plane.position.y = 2;
plane.position.z = 0;
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Вывод
Объяснение
В приведенном выше примере мы использовали следующий код для тумана -
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;scene.fogMode = BABYLON.Scene.FOGMODE_EXP - Здесь плотность тумана следует экспоненциальной функции.
scene.registerBeforeRender = При этом плотность тумана изменяется следующим образом -
var alpha = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
});Значение альфа продолжает увеличиваться на 0,02 по мере зацикливания, как в приведенной выше функции.
Здесь мы добавили изображение спрайта плоскости и изменили его положение с помощью scene.registerBeforeRender функционируют следующим образом -
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};sМы изменим ось x плоскости и сбросим ее, когда она станет больше 50.
Также сфера вращается по оси y. Это показано в примере выше. Значение изменяется с помощью Sphere.rotation.y.
Текстура, используемая для сферы, - images/tshphere.jpg. Изображения хранятся в папке images / локально, а также вставляются ниже для справки. Вы можете скачать любое изображение на ваш выбор и использовать в демо-ссылке.
Нам понадобится шесть изображений для куба. Изображения хранятся локально в папке images / cubetexture /. Вы можете загрузить любое изображение по вашему выбору, но при сохранении сохраните их как nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Обратите внимание, что выбранные изображения должны располагаться в такой последовательности, чтобы фон выглядел реалистично, как показано для скайбокса.
Изображения, используемые для создания скайбокса, следующие: images/cubetexture/skybox
skybox_nx
skybox_ny
skybox_nz
skybox_px
skybox_py
skybox_pz
