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   porque no la configuré como predeterminada] 👇 rama maestra  🌎  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    : Cree una nueva carpeta llamada "dist" en su proyecto. ✅Paso 1   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).    : 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. ✅Paso 2  ❗  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   como textura para el cubo. Por lo tanto, lo he guardado dentro de la carpeta   . coolTex.jpg dist    Vaya al archivo   y agregue esta línea dentro de "scripts"-  ✅Paso 3: package.json       "deploy" : "gh-pages -d dist"  al igual que -                } "scripts" : {       "test" : "echo \"Error: no test specified\" && exit 1" ,       "deploy" : "gh-pages -d dist" 
    : Ejecute el siguiente comando en su proyecto para instalar   . (asegúrese de tener cd en la raíz del directorio de su proyecto)-  ✅Paso 4 gh-pages   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     : 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:  ✅Paso 5       git add .    git push origin master git init git remote add origin "YOUR_REPOSITORY_URL" 
 git commit -m "YOUR_COMMIT_MESSAGE" 
    : 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):  ✅Paso 6   npm run deploy  Este paso ejecuta el script de "implementación" que agregó en el paso 3 anterior.    Vaya a la configuración de su repositorio en GitHub. Desplácese hacia abajo hasta la sección Páginas de GitHub. ✅Paso 7:  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   . Únase a mí y a más de 4000+ desarrolladores de todo el mundo. Hagamos crecer la comunidad Three.JS juntos💪 este increíble curso de Bruno Simon  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 .

YouTube

Subscribe to my YouTube channel

Buy me a cup of coffee

Portfolio

Hire Me

Buy Me a Coffee

Newsletter

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps