Tuto THREE.JS [Javascript]

Подписаться 7 тыс.

Просмотров 24 тыс.

50% 1

Comment créer des jeux vidéo et applications 3D avec THREE.JS.?
Shader, Mesh, animation et génération procédurale, j’explique tout
Démo : github.com/codeurdenuit/DemoT...
00:00 - Intro
00:39 - WebGL
03:25 - Installation
04:10 - Afficher une géométrie
05:41 - Animer une propriété
06:40 - Shader et texture
07:57 - Importer une géométrie
09:16 - Animation morphing
10:29 - Animation skinning
12:21 - Génération procédurale
16:26 - Conclusion
__________________________________________________
Pour me soutenir sur Patreon : / codeurdenuit
Pour soutenir mon projet : ko-fi.com/novelstudio
Discord : / discord
Mon site : www.codeurdenuit.fr
Mon twitter : / codeur_de_nuit
__________________________________________________
Sur cette chaîne, je parle programmation, graphisme, gamedesign. Je partage avec vous mon cheminement, ma progression et mes futurs projets.
Mesh Bibi avant animation et modification : source Antoine Dupuis
Géométrie Iron man : source Darth_Ir0n

Игры

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

1 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@gaelo9930 5 месяцев назад

Ouah incroyable, punaise je ne pensais pas que en france on avait des vidéos de qualités sur le sujet. Tu tombes bien moi qui voulais me lancer pour apprendre des animations pour les sites web

@Code-Base 2 месяца назад

I don't speak a single word in french but, wow, what a tutorial.

@geekmps 2 месяца назад

Bravo, c'est hyper bien expliqué, top référence pour moi. J'ai pris une claque et une bonne leçon.

@stethoscoop 10 месяцев назад

Incroyable, merci beaucoup ! Vraiment, ce tuto arrive pile au moment où j'avais besoin de m'y mettre, ça va me faire une bonne base

@AndersonMancini 7 месяцев назад

Félicitations pour votre travail et pour partager vos connaissances avec la communauté 😊

@skirdo_dev 10 месяцев назад

tu trouve toujours les mots pour nous expliquer tout simplement et clairement c'est se que Jaime chez toi

@cibri_ 10 месяцев назад

Sans doute un des meilleurs youtubeur programmation français. Je ne sais pas pourquoi tu n'as pas encore percé car tu n'as objectivement aucun défaut et que tu pourrais même t'exporter a un public plus large que la programmation étant donné que tu es un très bon communicant !

@baptistecruor9797 10 месяцев назад

si je devait trouver un defaut, ca va trop vite, peut etre mieux separer les infos et leurs arrivé dans la video, que ce soit par un transition imagé par un texte ou autre

@AliasFR- 10 месяцев назад

Encore une vidéo délicieuse, je n'ai jamais touché à threejs et j'ai tout compris. C'était très bien expliqué et illustré. J'aime beaucoup la façon dont tu détailles le code, tu détailles pas à pas comment tu construis ton programme, c'est top !

@Str4ky 10 месяцев назад

C'est incroyable, ça donne envie d'utiliser ThreeJS pour faire des projets toujours plus fou

@ganon4 10 месяцев назад

J'en suis à 3:49, je mets pause pour liker et m'abonner. J'adore le contenu, ta façon d'aborder les détails, d'illustrer tes propos, le montage, le rythme, bref masterclass. Je m'en vais continuer la vidéo et découvrir ta chaine ensuite. Merci beaucoup

@blokche_dev 10 месяцев назад

Clair et limpide. Merci pour ce partage et de jouer avec mon côté nostalgique en utilisant des mesh FFIX et des musiques issues de la franchise 🎮

@robintruvelot573 10 месяцев назад

Super vidéo j’ai jamais essayé three.js mais ca ma donné envie de test des trucs !! Hâte les prochaines vidéos

@i_naaq_i 10 месяцев назад

Vraiment incroyable tes vidéos 👍🏻

@h.l7142 10 месяцев назад

merci pour le montage de ta vidéo ! three.js est intéressant. Jusque là consulter la documentation des technos me fait toujours peur mais tu m'as aidé à débroussailler

@theothergrayson801 10 месяцев назад

Je suis tombé sur la vidéo par hasard. Je suis artiste 3D avec quelques bases de dev, et j'ai réussi à tout suivre facilement. On s'ennuie pas, c'est bien expliqué, et en plus en français ! t'as le potentiel pour percer, continue comme ça !

@alkaouditbabadembele5189 10 месяцев назад

C'est vraiment très génial !!

@onimushab3706 8 месяцев назад

Magnifique ! Une suite ❤

@ardra246 6 месяцев назад

Merci pour cette initiation ! 👍

@StephaneSavona 10 месяцев назад

Superbe vidéo comme d'hab !!

@ciblex5 5 месяцев назад

Ta vidéo est incroyable merci beaucoup tu gère !

@vinception777 9 месяцев назад

C'est très stylé et je suis super content de voir un Français parler de ça :) Comme retour je dirais quand même que pour une première approche la démo sur la génération procédurale devient vite dure, je sais que si je suivais le tuto, ça serait un moment "pas agréable" ou je copie sans "vraiment comprendre", je ne sais pas si c'est bien clair ce que je dis, j'espère que tu vois l'idée, content d'avoir pu voir une première approche en tout cas !

@monsieur_enderman 10 месяцев назад

Tu explique très bien

@GartiProd 9 месяцев назад

Incroyable un grand merci !

@mateo08c 10 месяцев назад

Le retour :DDDD

@HuynhLuong227 9 месяцев назад

thanks for sharing, hope nexttime your make more tutorial with threejs.

@kilboms9989 2 месяца назад

Je t'aime, je lance un projet tout de suite !

@sylvainschellenberger 10 месяцев назад

Chouette vidéo, je connaissais déjà mais j'ai l'impression que les explications sont très claires. Tu parle de shaders juste après les géométrie, mais tu utilises les matériaux de Three.js; je ne conteste pas que les deux sont liés, mais ça peut être intéressant pour les débutants que le matériaux est une couche d'abstraction pour l'implémentation d'un shader et de ces uniforms (texture, matrices diverses, etc.). Je pense qu'une vidéo sur les shaders personnalisés pourrait en effet bien aider à lier ces concepts du GPU que tu introduis en début de vidéo, mais qui sont au final masqué par l'API de Three.js. D'ailleurs la belle animation sur laquelle tu conclus gagnerait sûrement en performance en étant calculée comme un Vertex Shader. Pour illustrer la différence entre calcul sur le CPU et le GPU, j'aime bien la vidéo que NVidia avait fait en partenariat avec Adam Savage.

@justelesnews 10 месяцев назад

merci, très bonne idée de sujet !

@justelesnews 10 месяцев назад

Ca y est, j'ai regardé la vidéo, excellent. Je suis impressionné que tu sois allé aussi loin dans la présentation en seulement 17min tout en restant très clair, bravo ! Une question anecdotique-> à 6:00 tu utilises requestAnimationFrame() au début de la fonction loop or je croyais qu'il fallait le mettre à la fin de la fonction (comme tu le fais d'ailleurs plus loin). Ca fonctionne correctement quand on le met au début ?

@RedaBsr 10 месяцев назад

super vidéo bravo

@369-davian 4 месяца назад

I've descover my new jeday master, not talk french or much english but jajaja look like you're so smart

@qpYliqp 10 месяцев назад

T'es le goat 🙏

@ndekocode 10 месяцев назад

🔥🔥🔥Une playlist complete s'il te plait

@HuynhLuong227 4 месяца назад

Wow amazing tutorial

@Vilebreken 10 месяцев назад

Trop bien

@evildave1277 10 месяцев назад

J'ai découvert aujourd'hui un youtubeur programmation ET qui lit Berserk. En voilà un homme de goût

@wolfgangekoringa3384 10 месяцев назад

je m abonne direct 🙃

@creepsjay 10 месяцев назад

ma nouvelle bible merci pour ça

@Maxxamande 10 месяцев назад

J’y comprends que dalle mais la vidéo est géniale 😊

@codeurdenuit8783 10 месяцев назад

🤣

@enzogireaud5244 10 месяцев назад

Pur banger

@NhaCaboVerdeRemix 10 месяцев назад

Merci 😀

@Gontran_ 10 месяцев назад

Grand merci pour cette vidéo vraiment qualitatif . Possible d'avoir un tuto sur un projet complet ?

@rocramos6091 10 месяцев назад

Superbe vidéo comme souvent sur cette chaîne. Tu me conseillerais quoi comme PC Portable ou ordinateur de bureau pour ne pas avoir de problème avec les rendus graphiques en Three.JS, WEBGL voire l'usage de Blender qui peut être couplé à Three JS s'il te plaît. Merci d'avance pour ta réponse

@vladimirbenzema 10 месяцев назад

excellent

@tfgg1490 7 месяцев назад

Gros et l 'avance de ton projet

@AtlasSprag 10 месяцев назад

@myriamsaidi3234 9 месяцев назад

Woww

@saitokojiro7110 7 месяцев назад

hey pourrais tu expliqué pour afficher du text/page web(où video youtube ) directement sur la scène 3D et qui prend en change également l'occlusion ?

@airtuxxx 10 месяцев назад

Quel BG ! Une question, j'y connais rien en three.js est-ce que il permet de créer des pages web avec de la véritable 3D sans devoir ajouter une extension ou installer quoi que ce soit pour le client ?

@codeurdenuit8783 10 месяцев назад

Yes, WebGL est pris en charge nativement par les navigateurs 😁 www.codeurdenuit.fr/

@isidoremanzala1818 9 месяцев назад

Masta na nga tes vidéos vraiment 🤩 Mais là j’ai une petite (grosse demande à te demander) Peut tu faire un tuto pour générer une planet de façon procedurale Genre Comment générer une sphère Générer les noises perlin Modifié chaque vertices de la sphère pour appliquer les noises perlins

@codeurdenuit8783 9 месяцев назад

Je vois très bien l'idée. Je vais y réfléchir. Par contre, RU-vid, c'est vraiment une activité parallèle pour moi, j'ai beaucoup de vidéos à faire, chacune demande beaucoup de préparation, code, script, montage... Mais j'ai très peu de temps à y consacrer, donc ça ne sera pas tout de suite

@micuit-cuit2 10 месяцев назад

super video, tu peut expliquer le deplacement de la camera ?

@codeurdenuit8783 10 месяцев назад

La camera se déplace de la même façon que les object3D : il faut manipuler la propriété position pour placer la camera et utiliser la méthode lookAt(x,y,z) pour indiquer la zone à cibler. threejs.org/docs/?q=camera#api/en/cameras/PerspectiveCamera. Dans la doc, remonte aux Class mères pour retrouver les props et méthodes disponibles 😉

@micuit-cuit2 10 месяцев назад

merci@@codeurdenuit8783

@mwlulud2995 22 дня назад

Salut tu utilise aussi Threlte.js (Thee.js mais pour svelte) ?

@codeurdenuit8783 19 дней назад

J'ai déjà testé. Mais comme pour RTF, je trouve ca encore moins pratique que threeJS vanilla

@claudetitcho1130 4 месяца назад

pour ma part impossible de charger une image pour faire les textures avec .load() je ne comprend pas pourquoi ça ne fonctionne pas . puis-je t'envoyer mon code et tu pourrais me dire ou est mon erreur j'ai vérifié 10 fois mon code par rapport au tien je ne comprend pas ou je fais pas bien.

@claudetitcho1130 4 месяца назад

j'ai trouvé je pensais que si il était au même endroit que mon js pas besoin de le spécifier mais si dsl

@Wyvern_014 10 месяцев назад

J'adore tes vidéos , je m'abonne, tu crois que tu peux nous faire une formation pour nous apprendre crée des jeux vidéo pour nous qui voulons l'apprendre, je fais du développement web et je m'ennuie c'est pas ma passion, les jeux vidéos sont ce que je veux faire

@claudetitcho1130 4 месяца назад

tu peux me montrer comment tu promizes moi de mon coté malgré plusieurs essais ça ne fonctionne pas (oui je debute ^^)

@SaveCount-bh8tp 2 месяца назад

Es-ce qu'on peut le faire avec electrons

@codeurdenuit8783 2 месяца назад

Yes, j'ai déjà testé. Je compte bien faire un jeu steam un jour avec ça. 😄

@masterlaplace 10 месяцев назад

@anthonyn325 10 месяцев назад

J'ai pas compris comment le sol de la fin était pas un mur en fait...

@codeurdenuit8783 10 месяцев назад

C'est un grille de points sur l'axe X Z, avec une variation de hauteur sur l'axe Y. Mur ou sol, tout dépend de la camera. Toute position est relative au point de vue ;)

@PouIetDeKFC 4 месяца назад

J'ai appris trop de chose en même pas 2m30

@user-pq9rj4hd8q 8 месяцев назад

Je suis dev et jai rien compris, rip

@MrGeekLegend 10 месяцев назад

c'est que moi ou ThreeJS n'a aucun sens je trouve. En terme de logique c'est tellement complexe pour rien je trouve. Il y aurai-t-il autre chose de plus logique ?