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

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] 👇

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"

 "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 . (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í:

✅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

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

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

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

Enlace al repositorio de GitHub: y .