En este artículo, aprenderás a agregar objetos 3D a tu proyecto en Ionic para enriquecer y mejorar tus aplicaciones móviles. Descubre paso a paso cómo integrar elementos tridimensionales y ofrecer una experiencia más dinámica y atractiva a tus usuarios.

1.Ejecuta el siguiente comando para crear un nuevo proyecto en Ionic. Selecciona Angular y NgModules.

C:\Users\User>ionic start twebbs3D tabs --capacitor

2. Añade Three js a tu proyecto:

C:\Users\User>cd twebbs3D
C:\Users\User\twebbs3D>npm install three

3. Agrega tu modelo a tu proyecto. En este ejemplo hemos copiado y pegado el archivo cupmaterial.glb en nuestra carpeta assets. Asegúrate de usar la extensión correcta (.glb).

4. Crea un componente para cargar tu modelo 3D. Para generar el componente, usa el siguiente comando, reemplazando “vista3d” con el nombre de tu componente:

C:\Users\User\twebbs3D>ionic generate component vista3d

5. Haz las importaciones de las dependencias necesarias a tu componente, como Three.js y otros módulos requeridos:

ElementRef: Es una herramienta proporcionada por Angular para interactuar con el DOM. Por lo tanto, es esencial para manipular elementos directamente en tus aplicaciones.

ViewChild: Generalmente, se usa para tener acceso directo a componentes secundarios o elementos del DOM. Además, facilita la comunicación y la manipulación de estos componentes desde el componente principal.

GLTFLoader: Nos permite cargar nuestro modelo 3D. Así, se convierte en una herramienta crucial para la visualización de modelos tridimensionales en aplicaciones web y móviles.

OrbitControls: Nos ayuda a manipular las escenas 3D, lo que hace posible que podamos ver un objeto desde diferentes ángulos. Por consiguiente, mejora la interactividad y la experiencia del usuario al explorar modelos 3D.

Nuestras importaciones quedarán así:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

Si tienes un error con las importaciones puedes correr el siguiente comando:

C:\Users\User\twebbs3D>npm install --save-dev @types/three

Tambien es posible que debas incluir “typeRoots”: [“node_modules/@types”] en tu archivo tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "baseUrl": "./",

6. Carga tu modelo en tu componente.

export class Vista3dComponent  implements OnInit {
  @ViewChild('showContainer', { static: true }) rendererContainer!: ElementRef;
  constructor() { }

  ngOnInit(): void {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setSize(window.innerWidth * 1, window.innerHeight * 0.8); // Ajusta el tamaño
    this.rendererContainer.nativeElement.appendChild(renderer.domElement);

    renderer.setClearColor(0x555555); // Establece el color de fondo

    // A continuación debes indicar la ruta de tu modelo
    const loader = new GLTFLoader();
    loader.load('assets/cupmaterial.glb', function (glb) { 
    
     // Tu objeto
     const object = glb.scene;
     console.log(object)
     
 
  object.scale.set(0.2, 0.2, 0.2); // Estable la escala que necesites.
    // Así añadimos el objeto en nuestra escena.
   if (object) {
      scene.add(object);
    }
  });
  
  const light = new THREE.PointLight(0xffffff, 1);
  light.position.set(2, 2, 5);
  scene.add(light);
  camera.position.z = 4;

  const light2 = new THREE.AmbientLight( 0xffffff, 1); // soft white light
scene.add( light2 );

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // optional smooth camera movement
    
    const animate = function () {
      requestAnimationFrame(animate);
      controls.update(); // update controls in animation loop
      renderer.render(scene, camera);
    };
    animate();
  }
}

7. Muestra tu modelo 3D en tu aplicación.

Importa tu componente en el archivo tab1.module.ts (o en el archivo del módulo donde deseas mostrarlo). No olvides agregar tu componente en la sección de declarations, como se muestra a continuación:

Incorpora el componente en el archivo del módulo específico para asegurar su correcta visualización en tu aplicación Ionic.

import { Vista3dComponent } from '../vista3d/vista3d.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page, Vista3dComponent]
})
export class Tab1PageModule {}