Parte 3: WebGL creando nuestra primera scene.

En los artículos anteriores, hemos explorado los fundamentos de WebGL y cómo configurar el entorno de desarrollo. Ahora, es el momento de adentrarnos en el fascinante mundo de la gráfica en 3D al crear nuestra primera escena.

WebGl + encodeBiz

Asumiendo que ya tenemos el proyecto creado con Nextjs podemos comenzar.

1.Instalación de Three.js, @react-three/fiber y @react-three/drei

Una vez que estés en el directorio del proyecto, instala las bibliotecas Three.js, @react-three/fiber y @react-three/drei usando npm o yarn. Ejecuta el siguiente comando en la terminal:

$ npm install three @react-three/fiber @react-three/drei

Verificar la instalación:

Para asegurarte de que todo se ha instalado correctamente, abre el archivo pages/_app.js en tu editor de código y añade lo siguiente:

import { Environment, Html, OrbitControls, useProgress } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import type { AppProps } from 'next/app'
import { Suspense } from 'react'

function MyApp({ Component, pageProps }) {
  return (
    <Canvas>
      <Suspense fallback={<Loader />}>
        <Environment preset='warehouse' />
        <Component {...pageProps} />
        <OrbitControls enableZoom={false} position={[0, 0, 10]} minDistance={10} />
      </Suspense>
    </Canvas>
  );
}

export default MyApp;

Con esto, habrás configurado un <Canvas> global de @react-three/fiber que envuelve a tu aplicación Next.js. Esto permite que cualquier página de tu aplicación tenga acceso a las funcionalidades de Three.js y @react-three/fiber.Es importante editar el color de fondo del body en los estilos globales.

2.Creando nuestro primer objeto 3D

Primero, crea una nueva página en tu proyecto de Next.js. Puedes hacer esto añadiendo un nuevo archivo dentro de la carpeta pages. Luego creamos un componente component/SphereComp para componentizar el comportamiento de los objetos.

home.tsx

export default function Home() {
  return (
    <>
      <SphereComp/>
    </>
  )
}

sphereComp.tsx

Con el uso de useLoader vamos a cargar las texturas para darle realismo al planeta, uno de mis sitios favoritos para descargar estas es https://polyhaven.com aquí pueden encontrar varias opciones bien chulas.

Con el hook useFrame podemos controlar cada frame de las iteraciones de refrescado en nuestra scene, dando vida a la mismo como se muestra a continuación que rotamos en el eje y el planeta.

import { Sphere } from '@react-three/drei';
import { useFrame, useLoader } from '@react-three/fiber';
import { TextureLoader } from 'three';

const SphereComp = () => {
  const mapTexture = useLoader(TextureLoader, '/textures/cracked_concrete_wall_diff_4k.jpg');
  const normalTexture = useLoader(TextureLoader, '/textures/cracked_concrete_wall_nor_gl_4k.jpg');
  const dispTexture = useLoader(TextureLoader, '/textures/cracked_concrete_wall_disp_4k.png');
  const roughTexture = useLoader(TextureLoader, '/textures/cracked_concrete_wall_rough_4k.jpg');
  const gShip = useRef<any>();

  useFrame(({ clock }) => {
    if(gPlanet.current){
      gPlanet.current.rotation.y += 0.001;
    }
  });

    return (
      <>
        <Sphere ref={gPlanet} args={[3, 32, 32]}>
          <meshStandardMaterial roughnessMap={roughTexture} displacementScale={.2}  displacementMap={dispTexture} normalMap={normalTexture} map={mapTexture}  color='orange' />
        </Sphere>
      </>
    );
  };
  
  export default SphereComp;

Con esto ya tenemos nuestro primera scene configurada y lista para agregar objetos y modelos que facilmente podemos importar desde Blender o cualquier herramienta 3d. En la siguienete parte importaremos modelos como el cohete y veremos como gestionar las rotaciones y los grupos cuando lo necesitemos.

Espero que les ayude a crear escenas increíbles y recuerda si ya tienes una idea o te gustaria implementar WebGl en tu sitio web en encodeBiz podemos facilitarte trabajo y tiempo no dudes en contactarnos.