3D Welt programmieren mit JavaScript (Three.js Tutorial)
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2024
- Kostenloses Beratungsgespräch: weiterbildung....
In diesem Tutorial lernst du, wie du eine 3D-Welt erschaffst mit JavaScript. Hierfür verwenden wir die Library Tree.js.
Javascript-Dateien:
import * as THREE from 'cdn.jsdelivr.n...
import { GLTFLoader } from 'cdn.jsdelivr.n...
import { OrbitControls } from 'cdn.jsdelivr.n...
VS Code im Webbrowser: vscode.dev/
Skybox: opengameart.or...
Character laden: sketchfab.com/...
Mixamo
poly.google.com
Fertiger code:
github.com/Jun...
Webseite testen: junusergin.git...
Instagram: / junus.ergin (Junus Ergin)
Tiktok: / herr_programmierer (Herr Programmierer)
____ Über diesen Kanal ___
Die Developer Akademie bildet dich zum Programmierer weiter. Auch wenn du noch NIE eine Zeile Code geschrieben hast, ist es möglich in 3 - 6 Monaten einen gut bezahlten Job zu finden. Dafür musst du NICHT nur programmieren mit Online-Tutorials lernen, sondern einen guten LEBENSLAUF mit vielen verschiedenen Projekten vorweisen. In unserem Programm hast du ständigen Kontakt zu unseren Coaches, Hausaufgaben, Abgabefristen und Projekte aus der Praxis für deinen Lebenslauf.
Am Ende erstellen wir mit dir einen perfekten Lebenslauf und unterstützen dich bei deiner Bewerbung.
Informiere dich auf weiterbildung....
du gibst mir die ersten 2 minuten einfach krasse motivation um einmal das Programmieren auszuprobieren und irgendwann mal ein großes Projekt starten zu wollen
Das Projekt ist mega cool bitte mach einen Teil 2
Wie immer ein Klasse Video, vielen Dank! Ein 2. Teil mit einem Spiel wäre super 🤩 👍🏻
ich bin react 3D developer für 2 jahre
und ich hab dein video zufall heute angeschaut du bist echt der bester der über three.js erzählt hat es war ganz easy good job und viel erfolg
Jedes Video ist eine Bombe. Vielen Dank 🤩. Ich werde mich auf Teil 2 voll freuen.
Wieder sehr interessant, ein 2. Teil wäre super ;-)
Super Video, herzlichen Dank. Ja bitte, ein Teil 2 mit einem Spiel wäre großartig 🙂
Ist in Arbeit :-)
@@Programmierenlernen Das sind fantastische Nachrichten, ich freue mich darauf, herzlichen Dank 😍
Sehr cool. Würde mich über mehrere Teile freuen!! Hab schon alle Tutorials von dir gemacht :D
TOP VIDEO, wie immer. Ich würde mich gerne auf einen Part 2 freuen.
Liebe Grüsse aus Bern (Schweiz)
Sehr cool, ja, mach bitte einen Zweiten Teil 😊
Wie immer Top & sehr empfehlenswert! Auf einen 2ten Teil würde ich mich auf jedenfall freuen. :)
Wie immer richtig cool, ja bitte 2. Teil machen 😊
Hi Yunus, Danke für tolles Video. Ich interessiere mich für zweiten Teil natürlich 😀😀😀
Ist in Arbeit
@@Programmierenlernen geil!!
Wirklich ein klasse Tutorial. Ich würde mich sehr über einen 2 Teil freuen. Vielleicht wirklich ein Spiel wo man etwas ausweichen muss.
Ansonsten, einfach weiter so :-)
Für mich ist der Würfel absolut grün ;) Vielen Dank für das Tutorial!
Super Tutorial muss ich sagen und was für ein Zufall mit dieser library wollte ich ohnehin als nächstes arbeiten
Super Video 😁😁😁
Hab jedes Tutorial von dir gemacht
Vielen Dank Junus, das mach Spaß auf mehr….schön wäre wenn sich die drone durch den Würfel bewegen würde :D
Schön wie Du Grün immer als Gelb bezeichnest. 😃
haha. Es gibt einen guten Grund dafür :-)
Sehr gutes Video, ein 2.Teil wäre super.
Echt cool, aber ich bleib erstmal bei 2D. :D Alles was "cool" wäre, würde mein Ersatzrechner auch gar nicht packen. Weiter so! Du bist echt verdammt gut im erklären! :) grüße aus SH
Danke für das Video habe lange auf noch ein JS Tutorial gewartet.
es kommt noch viel JS
genau danach habe ich gesucht, bitte mehr davon bitte
Tolles Video gerne einen 2. Teil
Super Idee mit dem Spiel. Kann auch eine SF Umgebung werden.
Bitte mehr von sowas!
Bitte ein Teil 2 !
Schönes Video, angenehm erklärt, danke
Das ist echt Tool
Ich freue mich sehr auf zweite Teil
Ich möchte unbedingt programieren lernen da ich denke das ich sehr gut darin bin obwohl ich noch nie programmiert habe. Aber ich habe sehr viele Fragen und finden die meisten Antworten nicht. Deine Videos sind sehr cool und informativ du sprichst nicht viel um den heißen Brei sondern nur wichtiges. Kannst du mir irgendwas empfehlen wo ich alle Antworten finden kann natürlich kostenlos :)
Super Video, bitte teil 2. :-)
Interessantes Tutorial und eine gute Einführung. Leider ist es auch hier wie in sehr vielen Tutorials so, dass die Sachen nicht ohne Weiteres so funktionieren, auch wenn man alles genau so macht.
Kriege z.B. die Drone nicht geladen. Habe dann das Script von Github downgeladen, aber das unterscheidet sich vom Tutorial doch ziemlich und sowohl hier als auch auf der "Webseite testen" funktioniert das Programm nicht ganz: Die Drone lässt sich nicht bewegen oder in die Szene schieben. Die treesjs-Seite könnte auch gut ein paar Beispiele mehr vertragen. Z.B. wie man eine Textur auf den Boden bekommt ... Man fühlt sich dort etwas hängen gelassen, weil zu wenig erklärt wird, wie man die Befehle anwendet.
bekommst den Ritterschlag von mir...
für Anfänger wie mich ist das am Verständlichsten bestens Erklärt
unbezahlbar.. Mfg
Danke Dir für das Tolle Video,hast es wieder Super gemacht .
Alter ist das Kompliziert 😂 wer hat denn darauf Bock
Hay ich heiße Milan. Ich bin 8 Jahre alt und deine tutorials sind die besten aller Zeiten aber einen 2 Teil wäre cool wo du frei auf der Welt rum laufen kannst
Hallo Junus, tolles Tutorial. Mich würde ein 2. Teil gefallen. Ich habe nur ein Hinweis RGB steht für red green blue, so dass #00ff00 nicht gelb ist sondern grün.
ja mach auf jeden fall einen 2. Teil! mit Texturierung und Kollision detection!
Teil 2 bitte ;)
teil 2 wäre absolut geil würde ich fühlen junus
Super Video, danke Junus.
Sehr gerne!
Wie kann ich die Datei im Browser öffnen wenn ich fertig programmiert habe ?
Super Video, vielen Dank 👍🏻
muss man sich alle Worter merken
Danke für das Tutorial👍 Eine kurze Frage: Was sollte man zuerst lernen bzw. was lohnt sich mehr; Java oder Javascript?
Wenn du ein kompletter Anfänger bist dan eher JavaScript
@@hiji8108 Danke
generell rate ich Quereinsteigern von Java ab
vielen Dank für die Auskunft
Bitte mach mal so räume und solche Deko Möbelstücke die man auch in den Raum platzieren kann und Avatar mit dem man in der Welt laufen kann und wie man Treppen erstellen kann 😊
Servus, hast du eigentlich einen DC Server, auf dem man Fragen stellen kann oder Projekte und Probleme mit andern besprechen kann? 😅👍
Hi Junus
Kannst du mal bitte zeigen wie man ein login/register System coden kann oder eher gesagt ein funktionierendes ACC-System denn ich sitze gerade an einer geteilten Einkaufs-liste und komme nicht ganz weiter
Am Rande .... du machst das echt gut und ich habe nur durch dich bisschen coden gelernt....danke
LG
const sind keine Variablen, sondern Konstanten (bzw. konstante Variablen in JS). Ich will nicht päpstlicher sein als der Papst, aber das ist ein ziemlich wesentlicher Unterschied - vor allem für Anfänger, die auch was über den Scope und Unterschied Konstante/Variable lernen sollten - sonst gibts später viel Frust. Ah, später gehst du in einem Nebensatz zumindest auf den Unterschied (nicht jedoch den Scope) ein.
RGB ist RedGreenBlue, wie schon jemand sagte. Dass du die Farbe vllt nicht erkennen kannst hat ja nun nichts damit zu tun, dass man das additive Farbmodell kennen sollte als WebDeveloper. ;-)
Bei 20:00 fügst du nicht den Renderer hinzu, sondern referenzierst ihn.
Abgesehen von so ein paar Ungenauigkeiten ein cooles Anfänger-Tutorial. Und selbst als Angular-Developer kriegt man einen schnellen Überblick über das Framework.
hallo ich habe alles so gemacht wie im Video gezeigt jedoch muste ich leider alle drei import selbst abschreiben (komplet gleich wie im video gezeigt) da sie sich bei mir nur mit einer fehlermeldung öfneten. der Grüne bloch von oben ist bei mir leider auch nur ein weißer bildschirm. Wie auch immer hab nicht weiter gearbeitet und es mit einem Anderen projekt erfolkreich versucht. Trotzdem hat mir das Video gefallen.
Hey, bitte Teil 2 machen :) ein kleines online RPG mit Kampf-Elementen bitte :D
Nice ist gerade meine Jahresarbeit !)
Gerne mehr davon.
Deine Videos , helfen mir immer , würde es aber cool finden ,wenn du auch Beratunggespräche ab 13 machst 😥.
Danke Junus ✔
hi Junus! ich versuche gerade dieses Spiel nachzumachen, allerdings laden bei mir die hintergrundtexturen nicht. ich habe alle genau so gemacht wie du es erklärt hast, aber es funktioniert einfach nicht.. hättest du eine idee warum?
okay ich habe es jetzt doch lösen können habe aber dadurch eine frage: ich habe die index.html datei in einen html order getan, und die js datei is einen js order. Ich habe alles eigentlich korrekt verlinkt aber als ich die order gerade gelöscht habe und die js datei neu mit der html datei verlinkt habe hat es plötzlich funktioniert und ich verstehe nicht ganz wieso.
Tolles Video. Würde mich auf einen zweiten Teil freuen. Mir ist aufgefallen, das sich der Robot nicht bewegen lässt. Wenn ich deine Funktion onDocumentKeyDown auf den cube umstelle lässt dieser sich bewegen.
Bitte mach einen zweiten Teil, das hat Spaß gemacht. Du erklärst sehr gut und die Tutorials machen das Üben mit JavaScript angenehm.
Übrigens, die Links für die JS Datein 9:30 funktionieren nicht... MfG
Ab wann kann man euer Beratungsgespräch machen? Das jüngste das man angeben kann ist 18
Klasse Video! Bitte einen zweiten Teil. Aber ein wenig Kritik - wie kommst du immer auf Gelb? RGB heißt Rot, Grün, Blau und der Hex-Code 00FF00 definiert somit die Farbe Grün (was dein Browser auch richtig anzeigt).
Danke erstmal. Zu deiner Frage, erlaube mir eine Gegenfrage: schon mal was von rot-grün-Schwäche gehört?
Ist es möglich diese 3D Welt als HTML in eine Webseite einzubinden? Lg
Tolles Video unbedigt brauche ich den Teil zwei weil mich das super fasziniert hat. Leider bin ich noch am anfang von Programieren desshalb kapiere ich das schwer. Ein weiteres Problem das ich hatte war das mein Live Server nicht functioniert.
Ich kann die Java Script import links öffnen aber da sthet dann nur Couldn't find the requested file /build/three.module.js'; in three.
15:50 verarsch mich nicht, der würfel ist doch grün?
haha gut aufgepasst
danke für das Tutorial. Versuche dein Modell durch andere Modelle auszutauschen, werden die aber nicht dargestellt error
GLTFLoader.js:130:14)
Es ist bei mir generell problematisch wenn ich in einem existierendem Projekt ein zu ladendes Modell öffne, irgendwas darin mache und wieder exportiere -> wird nichts geladen egal ob ich über Blender, Cinema oder Houdini für den Export nutze
Bei minute 20:00 komme ich nicht weiter, mein Hintergrund wird aus irgendeinem Grund nicht übernommen, ich habe das video jetzt 3 mal bis zu dieser stelle angeschaut und habe trotzdem einen schwarzen Hintergrund, meine ordner und alles heißen alle wie bei dir, habe sogar den selben hintergrund ausgewählt. Bitte um Hilfe
bei mir funktioniert der gltf loader nd bzw die drohne kommt iwi nd zum vorschein. hab jz alles nochmal abgesucht und das tutotial noch mal neu gestartet aber da tut sich nichts
Ich habe jetzt schon öfters gefragt aber leider nie eine Antwort bekommen, warum schaut mein Standard html Code nicht so aus wie in deinen Videos ?
Document
Imports in Beschreibung werden abgekürzt & sind daher leider unbrauchbar.
Ich habe es versucht, es geht leider nicht.
Mein Projekt erfordert es dass ich über (echo "start();";) die Funktion start();.
Diese wurde jedoch nicht gefunden. Mit BabylonJS und "type="text/javascript"" geht es.
Bei mir will der Würfel nicht erscheinen und ich kann meinen Fehler nicht entdecken. Ich bitte um Tipps....
Hab das gleiche Problem
Bei mir war der Würfel da bis ich den background gemacht habe jetzt ist es einfach nur wieder schwarz
Mega interessant...
Ich habe eine Frage und zwar habe ich das Video „HTML und CSS Tutorial für Anfänger | Eigene Webseite erstellen“ geschaut und hab gemerkt das Bild geht bei mir nicht auf also das bild wird nicht angezeigt bei Chrome. Ich hab auch alles genau so gemacht wie im Video, bei der Rechtschreibung habe ich auch keinen Fehler vielleicht könnten Sie mir ja helfen :)
Ich kann dir auch gerne helfen aber dazu bräuchte man ein Bild vom Code um zu sehen was falsch ist
@@jonas-werner wäre ganz nett wenn du Insta hast könnte ich dir ein Bild schicken :)
@@dilaraterzieva6567 Jo gerne heiße dort wallnussjonas
Ich weiß nicht was er im Video gesagt hat, aber öffne einfach mal ein neues Browser Fenster und nimm die index.html Datei neben deinem Code stehend und zieh sie per drag and drop in das die Adresszeile. Bei mir geht das, hab zwar Brave aber der basiert auch auf Chrome.
Du musst dir das Bild runterladen und in dein Verzeichnis packen oder die Bildadresse kopieren und in deinen Code einfügen
Ja, unbedingt Teil 2…. Vielleicht mit #C ?!
Geht das auch ohne Browser in einer App oder so??
Muss ich auf jeden Fall mal testen aber die Frage ist wie gut die Performance ist bei Webanwendugen bin ich immer skeptisch vor allem 3D haha
Verwendet man für Spiele, besonders für 3D Spiele nicht eher eine Game Engine wie z. B. Unity? Damit geht sowas doch viel leichter und schneller🤔
Das kommt drauf an. Eine Engine wie Unity umfasst viele Systeme die man braucht um ein Spiel herzustellen. Soweit ich weiß ist three.js eine Wrapperbibliothek um WebGL, die einige Features wie Animationen, Kamerasteuerung, etc. mit liefert.
Du kannst also three.js benutzen um deine eigene Engine zu bauen und darauf dann dein Spiel basieren.
Was ist das für ein Spiel bei 0:29 würde sowas ähnliches auch gerne mal programmieren
Wäre cool wenn du noch ein Video zum Three js Loading Manager machen würdest.
Für den Einstieg ganz nett, obwohl das wohl eher Richtung 3D Artist geht. Maya, Blender und die neue Unreal 5 Engine um nur ein paar zu nennen.
Dankeschön für das Video. Hast Du vielleicht einen Tipp wie man aktuelle Javascript Libs über ein CDN vom Internet einbindet. Als ich das per Google versucht habe habe ich nur alte Versionen von three.js gefunden. Die Links aus Deinem GIT HUB Repository habe ja GottSeiDank funktioniert.
Also bei mir geht der Code nicht aber sieht cool aus richtig cool
Und ich werde dein tutorial weiter anschauen bist zu meinem Tot
Geht es noch weiter zu diesem Thema? 😊
8:05 bei mir wird leider kein Unterordner erstellt. Und somit bleibt meine Seite auch leer.
Hallo Hallo, danke für Videos. Diese sind wirklich gut. Ich habe mal eine Frage zu dem Thema Three.js. Wie kann ich die canvas in der grösse und der Breite ansteuern. Wie kann ich nur zB. die Hälfte des Viewport mit der Canvas machen. Ich hoffe du hast einen guten Tipp der mir vielleicht weiterhilft. Weiter so und ein fettes Dankeschön.
0xffff00 wäre gelb..
Ich fände es toll, wenn ihr erklären könntet, wie man seine Webseite z.B. auf HTML5 Basis mit einer selbst erstellten App öffnen kann, wie es z.B. Facebook der Fall ist.
Ja kannst du mehrere Teile dazu machen und auch ein wenig blender.js wäre auch nice
Geht dieser Code auch in Java?
Kein Plan warum ich das anschaue obwohl ich kein js Meister bin aber macht Spaß
Bitte Teil 2 machen und mache vlt ein Racer Game
Das kommt bei mir immer bei den Javascript Import Datein raus : Couldn't find the requested file /build/three.module.js'; in three. Ich kann leider nicht weiter Coden
bei mir auch ...🤔
Ich habe mein erstes spiel programmirt😃🤓😎
Super danke und ja.
Gerne 😊
Hi ich habe in deinem video kommentiert bei dem du gezeigt hast wie man c# für anfänger lernen kann.
Habe da gefragt ob es da irgenwas gibt was ich mit dem handy machen kann also irgendwas lernen über das handy ,weil ich leider kein laptop bzw PC habe :)
Würde mich auf eine Antwort freuen
Mit freundlichen Grüßen davide di ruberto
Ne geht natürlich nicht mit dem Handy. Hol dir einen Laptop (einen Monat sparen mit einem 500 Euro Minijob und du hast einen)
Jaaaaa bitte
Schmatz schmatz - Süchtig - Schmatz - TEIL 2 - 😇
Bei mir bleibt des noch weiß. Kann mir irgendjemand helfen?
Wenn ich das Ausrufezeichen eingebe kommt bei mir nicht :C
das ist mir auch mal passiert und dann war der name index.html falsch geschrieben ... war das hilfreich
Der unterordner wurde auch nicht erstellt