Guía Básica De ThreeJS: Dibuja En 3D En El Navegador Con JavaScript - Episodio 1 | GOGODEV

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ม.ค. 2025

ความคิดเห็น • 91

  • @GOGODEV
    @GOGODEV  2 ปีที่แล้ว +10

    ¿Qué otro punto de threeJS os gustaría conocer? Pensando en continuar por intreractividad con orbit controls. ¿Cómo lo veis? 🤔

    • @lautarosilvera8103
      @lautarosilvera8103 2 ปีที่แล้ว +2

      hola muchas gracias por el video¡¡¡, estaría bueno como agregarle interactiva a los objetos (algún ejemplo sencillo seria una caja q cuando aprietes un botón en pantalla se abra). gracias y saludos desde argentina

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว +1

      @@lautarosilvera8103 oído cocina Lautaro! 👍

    • @NachoDacal_ink
      @NachoDacal_ink 2 ปีที่แล้ว

      Hola .. a mi me gustaria poder agregar audio en lo que seria la pagina de web 3 .. gracias

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว +1

      @@NachoDacal_ink Recibido Crypto Music. Para este asunto, prepararemos algún tutorial en concreto dentro de la serie HTML que estamos preparando para el canal 👍.
      Aún así, si te refieres a la serie de cómo crear una dapp, en el capítulo 27 se tratan los player, que por orden creo que le toca salir a principios de la semana que viene.

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      @Jose P Te lo dejo por aquí 👍
      th-cam.com/video/PlXvatQIosk/w-d-xo.html

  • @mariapaulagomezroca5299
    @mariapaulagomezroca5299 ปีที่แล้ว +12

    Es la primera vez que veo algo en 3d y lo entendi perfecto. Gracias. me gustaria profundizar en la libreria Three js

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Muchas gracias María Paula! A por ello!

    • @luissosa8782
      @luissosa8782 6 หลายเดือนก่อน

      th-cam.com/users/shortszBKiS6XoUuA?si=FJwqoV5zyPnTWc3P

  • @aguscorenator
    @aguscorenator ปีที่แล้ว

    Me ha gustado mucho el tutorial. Lo has explicado muy sencillo y claro. Eso no es fácil. Enhorabuena

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Muchas gracias Agustín!

  • @GOGODEV
    @GOGODEV  2 ปีที่แล้ว +6

    Preparando nuevo video de la serie ThreeJS : importación de modelos. 👍

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      @Jose P Desde cualquier software de edición que soporte formatos estandarizados y/o soportados por threejs. Por supuesto, blender es uno de ellos

  • @CarlosGonzalezCgo2000
    @CarlosGonzalezCgo2000 2 ปีที่แล้ว +1

    te has ganado un suscriptor :D muy bien explicado para los que desconocemos esta herramienta

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      ¡Muchas gracias, Carlos!

  • @aventgraficas
    @aventgraficas 2 ปีที่แล้ว +1

    Genial tu vídeo. Seguiré viendo los demás. Espero que tengas más vídeos sobre esto. Es muy interesante. Gracias

  • @raulpineda6832
    @raulpineda6832 2 ปีที่แล้ว +2

    Gracias por compartir tus conocimiento en three js 🔥, quiero empezar a aprenderlo.

  • @davidcode22
    @davidcode22 ปีที่แล้ว +1

    Amigo muchas gracias por el contenido esta increible espero que sigas profundizando y en el futuro cercano cree proyectos maravillosos que con seguridad lo vere, te haz ganado un suscritor

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Muchas gracias David! Ánimo con esos proyectos! 💪

  • @onlinegrowingbusiness
    @onlinegrowingbusiness 2 ปีที่แล้ว

    De lujo la clase, por favor continuar, este canal llegará muy lejos !

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Muchas gracias por el apoyo! Te dejo el enlace a la lista de reproducción completa. Subimos contenido periódicamente 👍
      th-cam.com/play/PLDllzmccetSPVF3JN6OFazp39N00yHE3A.html

  • @mr.fabian8471
    @mr.fabian8471 2 ปีที่แล้ว +1

    brutal contenido master !!!!

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      ¡Muchas gracias Fabián!

  • @renzocervantes7430
    @renzocervantes7430 2 ปีที่แล้ว +3

    Esta bueno three. Aparte hay poco contenido en español

  • @creanimex
    @creanimex ปีที่แล้ว

    Genial, super bien explicadisisisimo Gracias !!!

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว +1

      Gracias por tu apoyo, Humberto!

  • @NachoDacal_ink
    @NachoDacal_ink 2 ปีที่แล้ว

    GRACIAS ES GENIAL ... ESTOY APRENDIENDO MUY BIEN

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Muchas gracias crypto music!

  • @GOGODEV
    @GOGODEV  2 ปีที่แล้ว +1

    Segundo vídeo de threeJS publicado 🎉

  • @CristianWaitzel
    @CristianWaitzel ปีที่แล้ว

    Increíble contenido!

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Muchas gracias!

  • @ignacioconsuegra832
    @ignacioconsuegra832 2 ปีที่แล้ว +1

    Buen video, gracias.

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Gracias Ignacio!

  • @julianvelez6563
    @julianvelez6563 7 หลายเดือนก่อน +4

    amigo no funciona el enlace al codigo de la libreria que podria hacer para poder avanzar muchas gracias

    • @deadlord9914
      @deadlord9914 2 หลายเดือนก่อน

      Bro la forma de implementar three js a cambiado revisa la documentacion ahora se usa simplemente import * as THREE from 'three'; en un archivo js y puedes modificar el codigo directamente

  • @josesousa844
    @josesousa844 2 ปีที่แล้ว

    Excelente contenido.

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Muchas gracias Jose!

  • @estebanpiccardo6765
    @estebanpiccardo6765 2 ปีที่แล้ว +1

    Muy buen video esta genial , me re interesó
    estaría bueno que explicasen como agregarle textura, color y sombra a esos objetos, si existe algunas forma
    Saludos

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว +1

      Claro que sí. Tomo nota Esteban para próximos vídeos de la serie de threeJS. Gracias!

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว +2

      En cuanto al de sombras, ya lo tienes disponible. Es el segundo vídeo de la serie ThreeJS 😉

    • @estebanpiccardo6765
      @estebanpiccardo6765 2 ปีที่แล้ว

      @@GOGODEV ok, muchas gracias
      otra cosa que me preguntaba, es: como puedo hacer para que se mueva el cubo aleatoriamente por toda la pantalla

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      @@estebanpiccardo6765 Hola Esteban, esto puedes hacerlo modificando en la función animate la position.x position.y y position.z del objeto en cuestión, 👍

  • @jesuscastaneda7018
    @jesuscastaneda7018 9 หลายเดือนก่อน

    Buenas mis amigos, son super interesantes videocursos, tengo una pregunta. He tratado de instalar la libreria de PARCEL en VSC pero no lo he logrado parque me dice que esta decontinuado, que puedo hacer, o hay alguna alternativa, gracias por compartir sus conocimientos, saludos.

  • @raulrojas6552
    @raulrojas6552 2 ปีที่แล้ว +1

    no se si es facil o lo has explicado muy bien o las 2, como sea, muchas gracias

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      ¡Muchas gracias Raúl! Eso es que se te da bien :)

  • @brawnie3969
    @brawnie3969 ปีที่แล้ว

    Gracias por este video

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Gracias a ti por verlo!

  • @AlejandroSoftware
    @AlejandroSoftware ปีที่แล้ว

    Me gustaria saber como se puede importar, es decir, haciendo uso del npm i three y ya que funciones. Mi propósito es hacer un cliente/servidor y que el cliente utilice threejs

  • @enriqueruiz320
    @enriqueruiz320 ปีที่แล้ว

    😍

  • @justosotomanrique2581
    @justosotomanrique2581 2 ปีที่แล้ว

    Genial, muchas gracias

  • @anonimophilosofer4215
    @anonimophilosofer4215 2 ปีที่แล้ว

    Gracias amigo.

  • @kiriku-r6f
    @kiriku-r6f 5 หลายเดือนก่อน +1

    Amigo, a mi no me aparece y ya hice todo lo que esta en el video, y no se si es el código que se actualizo pero necesito ayuda

    • @alejandrobmx9
      @alejandrobmx9 4 หลายเดือนก่อน

      a mi tampoco me aparece deja ingresar al link three.js.org/build/three.js y no puedo continuar el tutorial

  • @anonymushadow282
    @anonymushadow282 2 ปีที่แล้ว

    genial, yo creia que estas cosa se hacian en canvas

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      En el caso de ThreeJS, usa webGL :)

  • @eduardopozos5022
    @eduardopozos5022 ปีที่แล้ว

    No logro acceder a la base para hacer lo primero que hiciste three js

  • @Aron-axr
    @Aron-axr 2 ปีที่แล้ว

    Gracias.

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Gracias por verlo!

  • @hugocota6054
    @hugocota6054 2 ปีที่แล้ว +1

    muchas gracias GOGODEV por compartir tan valioso video, a mi me aparece la pantalla en blanco y al inspeccionar me dice : A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced., gracias de antemano.

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Hola Hugo! Si puedes envíame lo desarrollado en un zip a jjruiz@gogodev.net y le echo un ojo. Un abrazo!

  • @dagacotowaru4456
    @dagacotowaru4456 ปีที่แล้ว

    me sale la pantalla negra pero el cubo me sale super delgado como una linea



    Document


    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth, window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;
    function animate() {
    requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    }
    animate();

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว +1

      Hola buenas!
      El error está en la perspective camera, que el ratio no se ha especificado correctamente. En lugar de width / heigth, has especificado width, height.
      La solución sería:
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      En lugar de:
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth, window.innerHeight, 0.1, 1000);
      Un abrazo!

  • @axelmedina8834
    @axelmedina8834 ปีที่แล้ว

    Escribi todo el codigo correctamente pero no se me genero el canvas y por ende cree una pagina en blanco, que puedo hacer?

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Hola Axel! Envíame un enlace al repo para que pueda echarle un ojo. Si inspeccionamos la consola del navegador probablemente haya algún mensaje de error de qué puede estar sucediendo.

  • @maincode12-gw8lk
    @maincode12-gw8lk 8 หลายเดือนก่อน +1

    El link que pones en la descripción me sale 404

  • @carlosreyna8944
    @carlosreyna8944 5 หลายเดือนก่อน +1

    amigo no funciona el enlace al codigo de la libreria me podrias ayudar porfa

    • @alejandrobmx9
      @alejandrobmx9 4 หลายเดือนก่อน

      a mi tampoco me aparece deja ingresar al link three.js.org/build/three.js y no puedo continuar el tutorial

  • @victorm.a.e.9803
    @victorm.a.e.9803 9 หลายเดือนก่อน

    El ink de la librería ya no existe, podrán compartirme el vigente de favor?

  • @pablohumbertoarriolaagudel2908
    @pablohumbertoarriolaagudel2908 2 ปีที่แล้ว

    GOGODEV muy buen video. Si, me gustaría trabajar un avatar de forma humana hablando, luego callando mientras el usuario ingresa información y luego el avatar respondiendo. Gracias

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Hola Pablo! Una propuesta muy interesante. En el próximo vídeo de la serie estaremos viendo cómo importar modelos, que sería el siguiente paso para construir tu avatar con threejs
      Muchas gracias por tu apoyo!

  •  6 หลายเดือนก่อน

    El link esta caido :/

  • @NUJAANKI
    @NUJAANKI 11 หลายเดือนก่อน

    a mi el node no me funciona me da error

  • @franciscomiranda3239
    @franciscomiranda3239 5 หลายเดือนก่อน +1

    Compartir archivos please

    • @alejandrobmx9
      @alejandrobmx9 4 หลายเดือนก่อน

      a mi tampoco me aparece deja ingresar al link three.js.org/build/three.js y no puedo continuar el tutorial

  • @peepez1
    @peepez1 ปีที่แล้ว

    No me crea el canvas

    • @GOGODEV
      @GOGODEV  ปีที่แล้ว

      Hola! Puedes indicarme qué error genera para poder ayudarte?

  • @Agua.Fiestas
    @Agua.Fiestas 8 หลายเดือนก่อน +1

    la música es bastante molesta y estresa

    • @Jeanne_airmax
      @Jeanne_airmax 5 หลายเดือนก่อน

      y encima habla lento

  • @aqua4790
    @aqua4790 10 หลายเดือนก่อน

    la musica molesta bastante

  • @trert065
    @trert065 2 ปีที่แล้ว

    a alguien mas se salió un rectángulo o solo a mi :'v?

    • @GOGODEV
      @GOGODEV  2 ปีที่แล้ว

      Jeje. No te preocupes Erick. Si compartes el código en un repositorio le echo un ojo y vemos el porqué.