Three.js: r73: nichts funktioniert!?!

Was funktioniert nicht? Welche Fehler bekommen Sie? Ich stelle immer sicher, dass alle Beispiele noch funktionieren. Wenn etwas kaputt geht, sollten wir ein Beispiel hinzufügen, das dies testet.

Was funktioniert nicht?

Nichts funktioniert !!!
Nur ein Beispiel (für Sie):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
Fehler:

• THREE.MorphAnimMesh ist undefiniert
• loader.load ist keine Funktion

Warum hast du so etwas veröffentlicht ???

Ah! Aha.

Wir haben das Animationssystem komplett ersetzt und SEA3D verlässt sich immer noch auf das alte ( @sunag arbeitet an einem Update, denke ich).

In der Zwischenzeit müssen Sie das alte Animationssystem in Ihr Projekt aufnehmen:

<script src="js/MorphAnimMesh.js"></script>
<script src="js/loaders/collada/Animation.js"></script>
<script src="js/loaders/collada/AnimationHandler.js"></script>
<script src="js/loaders/collada/KeyFrameAnimation.js"></script>

Sie finden die Dateien im Ordner examples .

Wir haben das Animationssystem komplett ersetzt

Und wieder haben Sie die Abwärtskompatibilität durcheinander gebracht ... OMG

Wie auch immer, hier ist noch etwas (ohne Animation und Loader):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
Fehler:

• _typeface_js ist nicht definiert
• THREE.TextGeometry ist kein Konstruktor

Ehrlich gesagt ist r73 ein komplettes Durcheinander und sollte entfernt werden.
Prost

Ich verlasse mich seit ungefähr 1,5 Jahren auf Three.js für ChiliPeppr. Heute Morgen scheint THREE.FontUtils undefiniert zu sein, sodass die gesamte Schriftwiedergabe in ChiliPeppr fehlerhaft ist. Ich vermute, es ist das gleiche r73-Problem, auf das sich auch @RemusMar bezieht.

FontUtils und TextGeometry wurden ebenfalls aus dem Kern entfernt.

Sie müssen die Dateien jetzt separat einschließen:

<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/helvetiker_regular.typeface.js"></script>

Ich habe beschlossen, sie aus dem Kern zu entfernen, da der Benutzer die *.typeface.js sowieso einschließen musste.

@RemusMar Wir garantieren keine Abwärtskompatibilität zwischen Versionen. Wir fügen jedoch einen Übergangscode hinzu , der den Benutzer benachrichtigt und den Code funktionsfähig hält, wann / wo wir können.

Die Dienstprogramme FontUtils und TextGeometry wurden ebenfalls aus dem Kern entfernt.

Warum entfernst du nicht alles aus dem Kern?
Ein Kern mit NULL Bytes muss überhaupt nicht heruntergeladen werden.

Wir garantieren keine Abwärtskompatibilität zwischen Versionen.

Das ist ein schlechter Schachzug, Ricardo.
Wie ich von Anfang an sagte:

Die Abwärtskompatibilität ist ein MUSS in jedem ernsthaften Projekt.
Andernfalls werden immer weniger Menschen an diesem Projekt interessiert sein.

Prost

Warum entfernst du nicht alles aus dem Kern?
Ein Kern mit NULL Bytes muss überhaupt nicht heruntergeladen werden.

Ich nehme an, du bist ein emotionaler Typ. Sie bleiben jedoch in der Nähe, sodass ich auch feststelle, dass Sie das Projekt am Ende des Tages nützlich finden 😉

Die Abwärtskompatibilität ist ein MUSS in jedem ernsthaften Projekt.

Vielleicht ist das für ein Projekt nicht so ernst, wie Sie denken? Ich bin nicht Adobe, weißt du?

Andernfalls werden immer weniger Menschen an diesem Projekt interessiert sein.

Menschen, die das Interesse verlieren, sind nichts, worüber ich mir Sorgen mache. Stattdessen konzentriere ich mich darauf, eine schöne API zu erstellen, die die Belästigungen durch Computergrafiken abstrahiert, und gleichzeitig möchte ich, dass die Bibliothek in 100-KB-GZIP passt. Es ist unmöglich, alle Funktionen, die Menschen hinzufügen, für immer einzuschließen.

@RemusMar Abwärtskompatibilität: Wenn Sie solche js libs verwenden, sollten Sie in der Lage sein, das Problem selbst zu beheben, wenn etwas nicht mehr unterstützt wird. Wenn nicht, fragen Sie kooperativer, jeder hilft gerne weiter. Wenn Beispiele kaputt sind, können Sie sie gerne reparieren ...

@RemusMar Eines der allerersten Dinge, die ich über three.js gelernt habe, als ich mit der 3D-Programmierung in JavaScript begann, war die Tatsache, dass es nicht abwärtskompatibel ist.

Ich denke, im Allgemeinen ist das absolut kein Problem, da ich nur sicherstellen muss, dass ich in meinem Projekt auf dieselbe Version von three.js verlinke, mit der ich meinen Code erstellt habe.

Die Politik, die Rückwärtskompatibilität nicht zu berücksichtigen, war sicherlich die Grundlage für die Chance, three.js bisher so dynamisch und mit so fantastischen Möglichkeiten zu entwickeln.

Das ist ein schlechter Schachzug, Ricardo

erstaunlich, wie die Leute dies nach über 70 Revisionen bemerken)

Aber um den Punkt hinzuzufügen, schrieb mir kürzlich jemand "der neueste stabile three.js ist r72", lol. Es gibt keine stabilen drei. Sie aktualisieren alte Revisionen nicht mit Fehlerkorrekturen, sondern es gibt eine neue Version mit Fehlerkorrekturen und Änderungen oder neuen Fehlern.

Andererseits funktionieren einige Dinge auf magische Weise durch Versionen, selbst wenn der zugrunde liegende Code auf den Kopf gestellt wurde. Wie Skins mit Puffergeometrie)

Während wir uns mit dem Brechen von Veränderungen befassen, ärgern mich json-Veränderungen am meisten. Jemand hat ein altes Export-Plugin in seinem 3dmax, und ich verbringe viel Zeit damit, json von Hand zu bearbeiten, damit Animationen funktionieren.

Andererseits funktionieren einige Dinge auf magische Weise durch Versionen, selbst wenn der zugrunde liegende Code auf den Kopf gestellt wurde. Wie Skins mit Puffergeometrie)

Das hat einige Mühe gekostet! 😅

Während wir uns mit dem Brechen von Veränderungen befassen, ärgern mich json-Veränderungen am meisten. Jemand hat ein altes Export-Plugin in seinem 3dmax, und ich verbringe viel Zeit damit, json von Hand zu bearbeiten, damit Animationen funktionieren.

Ja. Die Animation muss so schnell wie möglich stabil sein. Ich denke, das neue Animationssystem ist ein großer Schritt in die richtige Richtung.

Es sieht so aus, als ob dieses Beispiel aufgrund Ihrer r73-Änderungen defekt ist. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Oh! Vergessen Sie immer die Beispiele in den Dokumenten ...

@mrdoob
Was soll ich verwenden, um die "alte" THREE.Animation-Klasse zu ersetzen?
Gibt es Beispiele, die das neue Animationssystem verwenden? Es ist nicht so klar, was auf der Beispielseite neu ist.

Während wir uns mit dem Brechen von Veränderungen befassen, ärgern mich json-Veränderungen am meisten. Jemand hat ein altes Export-Plugin in seinem 3dmax, und ich verbringe viel Zeit damit, json von Hand zu bearbeiten, damit Animationen funktionieren.

Dies war auch ein Anliegen von mir. Ich möchte wirklich nie wieder Hunderte von Modellen exportieren müssen.

@jostschmithals
Die Politik, die Rückwärtskompatibilität nicht zu berücksichtigen, war sicherlich die Grundlage für die Chance, three.js bisher so dynamisch und mit so fantastischen Möglichkeiten zu entwickeln.

Das ist eine falsche Aussage.
Wenn die Abwärtskompatibilität ständig unterbrochen wird, geben die Entwickler von Drittanbietern THREE.js auf
Auf der anderen Seite bedeuten neue Funktionen und Fehlerbehebungen nicht, dass die Kompatibilität mit älteren Projekten beeinträchtigt wird.
Wenn Ricardo diesen Weg fortsetzt, wird die Zeit zeigen, ob ich Recht habe oder nicht.
Prost

Dies war auch ein Anliegen von mir. Ich möchte wirklich nie wieder Hunderte von Modellen exportieren müssen.

Einverstanden! Das JSON-Format ist etwas, bei dem ich die Abwärtskompatibilität für sehr wichtig halte. Ist sowieso nicht schwer zu machen.

Einverstanden! Das JSON-Format ist etwas, bei dem ich die Abwärtskompatibilität für sehr wichtig halte. Ist sowieso nicht schwer zu machen.

Großer Seufzer der Erleichterung =]

Es scheint etwas verfrüht zu sein, einen Build zu veröffentlichen, ohne den Migrationsleitfaden zu aktualisieren, wenn Änderungen vorgenommen werden. Zum Glück war ich mir der Animationsänderung bewusst, da ich diesen Boards folge. Ich würde nicht wetten, dass alle Benutzer gleichermaßen vorbereitet waren.

Ich stimme Remus darin zu, Dinge aus dem Kern zu entfernen, nur um die Größenbeschränkung von 100 KB beizubehalten. Persönlich interessiert mich die Funktionalität um das 10000-fache mehr, als ein paar Bytes zu sparen. Ich weiß, dass ich die erforderlichen Dateien aus Beispielen entnehmen kann, aber es scheint eine Art unnötiger Schmerz im Hintern zu sein (insbesondere, dass ich sie bei jeder Veröffentlichung aktualisieren muss).

Jedenfalls genug von mir zu beschweren. Abgesehen von diesen wenigen Kritikpunkten, tolle Arbeitskollegen!

Es scheint etwas verfrüht zu sein, einen Build zu veröffentlichen, ohne den Migrationsleitfaden zu aktualisieren, wenn Änderungen vorgenommen werden.

Das Erstellen einer Veröffentlichung umfasst einige Schritte. Manchmal geht mir die Geduld / das Engagement aus ... 😕
Jeder kann die Migrationsseite aktualisieren. Ich würde gerne dort Hilfe bekommen.

Es sieht so aus, als ob dieses Beispiel aufgrund Ihrer r73-Änderungen defekt ist. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Fest!

Wo finde ich FontUtils in r74? Scheint in r74 entfernt zu sein ...

@pjanik

Ja, tut mir leid, die TextGeometry API hat sich erneut geändert. Es ist aber wieder im Kern!

Bitte verwenden Sie http://threejs.org/examples/webgl_shadowmap.html als Referenz.

var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.js', function ( font ) {

    var textGeo = new THREE.TextGeometry( "THREE.JS", {

        font: font,

        size: 200,
        height: 50,
        curveSegments: 12,

        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true

    });

    textGeo.computeBoundingBox();
    var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );

    var mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.x = centerOffset;
    mesh.position.y = FLOOR + 67;

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add( mesh );

} );

Wenn jemand interessiert ist, habe ich auf diese Weise Schriftarten ohne asynchrone Anforderung mit dem NPM [email protected] -Modul und dem Webpack geladen: https://gist.github.com/pjanik/49c03c02c66341a26904
Wenn Sie ein anderes Build-Tool verwenden, ist es wichtig, die Schriftartdatei als Zeichenfolge zu laden. Vielleicht könnte diese lustige Analyse in Zukunft auf eine Hilfsmethode übertragen werden?

Nebenbei bemerkt ist es cool, dass r74 /examples dir enthält (r73 nicht), bitte mach das weiter. : wink: Schließlich kann ich nur noch das Paket three , keine externen Skriptdateien mehr (ich verwende auch examples/js/controls/OrbitControls ). Es wäre noch cooler, wenn Beispiele im UMD-Format veröffentlicht würden, sodass ich OrbitControls direkt benötigen könnte, ohne die globale DREI-Abhängigkeit zu verringern (keine große Sache, da die meisten Build-Tools damit umgehen können, aber immer noch).

Vielen Dank!

oder Sie könnten _typeface_js.loadFace einfach lokal definieren und bewerten?

Ja, tut mir leid, die TextGeometry-API wurde erneut geändert. Es ist aber wieder im Kern!

Das war eine kluge Entscheidung, Ricardo.
Eine geringfügige Änderung der Syntax für den Loader ist erforderlich, jedoch abwärtskompatibel.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
Prost

Sollten wir das Zurückladen der Textgeometrie in den ObjectLoader hinzufügen?

@fraguada gut, ist nicht so einfach, wir sollten auch die Schriftartdatei behandeln ...

FontUtil ist in der Version von r74, die ich erhalten habe, nicht definiert: https://github.com/mrdoob/three.js/blob/master/build/three.js

Das scheint dasselbe zu sein wie das, das von http://threejs.org/examples/webgl_shadowmap.html verwendet wird (außer minimiert), aber ich sehe es auch nicht explizit einschließlich FontUtils oder Schriftart ... aber diese Beispielseite funktioniert . (Während ich immer noch "_typeface_js ist nicht definiert" erhalte) Tun Sie etwas zusätzlich zu dem, was in Ihrem Kommentar gezeigt wird (das Codebeispiel 6 Kommentare über diesem)?

Die Dokumentation muss aktualisiert werden, wenn die API geändert wird. Dies gilt nicht mehr: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

Es wäre sehr nützlich gewesen, ein sehr einfaches Beispiel zu haben, ohne dass alle Tastenanschläge zum Umschalten von Schriftarten, Gewichten und Fasen aufgezeichnet worden wären. Nicht, dass das nicht auch toll wäre, aber ein einfaches Grundprinzip in Ihren Beispielen hätte mir eine Menge Zeit gespart.

Dieses Beispiel hätte viel helfen können: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry , aber wenn Sie sich die Quelle ansehen, wird nur ein Torus gezeichnet, wenn externe Ressourcen abgerufen werden eigentlich die Arbeit machen.

Ich habe dieses einfache Beispiel in JSFiddle für alle zusammengestellt, die diesen Thread finden.
https://jsfiddle.net/287rumst/1/

Es wäre sehr nützlich gewesen, ein sehr einfaches Beispiel zu haben

r75 und r76dev:
http://necromanthus.com/Test/html5/koolmoves.html

Nur zwei meiner Cent, weil ich auch ein Fan der Abwärtskompatibilität bin:

Wenn die Kompatibilität nicht garantiert werden kann, wäre es schön, einen Ordner upgrade (oder fixes ) in Github zu haben, der die alte Version und die neue Behandlung anzeigt. Eine Referenz.

Auf diese Weise könnten Programmierer die Änderungen leicht nachholen.

Ich benutze r65 immer noch wegen solcher "unbekannten" Probleme, dass ich nicht die zusätzliche Zeit habe, um herauszufinden, wie ich diese Probleme beheben kann.

Hallo zusammen, ich bin gerade von r71 auf r76 gewechselt und habe den neuen animation.mixer entdeckt. Damit meine älteren json 3D-Objektbibliotheken funktionieren, habe ich MorphAnimMesh.js Animation.js AnimationHandler.js und KeyFrameAnimation.js in meine Javascript-Bibliothek kopiert. Aber jetzt erhalte ich den Fehler "Datenhierarchie undefiniert". Bedeutet dies, dass ich alle meine früheren 3D-JSON-Objekte aus Blender erneut exportieren muss, oder gibt es eine Möglichkeit, diese weiterhin funktionsfähig zu halten?

Hallo, niemand, der bei "undefined data.hierarchy" hilft?

Bitte verwenden Sie StackOverflow für Hilfe.

Das Erstellen einer Veröffentlichung umfasst einige Schritte. Manchmal geht mir die Geduld / Hingabe aus ...: verwirrt:
Jeder kann die Migrationsseite aktualisieren. Ich würde gerne dort Hilfe bekommen.

Ich bin kürzlich auf dieses Problem mit einer älteren Version von three.js gestoßen.

Aber nachdem ich die Kommentare und Beleidigungen gelesen hatte, die Sie erhalten hatten, wollte ich Ihnen nur dafür danken, dass Sie three.js beibehalten haben, anstatt um Hilfe zu bitten.

Du bist ein super engagierter und geduldiger Typ! : +1:

Das Update von r72 auf r84 war eine Menge Arbeit (~ 3 Stunden für ein Projekt).

Hilfreich:

• Informationen zum Schriftartenproblem finden Sie im Quellcode von http://necromanthus.com/Test/html5/koolmoves.html (Sie laden die Schriftart nicht mehr in HTML, sondern weisen in JS eine Variable zu, die in die Parameter eingeht. Achten Sie darauf, die Schriftart erst zuzuweisen, nachdem sie geladen wurde.)
• siehe die Fehlermeldungen in der Entwicklerkonsole, sie helfen sehr, weil sie dir sogar sagen, was zu tun ist (gute Arbeit @mrdoob )
• Schauen Sie sich auch https://github.com/mrdoob/three.js/wiki/Migration-Guide an

Mein glückliches Ergebnis: https://www.matheretter.de/geoservant/en/

Im Detail, was ich von v72 bis v84 tun musste:

1. Aus Ihrer HTML-Datei entfernen:

   <!-- OLD <script src="../../threejs/geometries/TextGeometry.js"></script>  -->
   <!-- <script src="../../threejs/helvetiker_regular.typeface.js"></script>  -->
   

2. Führen Sie Ihre ThreeJS-Szene aus, Sie erhalten wahrscheinlich:

   Uncaught TypeError: c.generateShapes is not a function
   

3. Dies liegt daran, dass der Renderer gestartet wird, ohne dass die Schriftart geladen ist. Laden wir also zuerst die Schriftart und rufen dann beim Start den Renderer auf:

   var text3dparams;
   var font_helvetiker;
   var fontload = new THREE.FontLoader();
   fontload.load( '/threejs/fonts/helvetiker_regular.typeface.json', function ( font ) {
       font_helvetiker = font;
       initStageText();
   
       // startup
       render(); 
   });
   

4. Da ich den Text zur Laufzeit neu einstelle, muss ich die Bühnenobjekte in der globalen Umgebung definieren, z.

   var text3d_r;
   var text3d_s;
   var text3d_h;
   var material1;
   var material_s;
   var material2;
   

5. Beispiel für die Startfunktion:

   function initStageText()
   {
       // 3D TEXT LABELS
       text3dparams = {
           font:           font_helvetiker, // font, important to change, before was "helvetiker", now the font directly!
           size:           0.3,    // size of the text
           height:         0.05,   // thickness to extrude text
           curveSegments:  2,      // number of points on the curves
           weight:         'normal',       // font weight (normal, bold)
           style:          'normal',       // font style  (normal, italics)
       }
   
       // label radius
       material1 = new THREE.MeshBasicMaterial({color: 0x009900});
       var text3dgeom_r = new THREE.TextGeometry('r = '+cone_radius, text3dparams);
       text3d_r = new THREE.Mesh(text3dgeom_r, material1);
       text3d_r.position.y = cone_height+0.1;
       text3d_r.position.z = cone_radius/2-0.35;
       text3d_r.rotation.y = -Math.PI/2;
       scene.add(text3d_r);
   }
   

6. Ich habe auch den Fehler THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. Um dies zu lösen, habe ich entfernt:

   gridHelper.setColors( new THREE.Color(gridcolor), new THREE.Color(gridcolor) );
   

und hinzugefügt (Gridstep war vorher 1, dann musste der Wert auf 20 gesetzt werden, um das gleiche Grid zu erhalten):

    var gridHelper = new THREE.GridHelper(gridplaneSize/2, gridstep, gridcolor, gridcolor);

1. Dann muss ich mich um die drei Änderungen kümmern (in der Chrome-Konsole als Warnung angezeigt):

6.1 THREE.MeshBasicMaterial: 'ambient' is not a property of this material. Gelöst durch Entfernen von ambient:color, aus new THREE.MeshBasicMaterial();

6.2 Lichtwechsel, ersetzen Sie einfach wie in den Warnungen angegeben:

    THREE.Light: .shadowMapWidth is now .shadow.mapSize.width.
    THREE.Light: .shadowMapHeight is now .shadow.mapSize.height.
    THREE.Light: .shadowCameraNear is now .shadow.camera.near.
    THREE.Light: .shadowCameraFar is now .shadow.camera.far.
    THREE.Light: .shadowCameraFov is now .shadow.camera.fov.
    THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( 
    THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled.

6.3 THREE.Light: .shadowDarkness has been removed. - entfernen Sie es.

1. Ich habe auch das Renderer-Setup geändert:

   // OLD 
   var renderer = Detector.webgl ? new THREE.WebGLRenderer({ antialias: true }) : new THREE.CanvasRenderer({ antialias: true });
   
   // NEW
   var renderer;
   if(Detector.webgl)
   {
       renderer = new THREE.WebGLRenderer({ antialias: true });
   }
   else
   {
       renderer = new THREE.CanvasRenderer({ antialias: true });
   }
   

2. Ich musste dem Szenen-Setup auch eine weiße Hintergrundfarbe hinzufügen:

   var scene = new THREE.Scene();          
   scene.background = new THREE.Color( 0xffffff );
   

Jetzt läuft meine Anwendung wie mit der alten ThreeJS-Version. Viel Glück auch für Ihr Projekt!