Bienvenid@!
Estás en la sección donde aprenderás lo necesario para desarrollar interfaces 2D y 3D en XUEngine Studio.
XUEngine Studio
Registro de usuario
Un "Hola Mundo!" en XUEngine Studio
Manual de Usuario - XUEmptyObject de XUEngine Studio
Índice
1. Introducción
XUEmptyObject es una clase que extiende de
THREE.Object3D
y sirve como un “contenedor vacío” dentro de la escena 3D de XUEngine Studio.
Puedes usarlo simplemente para agrupar otros objetos 3D o para
cargar modelos FBX, asignándolos como hijos de este contenedor.
Al instanciar XUEmptyObject
, se añade automáticamente a una
escena (scene
) y a un arreglo global (objects
)
para su fácil administración junto a otras entidades 3D.
Soporta propiedades como name
, position
,
rotation
, scale
, y fbxUrl
para
cargar modelos de forma asíncrona.
2. Propiedades principales
scene
: Referencia a la escena donde se añade este objeto.objects
: Array global donde se registran las entidades 3D.name
: Nombre del objeto (string), por defecto"XUEmptyObject"
.position
: Array de 3 valores[x, y, z]
(ej.[0,0,0]
). Se asigna athis.position
del Object3D.rotation
: Array de 3 valores[x, y, z]
en radianes (ej.[0, 0, 0]
). Se asigna athis.rotation
del Object3D.scale
: Array de 3 valores[x, y, z]
para la escala (ej.[1,1,1]
). Se asigna athis.scale
.fbxUrl
: Cadena que indica la ruta de un modelo FBX a cargar (opcional). Si se proporciona, se llama aloadFBX(fbxUrl)
en el constructor.
3. Métodos principales
3.1 loadFBXParsed(parsedObject)
Recibe un THREE.Object3D
ya parseado (por ejemplo, el resultado
de una carga manual de FBX) y lo agrega como hijo de este
XUEmptyObject
. Ajusta la escala a (1,1,1)
por
defecto.
Parámetros:
parsedObject
: Una instancia deTHREE.Object3D
(FBX parseado).
Ejemplo:
// Si obtuviste un FBX con parseFBX
const parsedObj = await parseFBX("Assets/Modelos/Robot.fbx");
const emptyObj = new XUEmptyObject(scene, objects, {...});
emptyObj.loadFBXParsed(parsedObj);
3.2 loadFBX(url)
Llama internamente a un FBXLoader
y, al terminar la carga,
agrega el modelo como hijo de este XUEmptyObject
.
Parámetros:
url
: Ruta o URL del archivo FBX a cargar (string).
Ejemplo:
const emptyObj = new XUEmptyObject(scene, objects, {
fbxUrl: "Assets/Prefabs/Cubo01.fbx"
});
// O también:
emptyObj.loadFBX("Assets/Prefabs/OtroModelo.fbx");
3.3 setPosition(x, y, z)
Ajusta la posición en la escena. Internamente llama a
this.position.set(...)
de THREE.Object3D
.
Ejemplo:
emptyObj.setPosition(2, 1, -3);
3.4 setRotation(x, y, z)
Ajusta la rotación en radianes alrededor de los ejes X
,
Y
y Z
.
Ejemplo:
// Rotar 45° en Y
emptyObj.setRotation(0, Math.PI/4, 0);
3.5 setScale(x, y, z)
Ajusta la escala del objeto. Todos los hijos del XUEmptyObject
se verán afectados.
Ejemplo:
// Duplicar su tamaño en cada eje
emptyObj.setScale(2, 2, 2);
3.6 getPosition()
Devuelve la posición actual como un THREE.Vector3
clon.
Ejemplo:
const pos = emptyObj.getPosition();
XUConsole(pos.x, pos.y, pos.z);
3.7 getRotation()
Devuelve la rotación actual como un THREE.Euler
clon.
Los valores de x, y, z
están en radianes.
Ejemplo:
const rot = emptyObj.getRotation();
XUConsole(rot.x, rot.y, rot.z);
3.8 getScale()
Devuelve la escala actual como un THREE.Vector3
clon.
Ejemplo:
const scl = emptyObj.getScale();
XUConsole(scl.x, scl.y, scl.z);
4. Ejemplos completos
4.1 Creación de un XUEmptyObject
con FBX
// Suponiendo que:
// - 'scene' es un THREE.Scene o un mock
// - 'objects' es un array global de entidades
const emptyObj = new XUEmptyObject(scene, objects, {
name: "NodoFBX",
position: [0, 0, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1],
fbxUrl: "Assets/Modelos/Silla.fbx"
});
// Se cargará "Silla.fbx" y se agregará como hijo internamente.
// Podemos luego moverla o escalarla:
emptyObj.setPosition(2, 0, -1);
emptyObj.setScale(1.5, 1.5, 1.5);
4.2 Carga manual de un FBX parseado y manipulación
async function ejemploFBXParsed() {
// parseFBX => función hipotética que retorna un THREE.Object3D
const parsed = await parseFBX("Assets/Prefabs/Caja.fbx");
const emptyContenedor = new XUEmptyObject(scene, objects, {
name: "CajaFbx",
position: [0, 3, 0]
});
// Agregar la malla parseada
emptyContenedor.loadFBXParsed(parsed);
// Rotar 90° en Y
emptyContenedor.setRotation(0, Math.PI / 2, 0);
// Consultar su rotación
const rot = emptyContenedor.getRotation();
XUConsole("Rotación actual:", rot);
}
ejemploFBXParsed();
Fin de la sección
Manual de Usuario - UIManager de XUEngine Studio
Índice
1. Introducción
UIManager es una librería en JavaScript que permite crear y manipular widgets de manera dinámica en un contenedor HTML, inspirada en conceptos de layouts y widgets de Android o SwiftUI.
2. Métodos principales de la clase UIManager
2.1 addWidget(id, options)
Crea un nuevo widget dentro del contenedor principal o dentro de otro widget padre. Retorna el elemento HTML creado.
Parámetros:
id
: Identificador único (string) para tu widget.options
: Objeto con múltiples propiedades de configuración.
Ejemplo básico:
// Crear un panel con fondo gris y texto
UIManager.addWidget('miPanel', {
widgetType: 'panel',
layout_width: '200px',
layout_height: '100px',
backgroundColor: '#ccc',
text: 'Soy un panel simple'
});
Para ver todas las propiedades disponibles, revisa la sección de tipos de widget y la documentación de options.
2.2 updateWidget(id, newOptions)
Actualiza dinámicamente las propiedades de un widget existente.
Ejemplo:
// Cambiar el color de fondo y el texto de un panel existente
UIManager.updateWidget('miPanel', {
backgroundColor: 'lightblue',
text: 'Nuevo texto en mi panel'
});
2.3 removeWidget(id)
Elimina el widget (y todos sus hijos) dado su id
.
Ejemplo:
// Remover un widget llamado 'miPanel'
UIManager.removeWidget('miPanel');
2.4 getWidgetProperty(id, prop)
Retorna el valor actual de la propiedad prop
en el widget
con id
dado.
Ejemplo:
// Obtener el 'text' de un panel
const texto = UIManager.getWidgetProperty('miPanel', 'text');
XUConsole(texto);
3. Tipos de Widget disponibles
Al llamar a addWidget
, puedes especificar el tipo de widget con
la propiedad
widgetType
. Cada tipo tiene sus propiedades específicas y
comportamiento.
3.1 panel
Un contenedor genérico que soporta flex layout. Puede tener hijos (otros widgets).
Propiedades principales:
layout_width
,layout_height
: Tamaño (ej."100px"
o"100%"
).backgroundColor
: Color de fondo (ej."#ccc"
).orientation
:"horizontal"
o"vertical"
.layout_gravity
: Alineación interna (ej.["center", "top"]
).text
: Texto interno dentro del panel (se crea un<span>
hijo).children
: Array de objetosoptions
para crear widgets hijos.
Ejemplo:
// Panel padre
UIManager.addWidget('contenedor', {
widgetType: 'panel',
layout_width: '300px',
layout_height: '200px',
backgroundColor: '#fafafa',
orientation: 'vertical',
layout_gravity: ['center','center'], // alineación interna
children: [
{
id: 'subPanel',
widgetType: 'panel',
layout_width: '80%',
layout_height: '50px',
backgroundColor: '#ddd',
text: 'Soy un subPanel'
}
]
});
3.3 image
Muestra una imagen (<img>
).
Propiedades principales:
imageSrc
: URL de la imagen.altText
: Texto alternativo.layout_width
,layout_height
: Dimensiones.
Ejemplo:
UIManager.addWidget('logo', {
widgetType: 'image',
imageSrc: 'https://mi-servidor.com/logo.png',
altText: 'Logo de la empresa',
layout_width: '150px'
});
3.4 text
Muestra un texto (<span>
). Es útil cuando no se desea
un panel
.
Propiedades principales:
text
: Texto a mostrar (sihtmlContent
no está definido).color
,fontSize
, etc.: Estilos de fuente.
Ejemplo:
UIManager.addWidget('textoEjemplo', {
widgetType: 'text',
text: 'Hola mundo',
color: '#333',
fontSize: '18px'
});
3.5 combobox / picker
Crea un <select>
con opciones.
Propiedades principales:
options
: Array de strings u objetos{ label, value }
.selectedValue
: Valor que se seleccionará por defecto.onChange
: Función que se llama al cambiar la selección.
Ejemplo:
UIManager.addWidget('miCombo', {
widgetType: 'combobox',
options: ['Opción 1', 'Opción 2', 'Opción 3'],
selectedValue: 'Opción 2',
onChange: function(e) {
XUConsole('Nuevo valor:', e.target.value);
}
});
3.6 spinner
Crea un <input type="number">
.
Propiedades principales:
value
: Valor inicial numérico.min
,max
,step
: Restricciones y paso.onChange
: Evento que se dispara al cambiar el valor.
Ejemplo:
UIManager.addWidget('miSpinner', {
widgetType: 'spinner',
value: 10,
min: 0,
max: 100,
step: 5,
onChange: function(e) {
XUConsole('Nuevo valor del spinner:', e.target.value);
}
});
3.7 edittext / textfield
Crea un <input type="text">
para texto.
Propiedades principales:
text
: Texto inicial.onTextChanged
: Evento que se dispara en cada cambio (input).onFocus
,onBlur
: Eventos de foco.
Ejemplo:
UIManager.addWidget('miTexto', {
widgetType: 'edittext',
text: 'Texto inicial',
onTextChanged: function(e) {
XUConsole('Texto actual:', e.target.value);
}
});
3.8 checkbox
Crea un <input type="checkbox">
.
Propiedades principales:
checked
: Estado inicial (booleano).onChange
: Evento al cambiar el estado.
Ejemplo:
UIManager.addWidget('miCheck', {
widgetType: 'checkbox',
checked: true,
onChange: function(e) {
XUConsole('Checkbox:', e.target.checked);
}
});
3.10 switch / toggle
Crea un <input type="checkbox">
con clase
.xuswitch
(para estilos de switch).
Propiedades principales:
checked
: Estado inicial.onChange
: Evento al cambiar.
Ejemplo:
UIManager.addWidget('miSwitch', {
widgetType: 'switch',
checked: false,
onChange: function(e) {
XUConsole('Switch:', e.target.checked);
}
});
3.11 progressbar
Crea un <progress>
HTML.
Propiedades principales:
max
: Valor máximo.value
: Valor actual.
Ejemplo:
UIManager.addWidget('miBarra', {
widgetType: 'progressbar',
max: 100,
value: 30
});
3.12 slider
Crea un <input type="range">
para seleccionar un
valor entre un rango.
Propiedades principales:
min
,max
,step
,value
: Configuración del rango.onChange
: Evento que se dispara al mover el deslizador.
Ejemplo:
UIManager.addWidget('miSlider', {
widgetType: 'slider',
min: 0,
max: 10,
step: 1,
value: 5,
onChange: function(e) {
XUConsole('Slider:', e.target.value);
}
});
3.13 googlemap
Crea un <div>
que mostrará un mapa de Google.
Requiere la carga previa de la API
de Google Maps.
Propiedades principales:
center
: Objeto{lat, lng}
para la posición inicial.zoom
: Nivel de zoom.mapTypeId
: Tipo de mapa (por ejemplogoogle.maps.MapTypeId.ROADMAP
).debug
: Muestra warnings si la API no está cargada.
Ejemplo:
UIManager.addWidget('miMapa', {
widgetType: 'googlemap',
layout_width: '600px',
layout_height: '400px',
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
debug: true
});
3.14 modal
Crea un <div>
que se superpone a la pantalla, con un
fondo semitransparente y contenido
centrado.
Propiedades principales:
visible
: Booleano que indica si el modal está visible.overlayColor
: Color de fondo del overlay (por defectorgba(0, 0, 0, 0.5)
).htmlContent
otext
: Contenido interno del modal.layout_width
,layout_height
: Tamaño del overlay (por defecto 100% de la pantalla).
Ejemplo:
// Crear un modal inicialmente oculto
UIManager.addWidget('miModal', {
widgetType: 'modal',
visible: false,
text: 'Este es un mensaje en el modal',
contentPadding: '30px',
contentBorderRadius: '10px'
});
// Mostrar el modal en otro momento
UIManager.updateWidget('miModal', { visible: true });
3.15 calendar / datepicker
Crea un calendario simple basado en una tabla HTML. Permite navegar entre meses.
Propiedades principales:
year
,month
: Año y mes inicial (numérico, mes 0-indexado).highlightDays
: Array de días a resaltar.highlightColor
: Color de resaltado.
Ejemplo:
UIManager.addWidget('miCalendario', {
widgetType: 'calendar',
layout_width: '400px',
layout_height: '300px',
year: 2025,
month: 0, // Enero
highlightDays: [1, 15],
highlightColor: 'lightgreen'
});
3.16 video
Crea un reproductor de video. Si la URL es de YouTube
(youtube.com
), se usa un
<iframe>
; en caso contrario, se usa un
<video>
.
Propiedades principales:
src
: URL del video (YouTube o archivo mp4, etc.).controls
,autoplay
,loop
: Controlan la reproducción.
Ejemplo:
// Video de YouTube
UIManager.addWidget('videoYouTube', {
widgetType: 'video',
src: 'https://www.youtube.com/watch?v=XXXXX'
});
// Video local
UIManager.addWidget('videoLocal', {
widgetType: 'video',
src: 'videos/demo.mp4',
controls: true,
autoplay: false
});
4. Ejemplos completos
4.1 Ejemplo - Creación de varios widgets en un panel
UIManager.addWidget('mainPanel', {
widgetType: 'panel',
layout_width: '100%',
layout_height: '100%',
orientation: 'vertical',
layout_gravity: ['center','center'],
backgroundColor: '#f0f0f0',
children: [
{
id: 'titulo',
widgetType: 'text',
text: 'Bienvenido a mi App',
fontSize: '24px',
color: '#333',
margin: '10px'
},
{
id: 'botonSaludo',
widgetType: 'button',
text: 'Saludar',
onClick: function() {
alert('Hola desde UIManager!');
},
margin: '10px'
},
{
id: 'imagenEjemplo',
widgetType: 'image',
imageSrc: 'https://via.placeholder.com/150',
margin: '10px'
},
{
id: 'miSwitch',
widgetType: 'switch',
checked: false,
onChange: function(e) {
XUConsole('Switch ahora:', e.target.checked);
},
margin: '10px'
}
]
});
4.2 Ejemplo - Uso de updateWidget
para cambiar propiedades
// Cambiar la imagen de 'imagenEjemplo' y el texto del 'titulo'
UIManager.updateWidget('imagenEjemplo', {
imageSrc: 'https://via.placeholder.com/300'
});
UIManager.updateWidget('titulo', {
text: 'Nuevo título'
});
// Ocultar el switch
UIManager.updateWidget('miSwitch', { visibility: false });
4.3 Ejemplo - Calendario y modal
// Crear un calendario
UIManager.addWidget('calendarioPrincipal', {
widgetType: 'calendar',
layout_width: '400px',
layout_height: '300px',
highlightDays: [10, 20],
highlightColor: 'yellow'
});
// Crear un modal (inicialmente oculto)
UIManager.addWidget('modalInfo', {
widgetType: 'modal',
visible: false,
text: 'Información importante',
contentPadding: '20px'
});
// Mostrar el modal al hacer clic en un botón
UIManager.addWidget('mostrarModalBtn', {
widgetType: 'button',
text: 'Mostrar Modal',
onClick: function() {
UIManager.updateWidget('modalInfo', { visible: true });
}
});
Fin de la sección
Manual de Usuario - XUCube de XUEngine Studio
Índice
1. Introducción
XUCube es una clase enfocada en la creación y administración de cubos dentro de XUEngine Studio. Puedes configurar sus dimensiones, color, posición, rotación, escala y otras propiedades según tus necesidades.
Al instanciar un XUCube
, se agrega automáticamente a la escena que
especifiques (parámetro
scene
) y a un arreglo objects
para su administración
conjunta con otros
elementos 3D.
Instanciando la clase XUCube
// Ejemplo inicial
// Suponiendo que ya dispones de:
// - Una escena 'miEscena'
// - Un array 'miListaObjetos' para gestionar tus objetos 3D
const miCubo = new XUCube({
name: "DemoCube",
position: [0, 0, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1],
width: 2,
height: 2,
depth: 2,
color: 0x00ff00
});
2. Métodos principales de la clase XUCube
2.1 setDimensions(width, height, depth)
Actualiza las dimensiones del cubo. Destruye la geometría anterior y crea una nueva con los valores indicados.
Parámetros:
width
: Ancho (número).height
: Alto (número).depth
: Profundidad (número).
Ejemplo:
// Cambiar el cubo a tamaño 2 x 3 x 1
miCubo.setDimensions(2, 3, 1);
2.2 getDimensions()
Retorna un objeto con las dimensiones actuales:
{ width, height, depth }
.
Ejemplo:
const dims = miCubo.getDimensions();
XUConsole(dims.width, dims.height, dims.depth);
2.3 setColor(color)
Cambia el color del cubo.
Parámetros:
color
: Color en valor hexadecimal (por ej.0xff0000
) o cadena ("#ff0000"
).
Ejemplo:
// Cambiar el cubo a color rojo
miCubo.setColor(0xff0000);
2.4 getColor()
Retorna el color actual del cubo como un número en formato Hex
(por ejemplo, 16711680
es 0xff0000
).
Ejemplo:
const currentColor = miCubo.getColor();
XUConsole("Color actual:", currentColor.toString(16));
2.5 setPosition(x, y, z)
Cambia la posición del cubo en tu entorno 3D.
Parámetros:
x
,y
,z
: Coordenadas de posición (números).
Ejemplo:
// Mover el cubo a la posición (3, 1, -2)
miCubo.setPosition(3, 1, -2);
2.6 getPosition()
Retorna la posición actual del cubo como un objeto con
{ x, y, z }
.
Ejemplo:
const pos = miCubo.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.7 setRotation(x, y, z)
Cambia la rotación del cubo en radianes alrededor de los ejes
X
, Y
y Z
.
Parámetros:
x
,y
,z
: Rotaciones en radianes.
Ejemplo:
// Rotar el cubo 45° en eje X, 30° en eje Y, 0° en Z
// Nota: 45° = Math.PI / 4 radianes
miCubo.setRotation(Math.PI / 4, Math.PI / 6, 0);
2.8 getRotation()
Retorna la rotación actual del cubo como un objeto con
{ x, y, z }
, donde cada valor está en radianes.
Ejemplo:
const rot = miCubo.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.9 setScale(x, y, z)
Cambia la escala del cubo a lo largo de cada eje.
Parámetros:
x
,y
,z
: Factores de escala para cada eje.
Ejemplo:
// Escalar el cubo al doble en X y Z, y la mitad en Y
miCubo.setScale(2, 0.5, 2);
2.10 getScale()
Retorna la escala actual del cubo como un objeto con
{ x, y, z }
.
Ejemplo:
const scl = miCubo.getScale();
XUConsole(scl.x, scl.y, scl.z);
3. Ejemplos completos
3.1 Ejemplo - Creación básica de un XUCube
// Asumiendo que ya tienes:
// - Un objeto 'miEscena' para tu entorno 3D
// - Un array 'misObjetos' para almacenar tus entidades
// Crear un cubo con dimensiones 2x2x2, color verde
const miCubo = new XUCube( {
name: "GreenCube",
position: [0, 1, 0],
scale: [1, 1, 1],
width: 2,
height: 2,
depth: 2,
color: 0x00ff00
});
3.2 Ejemplo - Cambio dinámico de propiedades
// Cambiar color y dimensiones
miCubo.setColor(0xff0000); // Cambiar a rojo
miCubo.setDimensions(3, 1, 2); // Nuevo tamaño
// Ajustar posición y rotación
miCubo.setPosition(2, 0.5, -1);
miCubo.setRotation(0, Math.PI / 4, 0);
// Obtener valores y mostrarlos en consola
XUConsole("Nuevas dimensiones:", miCubo.getDimensions());
XUConsole("Nueva posición:", miCubo.getPosition());
XUConsole("Nueva rotación:", miCubo.getRotation());
Fin de la sección
Manual de Usuario - XUSphere de XUEngine Studio
Índice
1. Introducción
XUSphere es una clase interna de XUEngine Studio que representa una esfera 3D. Puedes definir su radio (radius), segmentación (widthSegments y heightSegments), color, posición, rotación, escala, entre otras propiedades.
Al crear una instancia de XUSphere
, se agrega automáticamente a la
escena principal
(pasada como parámetro scene
) y a un arreglo objects
para su gestión conjunta
con otros objetos 3D que manejes en tu proyecto.
Instanciando la clase XUSphere
// Ejemplo inicial de creación de una XUSphere
// Se asume que ya cuentas con:
// - Un objeto 'miScene' que representa la escena 3D.
// - Un array 'miObjects' para almacenar tus entidades 3D.
const miEsfera = new XUSphere(miScene, miObjects, {
name: "DemoSphere",
position: [0, 1, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1],
radius: 1,
widthSegments: 32,
heightSegments: 32,
color: 0xff0000
});
2. Métodos principales de la clase XUSphere
2.1 setSphereParams(radius, widthSegments, heightSegments)
Actualiza los parámetros de la esfera:
radius
, widthSegments
y
heightSegments
.
Internamente se desecha la geometría previa y se crea una nueva con los
valores proporcionados.
Parámetros:
radius
: Radio de la esfera (número).widthSegments
: Segmentos en el eje horizontal (número).heightSegments
: Segmentos en el eje vertical (número).
Ejemplo:
// Cambiar la esfera a radio 2, con 24 segmentos de ancho y 24 de alto
miEsfera.setSphereParams(2, 24, 24);
2.2 getSphereParams()
Retorna un objeto con los parámetros actuales de la esfera:
{ radius, widthSegments, heightSegments }
.
Ejemplo:
const params = miEsfera.getSphereParams();
XUConsole(params.radius, params.widthSegments, params.heightSegments);
2.3 setColor(color)
Cambia el color de la esfera.
Parámetros:
color
: Valor en formato hexadecimal (por ejemplo,0xff0000
) o string ("#ff0000"
).
Ejemplo:
// Cambiar el color a azul
miEsfera.setColor(0x0000ff);
2.4 getColor()
Retorna el color actual de la esfera como un número entero en formato Hex
(por ejemplo, 16711680
representaría 0xff0000
).
Ejemplo:
const currentColor = miEsfera.getColor();
XUConsole("Color actual (hex):", currentColor.toString(16));
2.5 setPosition(x, y, z)
Cambia la posición de la esfera en tu entorno 3D.
Parámetros:
x
,y
,z
: Coordenadas de posición (números).
Ejemplo:
// Mover la esfera a la posición (2, 1, -3)
miEsfera.setPosition(2, 1, -3);
2.6 getPosition()
Retorna la posición actual de la esfera como un objeto con
x
, y
y z
.
Ejemplo:
const pos = miEsfera.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.7 setRotation(x, y, z)
Cambia la rotación de la esfera alrededor de cada eje (x
,
y
,
z
), en radianes. Por ejemplo, Math.PI / 2
equivale
a 90 grados.
Parámetros:
x
,y
,z
: Ángulos en radianes.
Ejemplo:
// Rotar la esfera 45° en eje X, 45° en Y
miEsfera.setRotation(Math.PI / 4, Math.PI / 4, 0);
2.8 getRotation()
Retorna la rotación actual de la esfera como un objeto con los valores
x
, y
y z
en radianes.
Ejemplo:
const rot = miEsfera.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.9 setScale(x, y, z)
Cambia la escala de la esfera en cada eje. Por lo general, usarás un mismo
valor para
x
, y
y z
si deseas conservar la forma
completamente esférica;
sin embargo, es posible deformarla si lo necesitas.
Parámetros:
x
,y
,z
: Factores de escala para cada eje.
Ejemplo:
// Escalar la esfera al doble en todos los ejes
miEsfera.setScale(2, 2, 2);
2.10 getScale()
Retorna la escala actual de la esfera como un objeto con x
,
y
,
z
.
Ejemplo:
const scl = miEsfera.getScale();
XUConsole(scl.x, scl.y, scl.z);
3. Ejemplos completos
3.1 Ejemplo - Creación básica de una esfera
// Asumiendo que ya cuentas con:
// - Un objeto 'escenaPrincipal' que representa tu escena 3D.
// - Un array 'listaObjetos' para administrar tus entidades 3D.
// - La clase XUSphere cargada en tu entorno.
const miEsfera = new XUSphere(escenaPrincipal, listaObjetos, {
name: "RedSphere",
position: [0, 0, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1],
radius: 1,
widthSegments: 32,
heightSegments: 32,
color: 0xff0000
});
3.2 Ejemplo - Cambio dinámico de parámetros
// Cambiar color y parámetros de la esfera
miEsfera.setColor(0x00ff00); // Ponerla de color verde
miEsfera.setSphereParams(2, 16, 16); // Radio = 2, segs = 16x16
// Ajustar posición y rotación
miEsfera.setPosition(2, 1, -2);
miEsfera.setRotation(0, Math.PI / 2, 0);
// Obtener y mostrar valores
XUConsole("Parámetros de esfera:", miEsfera.getSphereParams());
XUConsole("Posición actual:", miEsfera.getPosition());
XUConsole("Rotación actual:", miEsfera.getRotation());
Fin de la sección
Manual de Usuario - XUCylinder de XUEngine Studio
Índice
1. Introducción
XUCylinder es una clase diseñada para facilitar la creación y manipulación de cilindros en tu entorno 3D dentro de XUEngine Studio.
Puedes definir parámetros como radiusTop
,
radiusBottom
,
height
, radialSegments
, color, posición, rotación,
escala y
otros valores. Al instanciar un XUCylinder
, se agrega
automáticamente a la
escena y a un arreglo de objetos para gestionarlo junto con otras entidades 3D.
Instanciando la clase XUCylinder
// Ejemplo de creación
// Suponiendo que ya cuentas con:
// - Un objeto 'miEscena' que representa el espacio 3D
// - Un array 'misObjetos' donde almacenar tus entidades
const miCilindro = new XUCylinder( {
name: "DemoCylinder",
position: [0, 0, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1],
radiusTop: 1,
radiusBottom: 1,
height: 3,
radialSegments: 16,
color: 0xff0000
});
2. Métodos principales de la clase XUCylinder
2.1
setCylinderParams(radiusTop, radiusBottom, height, radialSegments)
Actualiza los parámetros principales del cilindro. Elimina la geometría anterior y crea una nueva según los valores proporcionados.
Parámetros:
radiusTop
: Radio en la parte superior.radiusBottom
: Radio en la parte inferior.height
: Altura total del cilindro.radialSegments
: Cantidad de segmentos que conforman el perímetro.
Ejemplo:
// Cambiar el cilindro a una altura de 5, parte superior 1, parte inferior 2
miCilindro.setCylinderParams(1, 2, 5, 24);
2.2 getCylinderParams()
Devuelve un objeto con las propiedades actuales del cilindro:
{ radiusTop, radiusBottom, height, radialSegments }
.
Ejemplo:
const params = miCilindro.getCylinderParams();
XUConsole(params.radiusTop, params.radiusBottom, params.height, params.radialSegments);
2.3 setColor(color)
Cambia el color del cilindro.
Parámetros:
color
: Valor en formato hexadecimal (ej.0x00ff00
) o cadena ("#00ff00"
).
Ejemplo:
// Cambiar a color verde
miCilindro.setColor(0x00ff00);
2.4 getColor()
Retorna el color actual del cilindro como un número en formato Hex
(por ejemplo, 16711680
representa 0xff0000
).
Ejemplo:
const currentColor = miCilindro.getColor();
XUConsole("Color actual:", currentColor.toString(16));
2.5 setPosition(x, y, z)
Ajusta la posición del cilindro en tu entorno 3D.
Parámetros:
x
,y
,z
: Coordenadas numéricas para cada eje.
Ejemplo:
// Mover el cilindro a (2, 3, -1)
miCilindro.setPosition(2, 3, -1);
2.6 getPosition()
Retorna un objeto con la posición actual del cilindro:
{ x, y, z }
.
Ejemplo:
const pos = miCilindro.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.7 setRotation(x, y, z)
Cambia la rotación del cilindro en radianes alrededor de los ejes
x
,
y
y z
.
Parámetros:
x
,y
,z
: Valores de rotación en radianes.
Ejemplo:
// Rotar el cilindro 90° en eje X, 45° en eje Y
miCilindro.setRotation(Math.PI/2, Math.PI/4, 0);
2.8 getRotation()
Devuelve un objeto con la rotación actual del cilindro en radianes:
{ x, y, z }
.
Ejemplo:
const rot = miCilindro.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.9 setScale(x, y, z)
Cambia la escala del cilindro en cada eje. Si quieres conservar la forma
cilíndrica,
mantén factores iguales en x
y z
(normalmente).
Parámetros:
x
,y
,z
: Valores de escala para cada eje.
Ejemplo:
// Escalar el cilindro al doble en X y Z, sin cambiar Y
miCilindro.setScale(2, 1, 2);
2.10 getScale()
Retorna un objeto con la escala actual del cilindro:
{ x, y, z }
.
Ejemplo:
const scl = miCilindro.getScale();
XUConsole(scl.x, scl.y, scl.z);
3. Ejemplos completos
3.1 Ejemplo - Creación básica de un XUCylinder
// Asumiendo que dispones de:
// - Una escena 'miEscenaPrincipal'
// - Un array 'listaDeObjetos' para administrar entidades 3D
// Crear un cilindro con altura 2, color azul
const miCilindro = new XUCylinder(miEscenaPrincipal, listaDeObjetos, {
name: "BlueCylinder",
position: [1, 0, -1],
rotation: [0, 0, 0],
scale: [1, 1, 1],
radiusTop: 0.5,
radiusBottom: 0.5,
height: 2,
radialSegments: 16,
color: 0x0000ff
});
3.2 Ejemplo - Cambio dinámico de parámetros
// Ajustar color y dimensiones
miCilindro.setColor(0xffff00); // Cambiar a amarillo
miCilindro.setCylinderParams(1, 2, 4, 24); // Top = 1, Bottom = 2, Height = 4, Seg = 24
// Cambiar posición y rotación
miCilindro.setPosition(2, 2, 0);
miCilindro.setRotation(0, Math.PI / 2, 0);
// Imprimir valores
XUConsole("Parámetros del cilindro:", miCilindro.getCylinderParams());
XUConsole("Posición:", miCilindro.getPosition());
XUConsole("Rotación:", miCilindro.getRotation());
Fin de la sección
Manual de Usuario - XUPlane de XUEngine Studio
Índice
1. Introducción
XUPlane es una clase pensada para crear y administrar planos en
el entorno 3D
de XUEngine Studio. Puedes ajustar parámetros como width
,
height
,
color
, además de posición, rotación y escala.
Al instanciar un XUPlane
, se añade automáticamente a la escena
(pasada como parámetro scene
) y a un arreglo objects
que facilita
la administración de tus entidades 3D.
Instanciando la clase XUPlane
// Ejemplo básico de creación
// Suponiendo que ya dispones de:
// - Un objeto 'miEscena' para tu mundo 3D
// - Un array 'misObjetos' para gestionar tus entidades
const miPlano = new XUPlane({
name: "GroundPlane",
position: [0, 0, 0],
rotation: [-Math.PI / 2, 0, 0], // Por ejemplo, inclinarlo como "suelo"
scale: [1, 1, 1],
width: 10,
height: 10,
color: 0xcccccc
});
2. Métodos principales de la clase XUPlane
2.1 setPlaneParams(width, height)
Ajusta las dimensiones del plano. Se destruye la geometría anterior y se crea una nueva con los valores indicados.
Parámetros:
width
: Ancho del plano (número).height
: Altura del plano (número).
Ejemplo:
// Cambiar el plano a 20 x 15
miPlano.setPlaneParams(20, 15);
2.2 getPlaneParams()
Retorna un objeto con las dimensiones actuales del plano:
{ width, height }
.
Ejemplo:
const dims = miPlano.getPlaneParams();
XUConsole(dims.width, dims.height);
2.3 setColor(color)
Cambia el color del plano.
Parámetros:
color
: Valor en formato hexadecimal (ej.0xff0000
) o cadena ("#ffffff"
).
Ejemplo:
// Cambiar el plano a color verde
miPlano.setColor(0x00ff00);
2.4 getColor()
Retorna el color actual del plano como un número en formato Hex
(por ejemplo, 16777215
equivale a 0xffffff
).
Ejemplo:
const currentColor = miPlano.getColor();
XUConsole("Color actual (hex):", currentColor.toString(16));
2.5 setPosition(x, y, z)
Cambia la posición del plano en el entorno 3D.
Parámetros:
x
,y
,z
: Coordenadas numéricas.
Ejemplo:
// Mover el plano a X=5, Y=0, Z=-2
miPlano.setPosition(5, 0, -2);
2.6 getPosition()
Retorna la posición actual del plano como un objeto con
x
, y
, z
.
Ejemplo:
const pos = miPlano.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.7 setRotation(x, y, z)
Cambia la rotación del plano en radianes, sobre los ejes x
,
y
y z
.
Parámetros:
x
,y
,z
: Rotaciones en radianes.
Ejemplo:
// Inclinar el plano 90° en X
miPlano.setRotation(Math.PI / 2, 0, 0);
2.8 getRotation()
Devuelve la rotación actual del plano como un objeto con x
,
y
,
z
en radianes.
Ejemplo:
const rot = miPlano.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.9 setScale(x, y, z)
Cambia la escala del plano en cada eje. Usualmente en un plano basta con
modificar x
y
y
si quieres mantenerlo en 2D, pero puedes manipular los 3 ejes
libremente.
Parámetros:
x
,y
,z
: Valores de escala para cada eje.
Ejemplo:
// Escalar el plano a la mitad de su tamaño en X e Y, Z se mantiene en 1
miPlano.setScale(0.5, 0.5, 1);
2.10 getScale()
Devuelve la escala actual del plano como un objeto con x
,
y
,
z
.
Ejemplo:
const scl = miPlano.getScale();
XUConsole(scl.x, scl.y, scl.z);
3. Ejemplos completos
3.1 Ejemplo - Creación básica de un XUPlane
// Suponiendo que cuentas con:
// - Una escena 'escenaPrincipal'
// - Un array 'listaObjetos' para administrar tus entidades
// Crear un plano de 20x20 color gris
const miPlano = new XUPlane(escenaPrincipal, listaObjetos, {
name: "GroundPlane",
position: [0, 0, 0],
rotation: [-Math.PI / 2, 0, 0], // Suele usarse para representarlo como suelo
width: 20,
height: 20,
color: 0x999999
});
3.2 Ejemplo - Ajuste dinámico de parámetros
// Cambiar las dimensiones y color del plano
miPlano.setPlaneParams(15, 10); // Nuevo ancho y alto
miPlano.setColor(0xff0000); // Cambiar a rojo
// Reposicionar y rotar el plano
miPlano.setPosition(5, 1, -2);
miPlano.setRotation(0, Math.PI / 4, 0);
// Ver valores
XUConsole("Dimensiones actuales:", miPlano.getPlaneParams());
XUConsole("Posición:", miPlano.getPosition());
XUConsole("Rotación:", miPlano.getRotation());
Fin de la sección
Manual de Usuario - XUGroup de XUEngine Studio
Índice
1. Introducción
XUGroup es una clase diseñada para agrupar múltiples objetos dentro de un mismo contenedor, lo que facilita su administración conjunta. Permite, por ejemplo, mover y rotar todo un conjunto de objetos como si fuera uno solo.
Adicionalmente, XUGroup
ofrece métodos para visualizar un
bounding box por medio de marcadores en las esquinas, lo cual puede ser
útil para
depuración, selección o manipulación en el entorno 3D.
Al crear una instancia de XUGroup
, este se agrega automáticamente a
la escena
(pasada como scene
) y al arreglo objects
para su
administración junto
a otras entidades 3D.
2. Métodos principales de la clase XUGroup
2.1 setPosition(x, y, z)
Cambia la posición del grupo en el entorno 3D.
Parámetros:
x
,y
,z
: Coordenadas de posición (números).
Ejemplo:
// Mover el grupo a (2, 1, -5)
miGrupo.setPosition(2, 1, -5);
2.2 getPosition()
Retorna la posición actual del grupo como un objeto con
x
, y
y z
.
Ejemplo:
const pos = miGrupo.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.3 setRotation(x, y, z)
Cambia la rotación del grupo en radianes alrededor de los ejes
x
,
y
y z
.
Parámetros:
x
,y
,z
: Valores de rotación en radianes.
Ejemplo:
// Rotar el grupo 45° en eje Y
miGrupo.setRotation(0, Math.PI / 4, 0);
2.4 getRotation()
Retorna la rotación actual del grupo como un objeto con x
,
y
y
z
en radianes.
Ejemplo:
const rot = miGrupo.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.5 setScale(x, y, z)
Ajusta la escala del grupo en cada eje. Todos los objetos hijos se verán afectados por el factor de escala definido aquí.
Parámetros:
x
,y
,z
: Factores de escala en cada eje.
Ejemplo:
// Escalar el grupo al doble en eje X e Y, manteniendo Z
miGrupo.setScale(2, 2, 1);
2.6 getScale()
Retorna la escala actual del grupo como un objeto con x
,
y
,
z
.
Ejemplo:
const scl = miGrupo.getScale();
XUConsole(scl.x, scl.y, scl.z);
2.7 updateBoundingMarkers()
Calcula el bounding box del grupo (considerando todos sus hijos) y coloca marcadores en las esquinas para visualizar su tamaño. Esto es útil para depuración o selección.
Detalles:
- Limpia marcadores previos y crea un cubo pequeño en cada esquina del bounding box.
- Para mostrar los marcadores, deben estar visibles (ver
toggleBoundingMarkers
).
Ejemplo:
// Actualizar y mostrar los marcadores de un grupo
miGrupo.updateBoundingMarkers();
miGrupo.toggleBoundingMarkers(true);
2.8 toggleBoundingMarkers(visible)
Activa o desactiva la visibilidad de los marcadores de esquina.
Parámetros:
visible
: Booleano que indica si los marcadores deben mostrarse (true
) u ocultarse (false
).
Ejemplo:
// Ocultar marcadores
miGrupo.toggleBoundingMarkers(false);
3. Ejemplos completos
3.1 Ejemplo - Creación básica de un XUGroup
// Asumiendo que dispones de:
// - Una escena 'miEscenaPrincipal'
// - Un array 'listaObjetos' que administra tus entidades
// Crear un grupo vacío
const miGrupo = new XUGroup(miEscenaPrincipal, listaObjetos, {
name: "GroupEjemplo",
position: [0, 0, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1]
});
// Añadir otros objetos al grupo
const miEsfera = new XUSphere(...); // Ejemplo (no se incluye implementación aquí)
miGrupo.add(miEsfera);
const miCubo = new XUCube(...);
miGrupo.add(miCubo);
// Ahora mover el grupo entero desplazará también a miEsfera y miCubo
miGrupo.setPosition(2, 1, -3);
3.2 Ejemplo - Uso de los marcadores de esquina
// Suponiendo que 'miGrupo' ya tiene hijos
// Actualizar y mostrar los marcadores de esquina
miGrupo.updateBoundingMarkers();
miGrupo.toggleBoundingMarkers(true);
// Cambiar la posición y rotación después de mostrar marcadores
miGrupo.setPosition(1, 2, 0);
miGrupo.setRotation(0, Math.PI / 4, 0);
// Los marcadores no cambian automáticamente en tiempo real;
// se recomienda volver a llamar a updateBoundingMarkers() tras desplazar el grupo
miGrupo.updateBoundingMarkers();
Fin de la sección
Manual de Usuario - XUText de XUEngine Studio
Índice
1. Introducción
XUText es una clase enfocada en renderizar texto 3D dentro de
XUEngine Studio. Soporta propiedades como text
,
size
,
color
, y además permite manipular la posición, rotación y escala
del texto
en un entorno tridimensional.
Internamente, se emplea un objeto DText
para generar la geometría
de las
letras. Al crear XUText
, se agrega automáticamente a la escena
(parámetro
scene
) y a un arreglo de objetos objects
para su
administración
conjunta junto con otras entidades.
Instanciando la clase XUText
// Ejemplo de creación básica
// Suponiendo que ya dispones de:
// - Un objeto 'miEscena' para la escena 3D
// - Un array 'misObjetos' para administrar entidades
// - Una fuente 'miFuente' que usarás para el texto
const miTexto = new XUText( {
name: "TituloPrincipal",
position: [0, 2, 0],
rotation: [0, 0, 0],
scale: [1, 1, 1],
text: "Bienvenido a XUEngine",
size: 30,
color: 0xff9900,
font: miFuente
});
2. Métodos principales de la clase XUText
2.1 setText(newText)
Cambia el contenido textual que se mostrará en la geometría 3D.
Parámetros:
newText
: Cadena con el nuevo texto a mostrar.
Ejemplo:
// Actualizar el texto a "Hola Mundo"
miTexto.setText("Hola Mundo");
2.2 setSize(newSize)
Ajusta el tamaño base del texto. Mientras más grande sea este valor, mayor será la altura de la forma 3D.
Parámetros:
newSize
: Número que representa el nuevo tamaño de la fuente.
Ejemplo:
// Aumentar el tamaño del texto a 50
miTexto.setSize(50);
2.3 setColor(newColor)
Cambia el color del texto.
Parámetros:
newColor
: Valor en formato hexadecimal (por ejemplo,0xff0000
) o string ("#ff0000"
).
Ejemplo:
// Cambiar a color azul
miTexto.setColor(0x0000ff);
2.4 setPosition(x, y, z)
Modifica la posición del texto en tu entorno tridimensional.
Parámetros:
x
,y
,z
: Coordenadas numéricas.
Ejemplo:
// Mover el texto a (3, 5, -2)
miTexto.setPosition(3, 5, -2);
2.5 getPosition()
Obtiene la posición actual del texto como un objeto con x
,
y
y
z
.
Ejemplo:
const pos = miTexto.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.6 setRotation(x, y, z)
Cambia la rotación del texto alrededor de cada eje (x
,
y
, z
), expresada en radianes.
Parámetros:
x
,y
,z
: Ángulos en radianes.
Ejemplo:
// Rotar el texto 90° en X
miTexto.setRotation(Math.PI / 2, 0, 0);
2.7 getRotation()
Obtiene la rotación actual del texto como un objeto con x
,
y
y z
, todos en radianes.
Ejemplo:
const rot = miTexto.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.8 setScale(x, y, z)
Ajusta la escala del texto en cada eje. Esto puede usarse para deformar o ampliar el texto en X, Y o Z según necesites.
Parámetros:
x
,y
,z
: Factores de escala.
Ejemplo:
// Duplicar el ancho y la altura, mantener la profundidad
miTexto.setScale(2, 2, 1);
2.9 getScale()
Retorna la escala actual del texto como un objeto con x
,
y
y
z
.
Ejemplo:
const scl = miTexto.getScale();
XUConsole(scl.x, scl.y, scl.z);
3. Ejemplos completos
3.1 Ejemplo - Creación básica de un XUText
// Suponiendo que ya tienes:
// - Una escena 'escenaPrincipal'
// - Un array 'listaObjetos'
// - Una fuente (opcional) 'miFuente' para el texto
const miTexto = new XUText(escenaPrincipal, listaObjetos, {
name: "TextoDemo",
position: [0, 1, 0],
text: "Demo 3D Text",
size: 40,
color: 0x00ff00,
font: miFuente
});
3.2 Ejemplo - Cambio dinámico de propiedades
// Cambiar el texto, tamaño y color
miTexto.setText("Nuevo Mensaje");
miTexto.setSize(25);
miTexto.setColor(0xffff00);
// Mover y rotar el texto
miTexto.setPosition(2, 3, -2);
miTexto.setRotation(0, Math.PI / 2, 0);
// Consultar valores
XUConsole("Posición:", miTexto.getPosition());
XUConsole("Rotación:", miTexto.getRotation());
Fin de la sección
Manual de Usuario - XUParticleSystem de XUEngine Studio
Índice
1. Introducción
XUParticleSystem es una clase diseñada para manejar un sistema de partículas dentro de XUEngine Studio. Permite configurar la emisión de partículas, su vida útil, su velocidad y la apariencia básica (como color), además de controlar la posición, rotación y escala de todo el sistema.
Cada partícula se crea en la posición del sistema y evoluciona según la lógica
interna (por ejemplo,
moviéndose hacia arriba o en cualquier dirección que se establezca). Una vez que
supera su tiempo de
vida (lifetime
), la partícula desaparece automáticamente.
Al instanciar XUParticleSystem
, se agrega automáticamente a la
escena y a un arreglo de
objetos para su fácil administración junto con otras entidades 3D.
Instanciando la clase XUParticleSystem
// Ejemplo básico de creación
// Suponiendo que ya dispones de:
// - Un objeto 'miEscena' que representa tu espacio 3D
// - Un array 'misObjetos' donde administras tus entidades
const miSistemaParticulas = new XUParticleSystem( {
name: "EfectoHumo",
position: [0, 1, 0],
maxParticles: 200,
emissionRate: 20,
lifetime: 3.0,
speed: 1.5,
color: 0x999999
});
// Este sistema se ubica en (0, 1, 0) y puede emitir hasta 200 partículas.
// Cada partícula vive 3 segundos, emitiendo 20 partículas por segundo con
// una velocidad vertical de 1.5 unidades.
2. Métodos principales de la clase XUParticleSystem
2.1 start()
Inicia la emisión de partículas, permitiendo que nuevas partículas se
generen cada frame
según la propiedad emissionRate
.
Ejemplo:
// Comenzar la emisión de partículas
miSistemaParticulas.start();
2.2 stop()
Detiene la emisión de nuevas partículas; las existentes se extinguirán
cuando termine
su lifetime
.
Ejemplo:
// Detener la emisión
miSistemaParticulas.stop();
2.3 update(deltaTime)
Lógica principal del sistema de partículas que debe llamarse cada frame (o en un bucle de actualización). Controla la creación de nuevas partículas y actualiza su vida y posición.
Parámetros:
deltaTime
: Tiempo transcurrido desde la última actualización, en segundos.
Ejemplo:
// En tu ciclo de animación o bucle principal
function loop(deltaTime) {
miSistemaParticulas.update(deltaTime);
// ... Lógica de otros objetos
}
2.4 setPosition(x, y, z)
Ajusta la posición del sistema de partículas en el entorno. Todas las partículas se generan en esta posición inicial.
Parámetros:
x
,y
,z
: Coordenadas numéricas.
Ejemplo:
// Mover el sistema de partículas a (2, 3, -1)
miSistemaParticulas.setPosition(2, 3, -1);
2.5 getPosition()
Retorna la posición actual del sistema como un objeto con
x
, y
y z
.
Ejemplo:
const pos = miSistemaParticulas.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.6 setRotation(x, y, z)
Cambia la rotación del sistema en radianes alrededor de cada eje
(x
, y
,
z
).
Parámetros:
x
,y
,z
: Ángulos en radianes.
Ejemplo:
// Rotar el sistema 45° en eje Y
miSistemaParticulas.setRotation(0, Math.PI / 4, 0);
2.7 getRotation()
Devuelve la rotación actual del sistema como un objeto con x
,
y
,
z
en radianes.
Ejemplo:
const rot = miSistemaParticulas.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.8 setScale(x, y, z)
Ajusta la escala del sistema. Podrías, por ejemplo, agrandar o reducir todo
el efecto de
partículas si x, y, z
tuvieran el mismo valor.
Parámetros:
x
,y
,z
: Factores de escala.
Ejemplo:
// Reducir el tamaño general a la mitad
miSistemaParticulas.setScale(0.5, 0.5, 0.5);
2.9 getScale()
Retorna la escala actual del sistema de partículas como un objeto con
x
, y
, z
.
Ejemplo:
const scl = miSistemaParticulas.getScale();
XUConsole(scl.x, scl.y, scl.z);
3. Ejemplos completos
3.1 Ejemplo - Creación y activación de un XUParticleSystem
// Asumiendo que ya tienes:
// - Una escena 'escenaPrincipal'
// - Un array 'listaObjetos'
const miSistemaParticulas = new XUParticleSystem(escenaPrincipal, listaObjetos, {
name: "Chispas",
position: [0, 2, 0],
maxParticles: 50,
emissionRate: 5,
lifetime: 2,
speed: 2,
color: 0xffaa00
});
// Iniciar la emisión
miSistemaParticulas.start();
3.2 Ejemplo - Actualizar en cada frame
// En tu bucle principal o método de actualización
function actualizar(deltaTime) {
miSistemaParticulas.update(deltaTime);
// ... Lógica de otros objetos
}
// Detener la emisión después de 5 segundos
setTimeout(() => {
miSistemaParticulas.stop();
}, 5000);
Fin de la sección
Manual de Usuario - XUPhysics de XUEngine Studio
Índice
1. Introducción
XUPhysics es una clase enfocada en dotar de propiedades físicas
básicas a un objeto
dentro de XUEngine Studio. Permite establecer parámetros como
mass
, friction
,
restitution
, y velocity
, así como controlar su
posición y rotación en cada
actualización. De esta forma, puedes simular movimientos sencillos o incluso
enlazarlo con un motor
de física real en caso necesario.
Si la propiedad isKinematic
está activa, el objeto no sufre cambios
por las fuerzas o
la velocidad, lo que resulta útil para elementos inmóviles o controlados
directamente en tu escena.
Instanciando la clase XUPhysics
// Ejemplo básico de creación
// Suponiendo que ya dispones de:
// - Un objeto 'miEscena' para tu entorno 3D
// - Un array 'misObjetos' para administrar tus entidades
const miFisica = new XUPhysics( {
name: "FallingBox",
position: [0, 10, 0],
mass: 2.0,
friction: 0.3,
velocity: [0, 0, 0],
isKinematic: false
});
2. Métodos principales de la clase XUPhysics
2.1 applyForce(fx, fy, fz)
Aplica una fuerza constante sobre el objeto, modificando su velocidad según
la fórmula
F = m * a
. No tiene efecto si isKinematic
es
verdadero o si
mass <= 0
.
Parámetros:
fx
,fy
,fz
: Componentes de la fuerza.
Ejemplo:
// Empujar el objeto hacia arriba
miFisica.applyForce(0, 20, 0);
2.2 applyImpulse(ix, iy, iz)
Aplica un impulso instantáneo sobre el objeto. Modifica la velocidad sin
tener en cuenta
la aceleración gradual. No tiene efecto si isKinematic
es
verdadero o
mass <= 0
.
Parámetros:
ix
,iy
,iz
: Componentes del impulso.
Ejemplo:
// Dar un golpe horizontal rápido
miFisica.applyImpulse(10, 0, 0);
2.3 update(deltaTime)
Actualiza la posición del objeto en base a su velocidad actual y atenúa la misma según la fricción. Se recomienda llamarlo cada frame o ciclo de actualización.
Parámetros:
deltaTime
: Tiempo transcurrido desde la última actualización, en segundos.
Ejemplo:
// En tu ciclo de animación
function actualizar(deltaTime) {
miFisica.update(deltaTime);
// ... Otros objetos
}
2.4 setPosition(x, y, z)
Fija la posición del objeto en el entorno. Puede usarse para reposicionar manualmente o restablecer su localización.
Parámetros:
x
,y
,z
: Coordenadas numéricas.
Ejemplo:
// Mover el objeto a (3, 2, -4)
miFisica.setPosition(3, 2, -4);
2.5 getPosition()
Devuelve la posición actual del objeto como un objeto con x
,
y
y
z
.
Ejemplo:
const pos = miFisica.getPosition();
XUConsole(pos.x, pos.y, pos.z);
2.6 setRotation(x, y, z)
Ajusta la rotación del objeto en radianes alrededor de cada eje
(x
, y
,
z
).
Parámetros:
x
,y
,z
: Ángulos en radianes.
Ejemplo:
// Rotar 45° en eje Y
miFisica.setRotation(0, Math.PI / 4, 0);
2.7 getRotation()
Devuelve la rotación actual del objeto como un objeto con x
,
y
,
z
(valores en radianes).
Ejemplo:
const rot = miFisica.getRotation();
XUConsole(rot.x, rot.y, rot.z);
2.8 setScale(x, y, z)
Cambia la escala del objeto. Esto puede usarse para agrandar, disminuir o distorsionar la forma asociada a la física (si la hubiera).
Parámetros:
x
,y
,z
: Factores de escala.
Ejemplo:
// Aumentar el tamaño en 2X en X, mantener Y y Z
miFisica.setScale(2, 1, 1);
2.9 getScale()
Retorna la escala actual del objeto como un objeto con x
,
y
y
z
.
Ejemplo:
const scl = miFisica.getScale();
XUConsole(scl.x, scl.y, scl.z);
2.10 setVelocity(vx, vy, vz)
Establece la velocidad del objeto directamente, sin necesidad de aplicar fuerzas o impulsos.
Parámetros:
vx
,vy
,vz
: Componentes de la velocidad.
Ejemplo:
// Dar una velocidad inicial de (1, -1, 0)
miFisica.setVelocity(1, -1, 0);
2.11 getVelocity()
Obtiene la velocidad actual del objeto como un objeto con x
,
y
,
z
.
Ejemplo:
const vel = miFisica.getVelocity();
XUConsole(vel.x, vel.y, vel.z);
3. Ejemplos completos
3.1 Ejemplo - Creación y uso básico de XUPhysics
// Suponiendo que ya cuentas con:
// - Una escena 'escenaPrincipal'
// - Un array 'listaObjetos'
const miFisica = new XUPhysics(escenaPrincipal, listaObjetos, {
name: "CuboDinamico",
position: [0, 5, 0], // A 5 unidades de altura
mass: 1.0,
friction: 0.2,
restitution: 0.1,
velocity: [0, 0, 0],
isKinematic: false // El objeto sí sufre física
});
// Para simular gravedad, puedes hacer algo como:
function actualizar(deltaTime) {
// Agregar fuerza (0, -9.81, 0) * mass, por ejemplo
miFisica.applyForce(0, -9.81 * miFisica.mass, 0);
// Actualizar física
miFisica.update(deltaTime);
}
3.2 Ejemplo - Objeto cinemático
// Crear un objeto que no sea afectado por la física
const miPlataforma = new XUPhysics(escenaPrincipal, listaObjetos, {
name: "Plataforma",
position: [2, 0, -1],
mass: 0, // o cualquier valor
isKinematic: true // No se mueve por fuerzas
});
// Moverlo manualmente
miPlataforma.setPosition(2, 1, -1);
miPlataforma.setVelocity(0, 0, 0); // No tiene efecto real al ser cinemático
Fin de la sección
Manual de Usuario - XUConsole de XUEngine Studio
1. Introducción
XUConsole es una utilidad en XUEngine Studio que actúa como un
sustitulo de XUConsole
de JavaScript. Su objetivo principal es
simplificar la forma en que se muestran mensajes, concatenando internamente
parámetros y ofreciendo compatibilidad con diversas configuraciones de logs
dentro de XUEngine.
En lugar de usar XUConsole
directamente, puedes usar
XUConsole(...)
para imprimir datos o eventos importantes de tu aplicación.
2. Métodos principales
2.1 XUConsole(mensaje)
Función simple que imprime los parámetros recibidos en la consola interna (o la consola del navegador) según la configuración actual de XUEngine. Puede aceptar múltiples argumentos y los une o los muestra correlativamente.
Parámetros:
mensaje
: Cadena de texto (o múltiples argumentos) a imprimir. Puede contener variables concatenadas, tal como harías conXUConsole
.
Ejemplo:
XUConsole("Hola Mundo");
XUConsole("Valor de x:", x, "Valor de y:", y);
3. Ejemplos completos
3.1 Uso básico para imprimir una variable
var cafe = "café";
XUConsole("Quiero " + cafe);
// Resultado en la consola: "Quiero café"
3.2 Ejemplo con múltiples argumentos
// Suponiendo variables con datos
let usuario = "Ana";
let edad = 30;
XUConsole("Usuario:", usuario, "Edad:", edad);
// Puede imprimir algo como: "Usuario: Ana Edad: 30"
3.3 Integración con otras clases
// En cualquier parte de tu lógica:
XUConsole("Iniciando la simulación...");
// Al cargar un modelo
XUConsole("Modelo cargado:", nombreDelModelo);
// Al recibir un evento
XUConsole("Evento de clic en XUEmptyObject:", obj.name);
Fin de la sección
Manual de Usuario - OSLink
Índice
- Introducción
- Instanciación de la clase
OSLink
-
Métodos de la clase
OSLink
- log(...mensajes)
- retornarValores(objetoLiteral)
- para(inicio, condicion, incremento, cuerpo)
- mientras(condicion, cuerpo)
- funcion(nombre, parametros, cuerpo)
- pausa(ms)
- incluir(modulo)
- estructura(nombre, campos)
- input(variable, mensaje)
- definir(nombre, valor)
- finalizar()
- comando(codigo)
- generarCodigoFinal()
- enviar(lenguaje, nombreArchivo)
- awaitResultado(lenguaje, nombreArchivo)
- Ejemplos completos
1. Introducción
OSLink es una librería para la generación dinámica de código en múltiples lenguajes: JavaScript, Python, Go y Shell. Permite construir scripts a través de una API unificada, simplificando la creación y personalización del código fuente.
Con OSLink puedes definir variables, crear estructuras de control, funciones y gestionar la ejecución de scripts. Esto resulta especialmente útil para integraciones en entornos híbridos o para automatizar tareas de generación de código.
2. Instanciación de la clase OSLink
Para comenzar a utilizar OSLink, primero debes instanciar la clase. Esto se hace de la siguiente manera:
// Instanciar la clase OSLink
const vm = new OSLink();
Una vez instanciada, el objeto vm
te permite llamar a todos los métodos de la librería para generar y administrar scripts.
3. Métodos de la clase OSLink
3.1 log(...mensajes)
Añade una línea de código para imprimir mensajes en la consola, usando la sintaxis propia del lenguaje configurado.
Ejemplo:
// En JavaScript:
vm.log("Hola mundo", { info: "datos" });
3.2 retornarValores(objetoLiteral)
Genera código que imprime los valores de un objeto literal formateado según el lenguaje seleccionado.
Ejemplo:
// En JavaScript:
vm.retornarValores("{ x: 5, y: 10 }");
3.3 para(inicio, condicion, incremento, cuerpo)
Crea un bucle for
adaptado al lenguaje configurado.
Ejemplo:
// En JavaScript:
vm.para("let i = 0", "i < 10", "i++", "console.log(i)");
3.4 mientras(condicion, cuerpo)
Genera un bucle while
(o su equivalente) utilizando la condición y el cuerpo especificados.
Ejemplo:
// En Python:
vm.mientras("i < 5", "print(i); i += 1");
3.5 funcion(nombre, parametros, cuerpo)
Define una función con el nombre, los parámetros y el cuerpo indicado, adaptándose a la sintaxis del lenguaje actual.
Ejemplo:
// En Python:
vm.funcion("saludar", ["nombre"], "print('Hola, ' + nombre)");
3.6 pausa(ms)
Inserta una pausa en la ejecución del script durante el número de milisegundos indicado.
Ejemplo:
// En JavaScript:
vm.pausa(1000);
3.7 incluir(modulo)
Agrega una línea de código para importar o requerir un módulo. Por ejemplo, en Node.js se utiliza require()
.
Ejemplo:
// En Node.js:
vm.incluir("fs");
3.8 estructura(nombre, campos)
Define una clase o estructura generando un constructor que asigna los valores de los campos especificados.
Ejemplo:
// En JavaScript:
vm.estructura("Persona", ["nombre", "edad"]);
3.9 input(variable, mensaje)
Inserta código para solicitar una entrada de datos al usuario, mostrando el mensaje indicado.
Ejemplo:
// En Python:
vm.input("nombre", "Introduce tu nombre:");
3.10 definir(nombre, valor)
Declara una variable y le asigna el valor indicado, respetando la sintaxis del lenguaje actual.
Ejemplo:
// En JavaScript:
vm.definir("x", 5);
3.11 finalizar()
Agrega una línea de código que indica la finalización del script, por lo general imprimiendo un mensaje.
Ejemplo:
// En JavaScript:
vm.finalizar();
3.12 comando(codigo)
Permite agregar una línea de código arbitraria al script generado.
Ejemplo:
// En Shell:
vm.comando("x=5");
3.13 generarCodigoFinal()
Retorna el script completo generado como una cadena de texto, listo para visualizarse o enviarse a un entorno de ejecución.
Ejemplo:
// En JavaScript:
const codigo = vm.generarCodigoFinal();
console.log(codigo);
3.14 enviar(lenguaje, nombreArchivo)
Configura el lenguaje, asigna el nombre de archivo y envía el script al entorno host para su ejecución o almacenamiento.
Ejemplo:
// En JavaScript:
vm.enviar("js", "mi_script");
3.15 awaitResultado(lenguaje, nombreArchivo)
Envía el script y retorna una promesa que se resuelve con el resultado de la ejecución.
Ejemplo:
// En JavaScript:
vm.awaitResultado("py", "mi_script")
.then(resultado => console.log(resultado))
.catch(err => console.error(err));
4. Ejemplos completos
4.1 Ejemplo - Generación de un script en JavaScript
// Crear un script en JavaScript que define una variable, muestra su valor y finaliza el script
const vm = new OSLink();
vm.definir("x", 5);
vm.log("El valor de x es:", "x");
vm.finalizar();
console.log(vm.generarCodigoFinal());
4.2 Ejemplo - Ejecución de un script en Python
// Crear un script en Python que define una variable, muestra su valor y finaliza el script
const vm = new OSLink();
vm._lenguaje = "py";
vm.definir("x", 5);
vm.log("El valor de x es:", "x");
vm.finalizar();
vm.awaitResultado("py", "mi_script")
.then(resultado => console.log(resultado))
.catch(err => console.error(err));
4.3 Ejemplo - Generación de un script en Go
// Crear un script en Go que define una variable, muestra su valor y finaliza el script
const vm = new OSLink();
vm._lenguaje = "go";
vm.definir("x", 5);
vm.log("El valor de x es:", "x");
vm.finalizar();
vm.awaitResultado("go", "mi_script")
.then(resultado => console.log(resultado))
.catch(err => console.error(err));
4.4 Ejemplo - Generación de un script en Shell (Bash)
// Crear un script en Shell que define una variable, muestra su valor y finaliza el script
const vm = new OSLink();
vm._lenguaje = "sh";
vm.definir("x", 5);
vm.log("El valor de x es:", "x");
vm.finalizar();
vm.awaitResultado("sh", "mi_script")
.then(resultado => console.log(resultado))
.catch(err => console.error(err));
Fin de la sección
Documentación
Documentation
Asperiores, consequuntur fugit minima natus optio quisquam sint sunt? Earum harum in laudantium nobis obcaecati odio, praesentium, quis sequi soluta vel veniam.
Contact Us
Consequuntur eos ex exercitationem ipsum, nobis nostrum porro praesentium quaerat quidem quis ratione recusandae reprehenderit, saepe soluta temporibus voluptate.
Ready to get started?