Website under construction. Launching in T-minus 720 hours (or 43,200 minutes, but who's counting?)

Loading...

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


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 a this.position del Object3D.
  • rotation: Array de 3 valores [x, y, z] en radianes (ej. [0, 0, 0]). Se asigna a this.rotation del Object3D.
  • scale: Array de 3 valores [x, y, z] para la escala (ej. [1,1,1]). Se asigna a this.scale.
  • fbxUrl: Cadena que indica la ruta de un modelo FBX a cargar (opcional). Si se proporciona, se llama a loadFBX(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 de THREE.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


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 objetos options 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.2 button

Crea un botón HTML (<button>).

Propiedades principales:

  • text: Texto del botón (si htmlContent no está definido).
  • onClick: Función que se ejecuta al hacer click.
  • orientation, layout_gravity: También aplican si se requiere flex layout.

Ejemplo:

UIManager.addWidget('miBoton', {
    widgetType: 'button',
    text: 'Haz clic aquí',
    onClick: function() {
    alert('Botón presionado');
    }
});
                                    

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 (si htmlContent 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.9 radiobutton

Crea un <input type="radio">.

Propiedades principales:

  • name: Nombre de grupo para agrupar radio buttons.
  • checked: Estado inicial.
  • onChange: Evento al cambiar el estado.

Ejemplo:

UIManager.addWidget('opcion1', {
    widgetType: 'radiobutton',
    name: 'grupo1',
    checked: true
});
UIManager.addWidget('opcion2', {
    widgetType: 'radiobutton',
    name: 'grupo1'
});
                                    

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 ejemplo google.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.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


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


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


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


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


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


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


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


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 con XUConsole.

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

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?

Download XUEngine Studio Coming Soon

Cooking download!