Publicación de un proyecto Three.js en páginas de GitHub

En este artículo, le mostraré cómo publicar un proyecto Three.js en las páginas de GitHub. No tiene que comprar un dominio costoso ni ningún plan de alojamiento para hacerlo.

Creé un video para esto en mi canal de YouTube 👇

No entraré en cómo desarrollar un proyecto Three.js desde cero. Supongo que lo sabe y ya tiene un proyecto para mostrar en las páginas de GitHub. Si no lo hace, clone mi repositorio y comience [cambie a la rama maestra porque no la configuré como predeterminada] 👇

🌎 https://github.com/knightcube/threejs-starter-practice/tree/master

Así es como se ve 👇

Mira la demostración en vivo aquí 👉 - https://knightcube.github.io/threejs-starter-practice/

PASOS

✅Paso 1 : Cree una nueva carpeta llamada "dist" en su proyecto.

Si ha clonado el repositorio anterior, la carpeta "dist" ya está allí. Puede omitir este paso y el paso 2. Vaya directamente al paso 3).

✅Paso 2 : arrastre y suelte los siguientes archivos dentro de la carpeta dist: index.html, style.css, index.js y cualquier imagen (o textura) que haya usado para su malla.

❗ No se hace referencia a las imágenes en la carpeta estática cuando se usan las páginas de GitHub. Esto significa que cuando muestra un cubo (o cualquier malla) en su navegador usando Three.js e intenta cargar la textura usando TextureLoader, la textura no se aplicará al cubo. Esto sucede porque Páginas de GitHub no hace referencia a las imágenes en la carpeta estática. Para resumir, ponga todas las imágenes en la carpeta dist. También puede crear una carpeta de "activos" separada dentro de la carpeta dist y mantener todas las imágenes dentro de la carpeta "activos". Luego puede hacer referencia a cualquier imagen dentro de la carpeta de activos de esta manera: "./assets/yourimage1.png".

En la imagen de abajo, he usado coolTex.jpg como textura para el cubo. Por lo tanto, lo he guardado dentro de la carpeta dist .

✅Paso 3: Vaya al archivo package.json y agregue esta línea dentro de "scripts"-

 "deploy" : "gh-pages -d dist"

al igual que -

 "scripts" : {     "test" : "echo \"Error: no test specified\" && exit 1" ,     "deploy" : "gh-pages -d dist"
}

✅Paso 4 : Ejecute el siguiente comando en su proyecto para instalar gh-pages . (asegúrese de tener cd en la raíz del directorio de su proyecto)-

 npm install gh-pages

¿Qué es gh-pages ?👉 Es un paquete npm que le permite publicar archivos en una rama llamada "gh-pages" en GitHub. Puede leer más sobre esto aquí: https://www.npmjs.com/package/gh-pages

✅Paso 5 : ahora solo tenemos que enviar el proyecto a su repositorio en GitHub. Para eso, deberá crear un repositorio manualmente en GitHub y luego ejecutar los siguientes comandos uno tras otro:

 git init git remote add origin "YOUR_REPOSITORY_URL"
git add . git commit -m "YOUR_COMMIT_MESSAGE"
git push origin master

✅Paso 6 : una vez que todo su código se haya enviado a la rama maestra, vaya a su repositorio en GitHub y cree una nueva rama. Llámalo "gh-pages". Ahora ejecute este comando en su terminal (asegúrese de estar en la raíz del directorio de su proyecto):

 npm run deploy

Este paso ejecuta el script de "implementación" que agregó en el paso 3 anterior.

✅Paso 7: Vaya a la configuración de su repositorio en GitHub. Desplácese hacia abajo hasta la sección Páginas de GitHub.

Verás algo como esto 👇

PD: a veces, el sitio tarda en publicarse. Así que amablemente espera un tiempo hasta que recibas ese hermoso mensaje verde. Sigue actualizando la página hasta que obtengas esa atractiva marca de verificación.

Conclusión

¡Y ahí tienes! Así es como implementa su proyecto Three.js en las páginas de GitHub.

Muestra tus proyectos y tu código al mundo.

¡Feliz codificación!

Estoy aprendiendo tres.js de este increíble curso de Bruno Simon . Únase a mí y a más de 4000+ desarrolladores de todo el mundo. Hagamos crecer la comunidad Three.JS juntos💪

El fin de semana pasado, hice esto con Three.js👇 -

Enlace al repositorio de GitHub: https://github.com/knightcube/planet-and-stars-threejs y demostración en vivo .