Three.js: r73: rien ne fonctionne!?!

Qu'est-ce qui ne marche pas? Quelles erreurs obtenez-vous? Je m'assure toujours que tous les exemples fonctionnent toujours. Si quelque chose ne fonctionne pas, nous devrions ajouter un exemple qui teste cela.

Qu'est-ce qui ne marche pas?

Rien ne fonctionne !!!
Juste un exemple (pour vous):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
Les erreurs:

• THREE.MorphAnimMesh n'est pas défini
• loader.load n'est pas une fonction

Pourquoi avez-vous sorti quelque chose comme ça ???

Ah! Je vois.

Nous avons complètement remplacé le système d'animation et SEA3D repose toujours sur l'ancien ( @sunag travaille sur une mise à jour je pense).

En attendant, vous devez inclure l'ancien système d'animation dans votre projet:

<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>

Vous trouverez les fichiers dans le dossier examples .

Nous avons complètement remplacé le système d'animation

Et encore une fois, vous avez gâché la compatibilité ascendante ... OMG

Quoi qu'il en soit, voici autre chose (sans animation ni chargeur):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
Les erreurs:

• _typeface_js n'est pas défini
• THREE.TextGeometry n'est pas un constructeur

Honnêtement, r73 est un désordre complet et il devrait être supprimé.
à votre santé

Je compte sur Three.js pour ChiliPeppr depuis environ un an et demi maintenant. Ce matin, il semble que THREE.FontUtils n'est pas défini, donc tout le rendu des polices est interrompu dans ChiliPeppr. Je suppose que c'est le même problème r73 que

FontUtils utils TextGeometry ont également été supprimés du core.

Vous devez maintenant inclure les fichiers séparément:

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

J'ai décidé de les retirer du noyau car l'utilisateur devait de toute façon inclure le *.typeface.js .

@RemusMar Nous ne garantissons pas la rétrocompatibilité entre les versions. Mais nous ajoutons un code de transition qui avertit l'utilisateur et maintient le code en fonctionnement quand / où nous le pouvons.

Les utils FontUtils et TextGeometry ont également été supprimés du core.

Pourquoi ne supprimez-vous pas tout du noyau?
Un noyau avec ZERO octets n'a pas du tout besoin d'être téléchargé.

Nous ne garantissons pas la rétrocompatibilité entre les versions.

C'est un mauvais coup Ricardo.
Comme je l'ai dit dès le début:

La rétrocompatibilité est un must dans tout projet sérieux.
Sinon, de moins en moins de gens seront intéressés par ce projet.

à votre santé

Pourquoi ne supprimez-vous pas tout du noyau?
Un noyau avec ZERO octets n'a pas du tout besoin d'être téléchargé.

Je suppose que vous êtes un gars émotif. Cependant, vous restez dans les parages, donc je suppose également qu'en fin de compte, vous trouvez le projet utile 😉

La rétrocompatibilité est un must dans tout projet sérieux.

Ce n'est peut-être pas un projet aussi sérieux que vous le pensez? Je ne suis pas Adobe tu sais?

Sinon, de moins en moins de gens seront intéressés par ce projet.

Je ne m'inquiète pas pour les gens qui perdent leur intérêt. Au lieu de cela, je me concentre sur la création d'une belle API qui résume les désagréments de l'infographie et, en même temps, je veux que la bibliothèque tienne dans 100 Ko gzippés. Il est impossible d'inclure pour toujours toutes les fonctionnalités que les gens ajoutent.

@RemusMar Rétrocompatibilité, si vous utilisez des bibliothèques js comme ça, vous devriez être en mesure de réparer le problème par vous-même si quelque chose n'est plus pris en charge. Sinon, demandez de manière plus coopérative, tout le monde est heureux de vous aider. Si les exemples sont cassés, n'hésitez pas à le réparer ...

@RemusMar Une des toutes premières choses que j'ai apprises sur three.js, lorsque j'ai commencé la programmation 3D en JavaScript, a été le fait qu'il n'est pas rétrocompatible.

Je pense, en général, ce n'est absolument pas un problème, car je dois seulement m'assurer que dans mon projet je crée un lien vers la même version de three.js avec laquelle j'ai construit mon code.

La politique de ne pas prendre en compte la compatibilité ascendante était certainement la base de la possibilité de développer three.js d'une manière aussi dynamique, avec des possibilités si fantastiques, jusqu'à présent.

C'est un mauvais coup Ricardo

incroyable comment les gens remarquent cela après plus de 70 révisions)

Mais pour ajouter au point, quelqu'un m'écrivait récemment "la dernière version stable de three.js est r72", lol. il n'y a pas de three.js stable. ils ne mettent pas à jour les anciennes révisions avec des corrections de bogues, à la place il y a une nouvelle version avec des corrections de bogues _et_ des changements de rupture ou de nouveaux bogues.

Là encore, certaines choses fonctionnent comme par magie avec les versions même si le code sous-jacent a été inversé. Comme les skins utilisant la géométrie du tampon)

Alors que nous sommes sur le sujet de changements de rupture, ce qui me fait le plus chier, ce sont les changements de json. Quelqu'un a un vieux plugin d'exportation dans son 3dmax, et je passe des années à éditer json à la main pour faire fonctionner les animations.

Là encore, certaines choses fonctionnent comme par magie avec les versions même si le code sous-jacent a été inversé. Comme les skins utilisant la géométrie du tampon)

Cela a demandé des efforts! 😅

Alors que nous sommes sur le sujet de changements de rupture, ce qui me fait le plus chier, ce sont les changements de json. Quelqu'un a un vieux plugin d'exportation dans son 3dmax, et je passe des années à éditer json à la main pour faire fonctionner les animations.

Oui. L'animation doit être stable dès que possible. Je pense que le nouveau système d'animation est un grand pas dans la bonne direction.

Il semble que cet exemple est cassé compte tenu des modifications apportées à r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Oh! Oubliez toujours les exemples dans les documents ...

@mrdoob
Que dois-je utiliser pour remplacer la "vieille" classe THREE.Animation?
Y a-t-il des exemples qui utilisent le nouveau système d'animation? Ce qui est nouveau sur la page des exemples n'est pas si clair.

Alors que nous sommes sur le sujet de changements de rupture, ce qui me fait le plus chier, ce sont les changements de json. Quelqu'un a un vieux plugin d'exportation dans son 3dmax, et je passe des années à éditer json à la main pour faire fonctionner les animations.

Cela a également été une de mes préoccupations. Je ne veux vraiment pas avoir à réexporter des centaines de modèles.

@jostschmithals
La politique de ne pas prendre en compte la compatibilité ascendante était certainement la base de la possibilité de développer three.js d'une manière aussi dynamique, avec des possibilités si fantastiques, jusqu'à présent.

C'est une fausse déclaration.
En fait, briser constamment la compatibilité descendante oblige les développeurs tiers à abandonner THREE.js
En revanche, les nouvelles fonctionnalités et les corrections de bogues ne signifient pas rompre la compatibilité avec les projets plus anciens.
Si Ricardo continue sur cette voie, le temps nous dira si j'ai raison ou pas.
à votre santé

Cela a également été une de mes préoccupations. Je ne veux vraiment pas avoir à réexporter des centaines de modèles.

D'accord! Le format json est quelque chose où je pense que la rétrocompatibilité est très importante. Ce n'est pas difficile à faire de toute façon.

D'accord! Le format json est quelque chose où je pense que la rétrocompatibilité est très importante. Ce n'est pas difficile à faire de toute façon.

Grand soupir de soulagement =]

Il semble un peu prématuré de publier une version sans mettre à jour le guide de migration lorsque des modifications importantes sont impliquées. Heureusement pour moi puisque je suis ces planches, j'étais au courant du changement d'animation. Je ne parierais pas que tous les utilisateurs étaient également préparés.

Je suis d'accord avec Remus sur le fait de supprimer des éléments du noyau juste pour conserver la limite de taille de 100 Ko. Personnellement, je me soucie 10000 fois plus de la fonctionnalité que de raser quelques octets. Je sais que je peux récupérer les fichiers nécessaires à partir d'exemples, mais cela semble une sorte de douleur inutile (surtout devoir les mettre à jour à chaque version).

En tout cas assez se plaindre de moi. Mis à part ces quelques critiques, des gars de travail formidables!

Il semble un peu prématuré de publier une version sans mettre à jour le guide de migration lorsque des modifications importantes sont impliquées.

Faire une version implique plusieurs étapes. Parfois, ma patience / mon dévouement s'épuisent ... 😕
Tout le monde peut mettre à jour la page de migration. J'adorerais y trouver de l'aide.

Il semble que cet exemple est cassé compte tenu des modifications apportées à r73. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Fixé!

Où puis-je trouver FontUtils dans R74? Semble être supprimé dans r74 ...

@pjanik

Oui, désolé, l'API TextGeometry a de nouveau changé. C'est de retour dans le noyau!

Veuillez utiliser http://threejs.org/examples/webgl_shadowmap.html comme référence.

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 );

} );

Si quelqu'un est intéressé, voici comment j'ai chargé la police sans requête asynchrone, en utilisant le module NPM [email protected] et le webpack: https://gist.github.com/pjanik/49c03c02c66341a26904
Si vous utilisez un autre outil de création, l'essentiel est de charger le fichier de police sous forme de chaîne. Peut-être que cette analyse amusante pourrait être extraite par une méthode d'aide à l'avenir?

Sur une note latérale, c'est cool que r74 inclue /examples dir (pas r73), continuez à le faire. : wink: Enfin, je ne peux utiliser que le package three , plus de fichiers de script externes (j'utilise aussi examples/js/controls/OrbitControls ). Ce serait encore plus cool si des exemples étaient publiés au format UMD, donc je pourrais directement exiger OrbitControls sans caler la dépendance globale THREE (pas un gros problème, car la plupart des outils de construction peuvent le gérer, mais quand même).

Merci!

ou vous pouvez simplement définir _typeface_js.loadFace localement et l'évaluer?

Ouais, désolé, l'API TextGeometry a encore changé. C'est de retour dans le noyau!

C'était une sage décision Ricardo.
Une modification mineure de la syntaxe du chargeur est nécessaire, mais elle est rétrocompatible.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
à votre santé

Devrions-nous ajouter le chargement arrière de la géométrie du texte dans l'ObjectLoader?

@fraguada bien, ce n'est pas si simple, il faut aussi gérer le fichier de police ...

FontUtil n'est pas défini dans la version de r74 que j'ai obtenue: https://github.com/mrdoob/three.js/blob/master/build/three.js

Cela semble être le même que celui utilisé par http://threejs.org/examples/webgl_shadowmap.html (sauf minifié) mais je ne le vois pas non plus explicitement en incluant FontUtils ou la police de caractères ... pourtant cette page d'exemple fonctionne . (Alors que j'obtiens toujours "_typeface_js n'est pas défini") Faites-vous quelque chose en plus de ce qui est montré dans votre commentaire (l'exemple de code 6 commentaires au-dessus de celui-ci)?

La documentation doit être mise à jour à mesure que l'API a changé, cela ne s'applique plus: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

Il aurait été très utile d'avoir un exemple très basique sans toutes les polices, les poids et les biseaux d'enregistrement de touches. Non pas que ceux-ci ne soient pas non plus intéressants, mais un simple élément de base dans vos exemples m'aurait fait gagner beaucoup de temps.

Cet exemple aurait pu beaucoup aider: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry , mais quand vous regardez la source, il finit par dessiner un tore car il tire des ressources externes vers faire réellement le travail.

J'ai rassemblé cet exemple simple sur JSFiddle pour quiconque trouve ce fil.
https://jsfiddle.net/287rumst/1/

Il aurait été super utile d'avoir un exemple très basique

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

Juste deux centimes parce que je suis également fan de la rétrocompatibilité:

Si la compatibilité ne peut pas être garantie, ce serait bien d'avoir un dossier upgrade (ou fixes ) dans github qui montre l'ancienne version et la nouvelle gestion. Une référence.

De cette façon, il serait facile pour les programmeurs de rattraper les changements.

J'utilise toujours r65 à cause de tels problèmes "inconnus" que je n'ai pas le temps supplémentaire à consacrer à trouver comment résoudre ces problèmes.

Salut à tous, je viens de passer de r71 à r76 et j'ai découvert le nouveau animation.mixer. Donc, pour que mes anciennes librairies d'objets 3D json fonctionnent, j'ai copié MorphAnimMesh.js Animation.js AnimationHandler.js et KeyFrameAnimation.js dans ma lib javascript. Mais maintenant, j'obtiens une erreur "hiérarchie de données non définie". Cela signifie-t-il que je dois réexporter tous mes anciens objets 3D json de Blender ou y a-t-il un moyen de les faire fonctionner?

Bonjour, Personne pour aider avec "hiérarchie de données non définie"?

Veuillez utiliser StackOverflow pour obtenir de l'aide.

Faire une version implique plusieurs étapes. Parfois, ma patience / mon dévouement s'épuisent ...: confus:
Tout le monde peut mettre à jour la page de migration. J'adorerais y trouver de l'aide.

J'ai récemment rencontré ce problème en utilisant une ancienne version de three.js.

Mais après avoir lu les commentaires et insultes que vous avez reçus, au lieu de demander de l'aide, je voulais juste vous remercier d'avoir maintenu three.js.

Vous êtes un gars super dévoué et patient! : +1:

La mise à jour de r72 à r84 a été un gros travail (~ 3 heures pour un projet).

Utile:

• Pour le problème de la police: voir le code source de http://necromanthus.com/Test/html5/koolmoves.html (vous ne chargez plus la police en HTML, mais à la place en JS, assignez une var et cela entre dans les paramètres. Attention à n'attribuer la police qu'APRÈS qu'elle a été chargée)
• voir les messages d'erreur dans la console de développement, ils aident beaucoup, car ils vous disent même quoi faire (bon travail @mrdoob )
• jetez également un œil à https://github.com/mrdoob/three.js/wiki/Migration-Guide

Mon heureux résultat: https://www.matheretter.de/geoservant/en/

En détail ce que je devais faire de la v72 à la v84:

1. Retirez de votre fichier html:

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

2. Exécutez votre scène threejs, vous obtenez probablement:

   Uncaught TypeError: c.generateShapes is not a function
   

3. Cela se produit car le moteur de rendu démarre sans que la police ne soit chargée. Commençons par charger la police, puis appelons le moteur de rendu au démarrage:

   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. Comme j'ai défini le nouveau texte pendant l'exécution, je dois définir les objets de scène sur le scape global, par exemple:

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

5. Exemple de la fonction de démarrage:

   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. J'ai également eu l'erreur THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. Pour résoudre ce problème, j'ai supprimé:

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

et ajouté (le pas de grille était 1 auparavant, puis il fallait définir la valeur sur 20 pour obtenir la même grille):

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

1. Ensuite, je dois m'occuper des modifications de threejs (affichées comme un avertissement dans la console Chrome):

6.1 THREE.MeshBasicMaterial: 'ambient' is not a property of this material. Résolu en supprimant ambient:color, de new THREE.MeshBasicMaterial();

6.2 Les lumières changent, il suffit de les remplacer comme indiqué dans les avertissements:

    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. - supprimez-le.

1. J'ai également changé la configuration du rendu:

   // 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. J'avais également besoin d'ajouter une couleur de fond blanc à la configuration de la scène:

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

Maintenant, mon application fonctionne comme avec l'ancienne version threejs. Bonne chance pour votre projet aussi!