BabylonJS - Elementos básicos
Babylon.js es un marco popular para ayudar a crear juegos 3D para desarrolladores. Tiene funciones integradas para implementar funcionalidades 3D. Creemos una demostración simple con Babylon.js y comprendamos las funcionalidades básicas necesarias para comenzar.
Primero crearemos una demostración que contiene los elementos básicos de Babylon.js. Además, también aprenderemos las diversas funcionalidades de Babylon.js.
Muestra de demostración 1
En esta sección, aprenderemos cómo crear una demostración que contenga los elementos básicos de 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 ejecutar BabylonJS, necesitamos navegadores modernos con soporte WEBGL. Los navegadores más recientes (Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, etc.) tienen soporte WEBGL y las demostraciones se pueden ejecutar en las mismas plataformas para ver el resultado. Cree un directorio para almacenar los archivos de babylonjs. Obtenga el último archivo de BabylonJSscripts del sitio de BabylonJS. Todos los enlaces de demostración de este tutorial se probaron con la versión 3.3 de babylonjs.
Paso 1
Cree una página html simple e incluya el archivo Babylon.js.
Cree una etiqueta de lienzo que BabylonJS utilice para representar el contenido dentro de la etiqueta del cuerpo como se muestra a continuación.
Agregue CSS al lienzo para ocupar todo el ancho y alto de la pantalla.
<!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>Paso 2
Comencemos ahora con BabylonJScode para representar contenido en el lienzo.
<!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>Ahora, agregue la etiqueta del script a la estructura html y almacene la referencia del lienzo en el lienzo variable.
Para comenzar con Babylon.js, cree una instancia de motor y pase la referencia del lienzo para renderizarla.
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>El objeto global BABYLON contiene todas las funciones de Babylon.js disponibles en el motor.
Paso 3
En este paso, primero crearemos una escena.
Una escena es donde se mostrarán todos los contenidos. Crearemos los diferentes tipos de objetos y agregaremos los mismos a la escena para que sea visible en la pantalla. Para crear una escena, agregue el siguiente código a la estructura html ya creada. En la actualidad, lo agregaremos al código ya creado como una continuación de la estructura html anterior.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();El archivo html final se verá de la siguiente manera:
<!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>En el ejemplo anterior, la función CreateScene está definida y var scene = createScene () está llamando a la función.
La función CreateScene tiene la escena creada dentro de ella y la siguiente línea agrega color a la escena, lo cual se hace usando BABYLON.Color3 (1, 0.8, 0.8) y el color aquí es rosa.
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);La ejecución del enlace de demostración anterior en el navegador no mostrará nada en este momento en la pantalla del navegador. Hay un paso más para agregar al código que se llama engine.runRenderLoop como en el paso 4.
Etapa 4
Para que la escena sea realmente visible en la pantalla, necesitamos renderizarla usando la llamada engine.runRenderLoop. Veamos ahora cómo se hace esto.
Bucle de renderizado
engine.runRenderLoop(function() {
scene.render();
});La función Engine.runRenderLoop llama a scene.render, que renderizará la escena y la hará visible para el usuario. El .html final tendrá el siguiente aspecto:
<!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>Guarde el archivo anterior como basicscene.html y verifique el resultado en el navegador. La pantalla que se muestra es de color rosa como se muestra a continuación:
Paso 5
Ahora que tenemos la escena, tenemos que agregarle cámara.
Agregar cámara y luz
El código que se proporciona a continuación agrega cámara a la escena. Hay muchos tipos de cámaras que se pueden usar en Babylon.
ArcRotateCameraes una cámara que gira alrededor del objetivo. Se puede controlar con eventos de mouse, cursor o táctil. Los parámetros requeridos son nombre, alfa, beta, radio, objetivo y escena. Analicemos los detalles de la cámara en una sección posterior.
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);Ahora, necesitamos entender cómo agregar luz.
Las luces se utilizan para producir el color difuso y especular que recibe cada píxel. Hay muchos tipos de luces. Conoceremos los diferentes tipos de luces en la sección de luces.
Aquí estoy usando PointLight en la escena. PointLight se emite en todas direcciones como el sol. Los parámetros son el nombre, la posición y la escena que se utilizará.
Para agregar luz, ejecute el siguiente código:
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);Paso 6
Veamos ahora cómo agregar formas.
Adición de formas
La demostración compartida arriba tiene 4 formas agregadas.
- Sphere
- Torus
- Box
- Cylinder
Para agregar esfera, ejecute el siguiente código:
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);Una vez que se agrega la esfera, el código se ve de la siguiente manera:
<!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>Salida
El código anterior genera la siguiente salida:
Agreguemos ahora las otras formas: el toro y la caja. Ejecute el siguiente código para agregar la 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);Agregaremos una posición a la caja. BABILONIA.Vector3 (-5, 0, 0) toma las direcciones x, y y z.
Tras la ejecución, el código anterior genera la siguiente salida:
Agreguemos ahora la forma final que se muestra en la captura de pantalla anterior: el cilindro.
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);La posición se agrega al cilindro que es la dirección x 5. El código final es como se muestra a continuación:
<!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>Salida
Tras la ejecución, el código anterior generará la siguiente salida:
Las formas se moverán según la dirección en la que mueva el cursor; lo mismo se hace usando el control adjunto de la cámara a la escena.
scene.activeCamera.attachControl(canvas);Analicemos ahora cada forma en detalle.
Aquí está el resumen de todas las formas y la sintaxis:
| No Señor | Forma | Sintaxis |
|---|---|---|
| 1 | Caja | |
| 2 | Esfera | |
| 3 | Avión | |
| 4 | Dto | |
| 5 | Cilindro | |
| 6 | Toro | |
| 7 | Nudo | |
| 8 | Línea de malla | |
| 9 | Líneas de guiones | |
| 10 | Cinta | |
| 11 | Tubo | |
| 12 | Suelo | |
| 13 | Tierra desde alturaMapa | |
| 14 | Suelo de baldosas | |
Elemento básico: posición, rotación y escala
En esta sección aprenderemos a posicionar, rotar o escalar los elementos que añadimos hasta ahora.
Hemos creado caja, esfera, cilindro, nudo, etc. Ahora veremos cómo posicionar, escalar y rotar las formas.
| No Señor. | Elemento y descripción |
|---|---|
| 1 | Posición Con el cambio de posición, la malla cambiará de una posición a otra. |
| 2 | Rotación Con la rotación, la malla girará alrededor de la malla. |
| 3 | Escalada La escala de la malla se puede hacer con respecto a los ejes x, yoz. |
Elemento básico: crianza de los hijos
Con Parenting, crearemos una relación padre-hijo entre las mallas y veremos cómo se comportan. Entonces, cualesquiera que sean las transformaciones que aplique al padre, lo mismo también se aplicará al hijo. Ahora entendamos lo mismo con la demostración que se muestra a continuación.
Manifestación
<!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>Salida
Explicación
Hemos creado 3 cajas en la malla anterior. En la demostración, se aplica la escala de boxb y se asigna como padre a boxc, que también escala desde su caja principalb y el mismo se escala. Puede jugar con la demostración para ver cómo funciona el vínculo entre padres e hijos.
Para hacer una malla, debes usar el padre de otra malla -
child.parent = parentmesh;
Elemento básico - Medio ambiente
Analicemos ahora el entorno de la escena en esta sección. Hablaremos delscene background color, ambientcolor, skyboxes, fog mode, etc. en una escena.
Hemos visto el scene background color is demos que hemos creado hasta ahora.
Color de fondo de la escena
Veamos ahora cómo funciona el color de fondo de la escena.
Sintaxis
A continuación se muestra la sintaxis del color de fondo de la escena:
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();La propiedad anterior cambiará el color de fondo de la escena.
Escena Color ambiental
Veamos ahora cómo funciona el color ambiental de la escena.
Sintaxis
A continuación se muestra la sintaxis del color ambiental de la escena:
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);AmbientColor se utiliza junto con StandardMaterialcolor y textura ambiental. Si no hay color ambiental para la escena,StandardMaterial.ambientColor y StandardMaterial.ambientTextureno tiene efecto. El ambientColor / ambientTexture del material estándar se activará una vez que se aplique el ambientColor para la escena. Por defecto, la escena se dascene.ambientColor y establecer en Color3 (0, 0, 0), lo que significa que no hay ambientColor.
Modo de escena de niebla
Ahora entenderemos cómo funciona el modo Scene Fog.
Sintaxis
A continuación se muestra la sintaxis del modo Scene Fog.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;La siguiente lista de los modos de niebla disponibles:
BABYLON.Scene.FOGMODE_NONE - predeterminado, la niebla está desactivada.
BABYLON.Scene.FOGMODE_EXP - la densidad de la niebla sigue una función exponencial.
BABYLON.Scene.FOGMODE_EXP2 - igual que el anterior pero más rápido.
BABYLON.Scene.FOGMODE_LINEAR - la densidad de la niebla sigue una función lineal.
Si se define el modo de niebla EXP o EXP2, puede definir la densidad en él de la siguiente manera:
scene.fogDensity = 0.01;Si el modo de niebla es LINEAR, puede definir dónde comienza y termina la niebla de la siguiente manera:
scene.fogStart = 20.0;
scene.fogEnd = 60.0;Para darle color a la niebla, ejecuta el siguiente código -
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);Skybox
Skybox es una forma de crear un fondo en los juegos que hace que la escena parezca realista. Es más una envoltura alrededor de su pantalla que cubre con la textura que se usa para el material. Elija sus imágenes correctamente para que parezcan realistas para la escena que desea crear. Para crear skybox, tienes que crear una caja y aplicarle material. Discutiremos los diferentes materiales en detalle en un capítulo posterior.
Ahora, veremos cómo crear un skybox usando caja y material.
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);Crearemos una caja de tamaño 100 para que cubra toda la escena. Comenzaremos dando material a la caja que se hace de la siguiente manera:
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);A este material le asignaremos las propiedades.
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);Tenemos que usar una textura de reflexión que se usa básicamente para crear un material similar a un espejo. La propiedad de textura de reflexión usa CubeTexture que toma la imagen como entrada. Dado que el cubo tiene 6 caras, la imagen requerida para skybox debe ser 6, es decir, internamente debe almacenarse como skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Las imágenes utilizadas para skybox se pegan a continuación; son caras del cubo en los seis lados. Cuando aplica una textura a la forma, da los detalles de la imagen utilizada y hace que la escena parezca realista. Hicimos uso del modo de coordenadas como SKYBOX_MODE como se muestra a continuación:
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;Hay otras propiedades que se utilizan para el material como backfaceCulling, diffuseColor, specularColor, disableLighting, etc. Las propiedades se explican en detalle en la sección de material.
En la demostración, mostraremos una escena de entorno creada usando skybox, una esfera que gira en la escena y un avión que se mueve. Se aplica niebla a la escena, que notará cuando gire.
Demostración que muestra la escena del entorno
<!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>Salida
Explicación
En el ejemplo anterior, usamos el siguiente código para la niebla:
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 - Aquí, la densidad de la niebla sigue una función exponencial.
scene.registerBeforeRender = Con esto, la densidad de la niebla cambia de la siguiente manera:
var alpha = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
});El valor de alfa sigue aumentando en 0,02 a medida que avanza en un bucle como en la función anterior.
Aquí, hemos agregado una imagen de sprite plano y cambiamos su posición con el scene.registerBeforeRender funciona de la siguiente manera:
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;
};sCambiaremos el eje x del plano y lo reiniciaremos cuando llegue a más de 50.
Además, la esfera se gira a lo largo del eje y. Esto se muestra en el ejemplo de arriba. El valor se cambia usando esfera.rotación.y.
La textura utilizada para la esfera es: images/tshphere.jpg. Las imágenes se almacenan en imágenes / carpeta localmente y también se pegan a continuación como referencia. Puede descargar cualquier imagen de su elección y utilizarla en el enlace de demostración.
Necesitamos seis imágenes para un cubo. Las imágenes se almacenan localmente en la carpeta images / cubetexture /. Puede descargar cualquier imagen de su elección, pero cuando la guarde, guárdelas como nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Tenga en cuenta que las imágenes elegidas deben estar en una secuencia para que el fondo se vea realista como el que se muestra para el skybox.
Las imágenes utilizadas para hacer un palco son las siguientes: images/cubetexture/skybox
skybox_nx
skybox_ny
skybox_nz
skybox_px
skybox_py
skybox_pz
