BabylonJS - Elementos Básicos
Babylon.js é uma estrutura popular para ajudar a construir jogos 3D para desenvolvedores. Possui funções integradas para implementar funcionalidades 3D. Vamos construir uma demonstração simples usando Babylon.js e entender as funcionalidades básicas necessárias para começar.
Vamos primeiro criar uma demonstração que contém os elementos básicos do Babylon.js. Além disso, também aprenderemos as várias funcionalidades do Babylon.js.
Amostra de demonstração 1
Nesta seção, aprenderemos como criar uma demonstração contendo os elementos básicos do 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>
Para executar o BabylonJS, precisamos de navegadores modernos com suporte WEBGL. Os navegadores mais recentes - Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, etc. tem suporte WEBGL e as demonstrações podem ser executadas nas mesmas plataformas para ver o resultado. Crie um diretório para armazenar os arquivos de babylonjs. Obtenha o arquivo BabylonJSscripts mais recente no site BabylonJS. Todos os links de demonstração neste tutorial são testados com babylonjs versão 3.3.
Passo 1
Crie uma página html simples e inclua o arquivo Babylon.js.
Crie uma tag de tela que é usada para renderizar o conteúdo por BabylonJS dentro da tag do corpo como mostrado abaixo.
Adicione css à tela para ocupar toda a largura e altura da tela.
<!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>Passo 2
Vamos agora começar com o BabylonJScode para renderizar o conteúdo na tela.
<!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>Agora, adicione a tag de script à estrutura html e armazene a referência da tela na variável canvas.
Para começar a usar Babylon.js, crie uma instância de mecanismo e passe a referência de tela para renderizar nela.
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>O objeto global BABYLON contém todas as funções Babylon.js disponíveis no mecanismo.
etapa 3
Nesta etapa, primeiro criaremos uma cena.
Uma cena é onde todo o conteúdo será exibido. Vamos criar os diferentes tipos de objetos e adicionar os mesmos à cena para torná-la visível na tela. Para criar a cena, adicione o seguinte código à estrutura html já criada. No momento, iremos anexar ao código já criado como uma continuação da estrutura html acima.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();O arquivo html final terá a seguinte aparência -
<!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>No exemplo acima, a função CreateScene é definida e var scene = createScene () está chamando a função.
A função CreateScene tem a cena criada dentro dela e a próxima linha adiciona cor à cena, o que é feito usando BABYLON.Color3 (1, 0.8, 0.8) e a cor aqui é rosa.
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);Executar o link de demonstração acima no navegador não exibirá nada agora na tela do navegador. Há mais uma etapa a ser adicionada ao código, chamada engine.runRenderLoop como na etapa 4.
Passo 4
Para tornar a cena realmente visível na tela, precisamos renderizá-la usando a chamada engine.runRenderLoop. Vamos agora ver como isso é feito.
Loop de renderização
engine.runRenderLoop(function() {
scene.render();
});A função Engine.runRenderLoop chama scene.render, que renderizará a cena e a tornará visível para o usuário. O .html final terá a seguinte aparência -
<!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>Salve o arquivo acima como basicscene.html e verifique a saída no navegador. A tela que é mostrada é na cor rosa, conforme mostrado abaixo -
Etapa 5
Agora que temos a cena, temos que adicionar uma câmera a ela.
Adicionando câmera e luz
O código fornecido a seguir adiciona uma câmera à cena. Existem muitos tipos de câmera que podem ser usados no Babylon.
ArcRotateCameraé uma câmera que gira em torno do alvo. Pode ser controlado com eventos de mouse, cursor ou toque. Os parâmetros necessários são nome, alfa, beta, raio, destino e cena. Vamos discutir os detalhes da câmera em uma seção subsequente.
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);Agora, precisamos entender como adicionar luz.
As luzes são usadas para produzir a cor difusa e especular recebida por cada pixel. Existem muitos tipos de luzes. Aprenderemos sobre os diferentes tipos de luzes na seção de luzes.
Aqui estou usando o PointLight na cena. O PointLight é emitido em todas as direções como theSun. Os parâmetros são nome, posição e cena a ser usada.
Para adicionar luz, execute o seguinte código -
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);Etapa 6
Vamos agora ver como adicionar formas.
Adicionando formas
A demonstração compartilhada acima tem 4 formas adicionadas a ela.
- Sphere
- Torus
- Box
- Cylinder
Para adicionar esfera, execute o seguinte código -
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);Depois que a esfera é adicionada, o código se parece com o seguinte -
<!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>Resultado
O código acima gera a seguinte saída -
Vamos agora adicionar as outras formas - o toro e a caixa. Execute o código a seguir para adicionar a forma Torus.
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);Vamos adicionar uma posição à caixa. BABYLON.Vector3 (-5, 0, 0) assume a direção x, y e z.
Após a execução, o código acima gera a seguinte saída -
Vamos agora adicionar a forma final que é mostrada na imagem acima - o cilindro.
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);A posição é adicionada ao cilindro que é a direção x 5. O código final é mostrado abaixo -
<!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>Resultado
Após a execução, o código acima irá gerar a seguinte saída -
As formas se moverão de acordo com a direção em que você mover o cursor; o mesmo é feito usando o controle de anexação da câmera à cena.
scene.activeCamera.attachControl(canvas);Vamos agora discutir cada forma em detalhes.
Aqui está o resumo de todas as formas e sintaxe -
| Sr. Não | Forma | Sintaxe |
|---|---|---|
| 1 | Caixa | |
| 2 | Esfera | |
| 3 | Avião | |
| 4 | Disco | |
| 5 | Cilindro | |
| 6 | Toro | |
| 7 | Nó | |
| 8 | Malha de linha | |
| 9 | Traços Linhas | |
| 10 | Fita | |
| 11 | Tubo | |
| 12 | Terra | |
| 13 | Ground From HeightMap | |
| 14 | Tiled Ground | |
Elemento básico - posição, rotação e escala
Nesta seção, aprenderemos como posicionar, girar ou dimensionar os elementos que adicionamos até agora.
Criamos caixa, esfera, cilindro, nó, etc. Agora, veremos como posicionar, dimensionar e girar as formas.
| Sr. Não. | Elemento e descrição |
|---|---|
| 1 | Posição Com a mudança de posição, a malha será alterada de uma posição para outra. |
| 2 | Rotação Com a rotação, a malha será girada em torno da malha. |
| 3 | Dimensionamento O dimensionamento da malha pode ser feito em relação aos eixos x, y ou z. |
Elemento Básico - Paternidade
Com Parenting, criaremos um relacionamento pai-filho entre as malhas e veremos como elas se comportam. Portanto, quaisquer transformações que você aplicar ao pai, o mesmo também será aplicado ao filho. Vamos agora entender o mesmo com a demonstração mostrada abaixo.
Demo
<!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>Resultado
Explicação
Criamos 3 caixas na malha acima. Na demonstração, o dimensionamento de boxb é aplicado e atribuído como um pai para boxc, que também é dimensionado desde seu boxb pai e o mesmo é dimensionado. Você pode brincar com a demonstração para ver como funciona o link pai-filho.
Para fazer uma malha, você deve usar o pai de outra malha -
child.parent = parentmesh;
Elemento Básico - Meio Ambiente
Vamos agora discutir o ambiente da cena nesta seção. Vamos falar sobre oscene background color, ambientcolor, skyboxes, fog mode, etc. em uma cena.
Nós vimos o scene background color is demos que criamos até agora.
Cor de fundo da cena
Vamos agora ver como funciona a cor de fundo da cena.
Sintaxe
A seguir está a sintaxe para a cor de fundo da cena -
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();A propriedade acima mudará a cor de fundo da cena.
Cor ambiente da cena
Vamos agora ver como funciona a cor ambiente da cena.
Sintaxe
A seguir está a sintaxe para a cor ambiente da cena -
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);AmbientColor é usado junto com o StandardMaterialcor ambiente e textura. Se não houver ambientColor para a cena, oStandardMaterial.ambientColor e StandardMaterial.ambientTexturenão tem efeito. O StandardMaterial ambientColor / ambientTexture ficará ativo assim que o ambientColor para a cena for aplicado. Por padrão, a cena é fornecidascene.ambientColor e definido para Color3 (0, 0, 0), o que significa que não há ambientColor.
Modo Scene Fog
Agora vamos entender como funciona o modo Scene Fog.
Sintaxe
A seguir está a sintaxe para o modo Scene Fog.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;A seguinte lista dos modos de névoa disponíveis -
BABYLON.Scene.FOGMODE_NONE - um padrão, a névoa está desativada.
BABYLON.Scene.FOGMODE_EXP - a densidade da névoa segue uma função exponencial.
BABYLON.Scene.FOGMODE_EXP2 - o mesmo que acima, mas mais rápido.
BABYLON.Scene.FOGMODE_LINEAR - a densidade da névoa segue uma função linear.
Se o modo de névoa EXP ou EXP2 for definido, você pode definir a densidade nele da seguinte forma -
scene.fogDensity = 0.01;Se o modo de névoa for LINEAR, você pode definir onde a névoa começa e termina da seguinte maneira -
scene.fogStart = 20.0;
scene.fogEnd = 60.0;Para dar cor à névoa, execute o seguinte código -
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);Skybox
Skybox é uma forma de criar um plano de fundo em jogos que torna a cena mais realista. É mais um invólucro em torno da tela, que cobre com a textura que está sendo usada para o material. Escolha suas imagens corretamente para torná-las realistas para a cena que você deseja criar. Para criar camarote, você deve criar uma caixa e aplicar material a ela. Discutiremos os diferentes materiais em detalhes em um capítulo subsequente.
Agora, veremos como criar um camarote usando caixa e material.
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);Vamos criar uma caixa de tamanho 100 para que cubra toda a cena. Começaremos dando material para a caixa, o que é feito da seguinte maneira -
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);A este material iremos atribuir as propriedades.
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);Temos que usar textura de reflexão, que é basicamente usada para criar um material semelhante a um espelho. A propriedade de textura de reflexão usa CubeTexture que leva a imagem como entrada. Como o cubo tem 6 faces, a imagem necessária para skybox deve ser 6, ou seja, internamente ela deve ser armazenada como skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. As imagens usadas para skybox são coladas abaixo; eles são faces do cubo em todos os seis lados. Quando você aplica uma textura à forma, ela fornece os detalhes da imagem usada e faz com que a cena pareça realista. Usamos o modo de coordenadas como SKYBOX_MODE conforme mostrado abaixo -
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;Existem outras propriedades usadas para materiais como backfaceCulling, diffuseColor, specularColor, disableLighting, etc. As propriedades são explicadas em detalhes na seção de materiais.
Na demonstração, mostraremos uma cena de ambiente criada usando skybox, uma esfera girando na cena e um avião se movendo. A névoa é aplicada à cena, que você notará quando girar.
Demonstração mostrando a cena do ambiente
<!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>Resultado
Explicação
No exemplo acima, usamos o seguinte código para névoa -
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 - Aqui, a densidade da névoa segue uma função exponencial.
scene.registerBeforeRender = Com isso, a densidade da névoa muda da seguinte forma -
var alpha = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
});O valor de alfa continua aumentando em 0,02 conforme vai em um loop como na função acima.
Aqui, adicionamos uma imagem sprite plana e mudamos sua posição com o scene.registerBeforeRender funcionar da seguinte forma -
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;
};sMudaremos o eixo x do plano e o redefiniremos quando atingir mais de 50.
Além disso, a esfera é girada ao longo do eixo y. Isso é mostrado no exemplo acima. O valor é alterado usando sphere.rotation.y.
A textura usada para esfera é - images/tshphere.jpg. As imagens são armazenadas em imagens / pasta localmente e também coladas abaixo para referência. Você pode baixar qualquer imagem de sua escolha e usar no link de demonstração.
Precisamos de seis imagens para um cubo. As imagens são armazenadas localmente em images / cubetexture / folder. Você pode baixar qualquer imagem de sua escolha, mas quando salvá-la salve-as como nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Observe que as imagens escolhidas devem estar em uma sequência para que o fundo pareça realista como o mostrado para o camarote.
As imagens usadas para fazer um camarote são as seguintes - images/cubetexture/skybox
skybox_nx
skybox_ny
skybox_nz
skybox_px
skybox_py
skybox_pz
