|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/uso-de-threejs-para-elaborar-paginas-web-dinamicas/
课程评论：没有评论
# Three.js 动态网页制作课程总结 本课程是一份全面的指南，旨在教授如何使用 Three.js 库在 Web 应用中创建令人惊叹的 3D 图形和交互式体验。 **课程内容概览：** * **Three.js 库安装与加载：** 学习如何在项目中安装和配置 Three.js，并将其加载到你的项目中。 * **项目模板与主面板：** 设计和开发一个主菜单，用于导航不同的 3D 图形示例。创建 Three.js 练习的基础模板。 * **基础几何图形加载：** 使用 Three.js 提供的基本几何体（如 BoxGeometry, SphereGeometry, PlaneGeometry）创建 3D 对象。 * **3D 图片加载与纹理应用：** 学习如何应用纹理到 3D 对象上，以提升真实感和视觉效果。 * **GLB 文件加载：** 掌握如何加载包含几何体、材质和纹理的 GLB 格式 3D 模型。 * **带动画的 GLB 文件加载：** 学习加载和播放 3D 模型中的动画，并控制和同步动画以创建令人印象深刻的视觉效果。 * **360 度图像（JPG/PNG/HDR）加载：** 探索如何为场景添加 skybox，通过环绕纹理模拟 3D 环境，增强沉浸感。 * **视频纹理加载：** 学习将视频作为纹理应用到 3D 对象上，创建动态视觉效果。 * **CSS3DRenderer 集成 iFrames：** 发现如何在 Three.js 应用中集成 iFrames，将网页内容嵌入到 3D 场景中。 * **OrbitControls 的使用：** 掌握 OrbitControls，实现通过拖拽、缩放等交互方式从不同角度浏览 3D 对象。 * **Raycaster 的使用：** 学习使用 Raycaster 实现与 3D 对象交互，例如在点击对象时触发事件或显示信息。 * **综合应用：** 将所学概念和技术整合，创建一个包含对象、纹理、动画和交互功能的完整 3D 场景。 * **导出与部署：** 学习导出 Three.js 练习，并将其部署到 Web 服务器以供在线访问和分享。 **额外内容：** * **Three.js 在 Angular 项目中的应用：** 学习如何在 Angular 应用中集成 Three.js，并充分利用其在框架内的能力。 本课程将为你打下坚实的基础，帮助你利用 Three.js 这一强大的 Web 3D 内容创作库，创建出色的 3D 图形和交互式体验。
El curso de Three.js es una guía completa que te enseñará a utilizar la biblioteca Three.js para crear impresionantes gráficos y experiencias interactivas en 3D en aplicaciones web. A continuación, se describe cada punto del curso:Instalación de la librería Three.js: Aprenderás cómo instalar Three.js en tu proyecto y configurar el entorno de desarrollo para comenzar a trabajar con la biblioteca.Cargar la librería Three.js en nuestro proyecto: Aprenderás a importar y utilizar la librería Three.js en tu proyecto, de modo que puedas acceder a todas las funciones y utilidades que proporciona.Crear una plantilla y un panel principal para desarrollar nuestros ejercicios: Aprenderás a diseñar y desarrollar un menú principal que te permitirá navegar por diferentes ejemplos y demostraciones de gráficos en 3D. También crearás una plantilla básica para tus ejercicios en Three.js.Cargar figuras geométricas básicas: Explorarás cómo utilizar las geometrías básicas proporcionadas por Three.js, como cajas (BoxGeometry), esferas (SphereGeometry) y planos (PlaneGeometry), para crear objetos en 3D.Cargar imágenes 3D para usarlo como texturas en nuestros modelados 3D: Aprenderás a aplicar texturas a los objetos en 3D para darles aspecto realista y mejorar su apariencia visual.Carga archivos GLBs en nuestro proyecto: Descubrirás cómo cargar modelos en formato GLB en tus proyectos de Three.js. Los archivos GLB son archivos de modelo 3D que contienen geometría, materiales y texturas.Cargar archivos GLB con animaciones: Aprenderás a cargar y reproducir animaciones en tus modelos 3D utilizando la animación de Three.js. Podrás controlar y sincronizar las animaciones para crear efectos visuales impresionantes.Carga imágenes 360 en jpg/png y en HDR: Explorarás cómo agregar un skybox a tu escena en Three.js. Un skybox es una técnica que utiliza una textura envolvente para simular un entorno tridimensional y mejorar la inmersión visual.Cargar videos y usarlo como texturas en nuestros objetos 3D: Aprenderás a incorporar videos en tus proyectos de Three.js. Podrás crear texturas de video y aplicarlas a objetos en 3D para crear efectos visuales dinámicos.Cargar iframes con el componente CSS3DRenderer: Descubrirás cómo integrar iframes en tus aplicaciones de Three.js. Esto te permitirá mostrar contenido web, como páginas HTML o contenido incrustado, dentro de tu escena 3D.Uso de OrbitControls para visualizar objetos 3D desde diferentes ángulos: Aprenderás a utilizar la funcionalidad de OrbitControls de Three.js, que te permitirá controlar la cámara y explorar la escena en 3D mediante interacciones de arrastrar y soltar o acercar y alejar.Uso de Raycaster para interactuar con los objetos 3D y brindarles eventos: Explorarás cómo utilizar Raycast para detectar interacciones con objetos en tu escena 3D. Podrás realizar acciones o mostrar información específica al hacer clic en un objeto.Creación de una escena 3D con lo aprendido: Aplicarás todos los conceptos y técnicas aprendidas para crear un entorno 3D completo, que incluya objetos, texturas, animaciones y funcionalidades interactivas.Exportar y desplegar los ejercicios en nuestra servidor web: Aprenderás cómo exportar tus ejercicios de Three.js y desplegarlos en un servidor web para que puedan ser accesibles y compartidos en línea.Extra: Además de los puntos anteriores, también se incluirá una sección adicional sobre cómo cargar Three.js en un proyecto de Angular, donde aprenderás a integrar Three.js en una aplicación Angular y aprovechar todas sus capacidades dentro del marco de trabajo.Este curso te brindará una base sólida para crear gráficos en 3D impresionantes y experiencias interactivas utilizando Three.js, una de las bibliotecas más populares y potentes para la creación de contenido 3D en la web.
