Blender und export direkt in Browser mit Three.js

Hallo
Ich bin auf dieses Forum gestossen, weil ich quasi von GuyGood eingeladen worden bin.
Ich habe die gleiche Frage auch schon auf Blendpolis gestellt.
Da das Problem mehr bei Javascript liegt als bei Blender, konnte mir dort bis jetzt noch niemand weiter helfen
Dann hatte ich die Frage auch auf http://stackoverflow.com gestellt, dort habe ich die Leute mit meinem miserablen Englisch ziehmlich genervt. Ich habe mich dort auch nicht an die Konventionen gehalten scheint es, da ich sie nicht verstehen konnte. So hoffe ich, dass ich hier niemand mit meinen anfänger javascript Problemen auf den Fuss trette. Aber die Aussicht 3d Modelle direkt im Browser auch noch interaktiv vorstellen zu können, lassen mir einfach keine Ruhe

Ich versuche mit three.js ein ColladaModel im Chrom darzustellen.
Ich bin an diesem Tutorial hier;
http://www.youtube.com/watch?v=UuJ3XN3e66o-Videotutorial
von Jarek Sarbiewski
Der erste Teil ging gut.
Ich konnte die 3d Kugel herstellen,
ausser, dass bei mir der Hintergrund schwarz nicht weiss ist.
http://www.kieselsteine.ch/LadenCollada/kugel.html-Kugel mit three.js
(muss in Google Chrom angeschaut werden Auch firefox kann es darstellten. Man muss allerdings WebGL zuerst aktivieren. In der Adressleiste about:config eintippen. Dann die Warnmeldung mit ok bestätigen und anschliessend Webgl in der Suchleiste eintippen dann glaube ich webgl disabled auf false doppel klicken.
Für den IE braucht es ein spezielles addons und bei den anderen Browsern weiss ich es nicht)

Dazu habe ich auch noch gelernt, wie importierte Objekte drehen lassen
http://www.kieselsteine.ch/LadenCollada/ObjekteBewegung.html-Bewegung der Objekte

Nun bin ich natürlich begierig
ein Blender Model so direkt im Browser darstellen zu können.

Das wird im selben Tutorial auch gezeigt.
Leider funktioniert das bei mir nicht.
Ich habe hier ein .zip
http://www.kieselsteine.ch/LadenCollada.zip-Meine Dateien
darin sind alle drei HTML Dateien
plus die javaScriptBibliotheken, die ich include
plus zwei .dae (ColladaDateien), die ich versuche ein zu binden.
Alles auf der selben Ebene, sprich im selben Ordner, damit es einfacher ist mit den Pfaden.
Vermutlich ist es nur ein kleiner Hacken über den ich nicht weiter komme.
Falls jemand Erfahrung hat in der WebGl Technologie,
würde ich mich sehr freuen, wenn er/sie mein .zip schnell herunterladen könnte,
und die laden.html einmal anschauen könnte.

Wie mir GuyGood schon auf englisch anzudeuten versuchte, liegt es an der Reihenfolge, die in meinem Script nicht stimmt. Wie gesagt ich bin kein Programmierer, also einfach etwas Geduld mit meiner langen Leitung.

liebe Grüsse
kieselsteine

Willkommen auf dem 3D Ring

Ich habe mal den Beitrag nach 2D / 3D Allgemein geschubst. Der war in den News falsch. Für Webprogrammierung haben wir eigentlich gar keine Kategorie. Das ist eher ein Grafikerforum. Leider kann ich dir mit deinem Problem auch nicht weiterhelfen. Ich hoffe es findet sich noch jemand der sich damit auskennt

Danke Tiles

Ich weiss das Thema 3d Browser ist auch noch ziemlich beta zurzeit.
Aber ich bin mir sicher, dass ich hier oder anders wo eine Lösung finden werde.
Ich habe im Programmieren zwar eine lange Leitung, dafür aber auch ein langer Atmen,
wenn ich mir einmal etwas in den Kopf gesetzt habe

http://www.file-upload.net/download-8341871/LadenColladaFixed.zip.html

Habe dir das mal ordentlich gemacht, entsprechend dem was ich auf stackoverflow dir schon geschrieben habe, habe ich folgendes geändert:

1) Reihenfolge der script-tags getauscht, sodass zuerst Three.js und danach der ColladaLoader geladen wird.

2) Du musst def. immer die passenden Versionen nutzen. Deine ColladaLoader-Version war veraltet und passte nicht zur Version 62 von Three.js. Das geht meist nicht gut, da die Skripte meist nicht abwärtskompatibel sind. Bei dem Thema ist man da recht kompromisslos bei Three.js. Entsprechend bin ich auf die Github-Seite gegangen, habe mir das ganze Revision63 Paket heruntergeladen und dir die aktuelle ColladaLoader-Version und Three.js Version in das Archiv gepackt, das hättest du best. auch selber hinbekommen p.s. Achtung die three.min.js ist noch die alte!

3) Ich habe dein "setInterval" gelöscht. Stattdessen erfolgt ein Aufruf von "zeichne();" und danach in der Zeichne -Funktion wird eine dauerhafte Schleife durch "requestAnimationFrame( zeichne )" begonnen. Alle Browser-Entwickler empfehlen diese Art der Schleife. Google wenn du wissen willst, weshalb

4) Ich habe dir noch die Datei "monster.jpg" in den Ordner kopiert, die hattest du vergessen. Zu der Collada-Datei gehört eben noch dieseTextur. Denke daran, dass du einen lokalen Server brauchst, damit du keine "Cross-Origin" Fehler bekommst beim Laden der Texturen!

Ansonsten muss ich dir echt nochmal sagen, solltest du, auch wenn es dir schwer fällt, den Quelltext und Methoden und Funktionsnamen Englisch benennen. Sonst blickt das doch keiner mehr
Also im Prinzip habe ich nur 3 Zeilen geändert, die LoaderVersion getauscht und die Textur noch reingepackt, ansonsten ist dein Programm ja nicht so falsch und du bist auf nem guten Weg gewesen.

@Tiles, siehst du mal, habe ich direkt ein Forenmitglied angeworben und einen neuen Foren-Bereich etabliert
Nein, aber im Ernst, eventuell sollte es ne kleine, winzige Ecke entsprechend 3D-Programmierung auch im neuen Ring geben

Hallo GuyGood

Vielen vielen Dank!
Ich werde mir das jetzt genau ansehen und versuchen den Ablauf, der der Browser macht, besser zu verstehen.
Ich habe die Variablen Deutsch gemacht, weil sie in dem Tutorial auch deutsch sind (siehe oben)
Da ist es besser für mich, mich an das Tutorial zu halten, sonst verliere ich den Faden noch viel eher.
Natürlich hat es etwas gutes, dass englisch so quasi zur Weltsprache wurde im Zeitalter des Internets. Es gibt aber immer noch viele Menschen, die nicht sehr sprachbegabt sind, und englisch ist ganz besonders in der sehr eigenwilligen Schreibweise nicht die einfachste Sprache zum lernen. Ich zum Beispiel habe damit immer noch meine großen Probleme.
Ich finde das super nett, dass Du mir die Datei zum laufen gebracht hast. Natürlich befreit mich das jetzt nicht zu versuchen zu verstehen, wieso es jetzt läuft und vorher nicht. Aber irgendwie kam ich alleine einfach nicht über diese Klippe.
Sobald ich noch etwas weiter bin und auch noch Interaktivität in das geloadete Modell gebracht habe, und anstelle ein eigenes aus Blender exportiert habe, werde ich das ganze in meinem .zip oben ändern. Dann haben auch andere, mit ähnlichen Problemen wie ich, einen Anfangspunkt, Blender-arbeiten direkt im Browser darstellen zu können. Das kann aber noch etwas Zeit brauchen bis dahin...

liebe Grüße
Patrick

So is brav

Es wird wohl eine kleine Programmiererecke im neuen Ring geben. khaoz ist eh Informatiker. Und ich selber komme ja aus der Spieleecke. Da geht also definitiv was. Im Moment wäre es allerdings wichtiger den neuen Ring überhaupt mal gestartet zu bekommen. Wir arbeiten daran !

Und schön dass das Problem gelöst zu sein scheint

Es gibt die OrbitControls.js
Mit der kann man bestimmt sehr schöne interaktive Sachen anstellen, wenn man wüsste wie.
Ich vermute, diese Funktion lässt die Kamera rund um ein Punkt wandern und der User kann das ganze mit seiner Maus steuern. Etwa so wie in Blender MittelMausKlicken und Fahren und die ganze Welt beginnt sich zu drehen.

Etwas einfacher ist es natürlich statt die Kamera in einen Orbit um das Model zu schicken, das Model selber drehen anhand der Mausposition. Die Mausposition kann man mit javascript abfragen.
Die X Werte übergibt man dann der Y Rotation des Objektes.
Die Rotation ist nicht wie in Blender. Nach oben ist Y. In die Tiefe ist Z, links/rechts X
Die Y Werte übergibt man der X Rotiation des Models.
Natürlich muss man diese Wert mit einem Dividenden noch etwas anpassen,
damit sie nicht zu stark oder zu schwach wirken.
Das zumindest habe ich nun schon einmal geschafft.
Das lässt doch das Wasser schon einmal etwas im Mund zusammen laufen!
http://www.kieselsteine.ch/LadenColladaFixed/LadenColladaFixed/laden3.html

Ich bin ja gespannt, wann in der Blendergemeinde das three.js Fieber ausbricht.
Ganz ohne BlenderGameEngine kann man direkt im Browser auch Spiele programmieren,
wenn man halt weiss wie, oder es heraus findet wie.

Hier einmal der Stand meiner Forschungen;
http://www.kieselsteine.ch/LadenColladaFixed.zip
Für diejenigen, die es interessiert und daran mit forschen wollen.
Grossen Dank an dieser Stelle nochmals an GuyGood
Ohne seine Hilfe wäre ich noch nicht so weit

Büdde Büdde