Тёмный

Cómo Hacer una Web 3D: 5 Métodos Fáciles (Con CSS, HTML y JS) 

Diego Castaño
Подписаться 24 тыс.
Просмотров 31 тыс.
50% 1

¿Quieres añadir elementos 3D a tu web? Descubre 5 maneras de conseguirlo usando CSS, HTML y JS. Además explicaré cada una de estas técnicas con ejemplos y hablaré de sus ventajas y desventajas.
Web 3D de Citibox (usa vídeo como fondo)
citibox.com/
Tutorial en inglés sobre animaciones 3D básicas con CSS
3dtransforms.desandro.com/car...
Demo del web component model-viewer de Google
model-viewer.glitch.me/
Buscador de modelos 3D
sketchfab.com
Guía oficial del framework A-Frame
aframe.io/
Guía oficial de Three.js
threejs.org/
___
❇️Vídeos, experimentos y tienda oficial ❇️
👉 www.webpunk.dev
___
✊ ¡Suscríbete al canal!
ru-vid.com?sub_co...
___
🤘😬 ¡Sígueme en redes!
Instagram: / webpunk.dev
Facebook: / webpunk.dev
Twitter: / webpunkdev
Twitch: / webpunkdev
___
Música sampleada en el vídeo
🎵 Introducción
Teching - Los Piratas
open.spotify.com/track/0QKNoJ...
🎵 Final
Interludio Breakmecanix - Toteking y Shotta
open.spotify.com/track/40Jaca...

Наука

Опубликовано:

 

25 авг 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 46   
@webpunkdev
@webpunkdev 5 лет назад
¿Quieres añadir elementos 3D a tu web? Descubre 5 maneras de conseguirlo usando CSS, HTML y JS. Además explicaré cada una de estas técnicas con ejemplos y hablaré de sus ventajas y desventajas.
@rogerespiriturojas
@rogerespiriturojas 2 года назад
Mil gracias por tu video, eres lo máximo, por favor sigue subiendo contenido saludos desde Perú.
@rafaelferrufino9085
@rafaelferrufino9085 3 года назад
Gracias por una exposicion tan clara
@dianamarializcanocastillo581
@dianamarializcanocastillo581 2 года назад
Muchas Gracias por compartir tú conocimiento un abrazo desde Colombia.
@rottweilercraft8115
@rottweilercraft8115 9 месяцев назад
Este video me dio un conocimiento brutal!
@MiguelLopez-ps3nx
@MiguelLopez-ps3nx 2 года назад
Muy interesante. Gracias
@socialdata3918
@socialdata3918 4 года назад
Muy buen video!
@IAVIC
@IAVIC 4 года назад
Muy interesante
@trucosweb2793
@trucosweb2793 4 года назад
MADURASTE MONTON UN SALUDO
@digitalinnout
@digitalinnout 4 года назад
me encanto el video con todos estos tips, muchas gracias..
@webpunkdev
@webpunkdev 4 года назад
Gracias a ti, salá!
@oscardariorendonzuluaga1318
@oscardariorendonzuluaga1318 11 месяцев назад
Genial
@sheidyyilmararamirezdaza7919
@sheidyyilmararamirezdaza7919 2 года назад
Tengo que crear un pagina web html interactiva en 3D ya tengo las 3D hechas de belnder, quiero saber que tipo de formato extension (stl obj etc) me permite cargar, como hacerlo y como hago que estos giren y se pueda acercarse etc, agradeceria la ayuda
@marcosramos8827
@marcosramos8827 3 года назад
Me encanto el video , gracias! por si acaso no sabes o no tienes por ahi otro video acerca de como se realiza las paginas super dinamicas o interactivas? donde con el mouse over suceden animaciones, o cambian figuras y formas o dibujas formas... gracias de antemano
@davidchavarriamendez9091
@davidchavarriamendez9091 2 года назад
Es con la última tecnología que menciona: Threejs hace eso
@artesanotecnologico5691
@artesanotecnologico5691 Год назад
Genial, sera que se pude poner botones con enlaces a otras paginas?
@juansebastiancabraleon4604
@juansebastiancabraleon4604 3 года назад
nuevo suscriptor
@webpunkdev
@webpunkdev 3 года назад
Bienvenido! 😉
@world_of_ozi
@world_of_ozi 3 года назад
Pregunta Es posible crear animaciones y modelos 3d en blender y moverlo a paguina web con three js? O todo el modelado y animación tiene que crearse desde three?
@webpunkdev
@webpunkdev 3 года назад
Parece que el formato gltf sí lo sorporta, checkea esta respuesta: blender.stackexchange.com/questions/119145/export-a-keyframed-animation-made-in-blender-to-three-js-no-bones-involved
@linalarrearodriguez3440
@linalarrearodriguez3440 2 года назад
Wow. Muchos los conocía, a excepción de A-Frame y View Frame. Tengo una duda: Si dominas (más o menos) ThreeJs, ¿recomendaría utilizar A-Frame o no?
@webpunkdev
@webpunkdev 2 года назад
A-frame solo lo recomiendo para cosas que tengan realidad aumentada (no solo VR). Para todo lo demás es casi más práctico usar directamente ThreeJS (o react-three-fiber si usas react)
@MsMixander
@MsMixander 4 года назад
Revisé páginas en three js y son de otro nivel, con efecto wow.. No se si la pueda ocupar.. Algún tuto de three js???
@webpunkdev
@webpunkdev 3 года назад
Me lo pienso... 😀
@gabrielisidroskate9397
@gabrielisidroskate9397 4 года назад
PREGUNTA existiría alguna forma de crear mis modelos 3D usando solid works para luego ser utilizados en una página web donde el usuario pueda ver la pieza y rotarla para observarla?
@webpunkdev
@webpunkdev 4 года назад
Claro! El web component está pensado justo para eso!
@sheidyyilmararamirezdaza7919
@sheidyyilmararamirezdaza7919 2 года назад
@@webpunkdev tienes un video de como se utiliza? Yo tengo que para proyecto de grado cargar modelados 3D de ese modo pero no los e podido cargar, me podrias dar recomendaciones o si ya hiciste un video de esto
@videoscurriculumvitae2154
@videoscurriculumvitae2154 Год назад
Muchas gracias por el Vídeo. Me pregunto si lo que crees con "A Frame" se podrá optimizar para Wordpress?
@webpunkdev
@webpunkdev Год назад
Debería funcionar independientemente del backend, sí
@josias3
@josias3 3 года назад
Siento que una de esas cajas me va a pillar un ojo
@webpunkdev
@webpunkdev 3 года назад
Jajajajaja por si acaso ponte gafas
@paoalcaraz3642
@paoalcaraz3642 Год назад
Esto mismo se puede poner pero de forma que el espectador lo pueda manipular?
@webpunkdev
@webpunkdev Год назад
Por supuesto! Con React Three Fiber es bastante sencillo añadir event handlers para implementar interacciones con el mouse o pantalla táctil
@feralonmu
@feralonmu 2 года назад
13:21 :) jajajaja
@juancarlosmontanoalvarez4443
@juancarlosmontanoalvarez4443 2 года назад
COMENTARIO PARA EL ALGORITMO
@webpunkdev
@webpunkdev 2 года назад
Gracias por contribuir a domar al algoritmo, Juan. Se aprecia el detalle 😘
@geodatacenter
@geodatacenter 2 месяца назад
Que rs abstraccion??
@webpunkdev
@webpunkdev 2 месяца назад
En este contexto, es algo que te oculta los detalles de implementación, es más sencillo de utilizar y te ayuda a no lidiar con tareas muy técnicas.
@ricardoalbertogg3654
@ricardoalbertogg3654 4 года назад
¿Más vídeos?
@webpunkdev
@webpunkdev 4 года назад
Más vídeos :)
@yersoncrespo6057
@yersoncrespo6057 4 года назад
Porque susurra? xd
@webpunkdev
@webpunkdev 4 года назад
Se llama ASMR 😴
@riossolisnormaveronica1086
@riossolisnormaveronica1086 3 года назад
Ñ)ñ
@marczlong9382
@marczlong9382 3 года назад
hablando de música molesta de fondo...
@webpunkdev
@webpunkdev 3 года назад
Qué música te gusta, Marcz
Далее
Sitios Web Asombrosos
23:02
Просмотров 675 тыс.
Викторина от МАМЫ 🆘 | WICSUR #shorts
00:58
Adding a 3D model to a website using THREE.JS
5:55
Просмотров 142 тыс.
How to create 3D Website Designs With No Code
4:24
Просмотров 522 тыс.
How I gave free WiFi using Fake Pidgeons
12:46
OPTIMIZAR imágenes para Página WEB 🚀
31:05
Просмотров 40 тыс.
iPhone 16 - 20+ КРУТЫХ ИЗМЕНЕНИЙ
5:20