Three.js: r73 : nothing works !?!

What doesn't work? What errors are you getting? I always make sure all the examples still work. If something broke we should add a example that tests that.

What doesn't work?

Nothing works !!!
Just an example (for you):
http://necromanthus.com/Test/html5/dog_r72.html
http://necromanthus.com/Test/html5/dog_r73.html
Errors:

• THREE.MorphAnimMesh is undefined
• loader.load is not a function

Why did you release something like that ???

Ah! I see.

We have completely replaced the animation system and SEA3D still relies in the old one (@sunag is working on an update I think).

In the meantime you need to include the old animation system in your project:

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

You'll find the files in the examples folder.

We have completely replaced the animation system

And again, you messed up the backward compatibility ... OMG

Anyway, here is something else (without animation and loader):
http://necromanthus.com/Test/html5/koolmoves_r72.html
http://necromanthus.com/Test/html5/koolmoves_r73.html
Errors:

• _typeface_js is not defined
• THREE.TextGeometry is not a constructor

Honestly, r73 is a complete mess and it should be removed.
cheers

I've been relying on Three.js for ChiliPeppr for about 1.5 years now. This morning it appears THREE.FontUtils is undefined so all font rendering is broken in ChiliPeppr. I'm guessing it's the same r73 issue as @RemusMar is referring to as well.

FontUtils and TextGeometry utils have also been removed from core.

You now have to include the files separately:

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

I decided to move them out of core because the user had to include the *.typeface.js anyway.

@RemusMar We don't guarantee backwards compatibility between versions. But we do add transition code that notifies the user and keeps the code working when/where we can.

FontUtils and TextGeometry utils have also been removed from core.

Why don't you remove everything from the core?
A core with ZERO bytes does not need to be downloaded at all.

We don't guarantee backwards compatibility between versions.

That's a bad move Ricardo.
As I said from the very beginning:

The backward compatibility is a MUST in any serious project.
Otherwise less and less people will be interested in that project.

cheers

Why don't you remove everything from the core?
A core with ZERO bytes does not need to be downloaded at all.

I gather you're an emotional guy. However, you stay around so I also gather that at the end of the day you find the project useful 😉

The backward compatibility is a MUST in any serious project.

Maybe this is not as serious of a project as you think it is? I'm not Adobe you know?

Otherwise less and less people will be interested in that project.

People losing interest is not something I worry about. Instead, I focus on creating a beautiful API that abstract the annoyances of computer graphics and, at the same time, I want the library to fit in 100kb gzipped. It's impossible to forever include all the features that people add.

@RemusMar Backward compatibility, if you use js libs like that you should be able to repair issue by yourself if something is not supported anymore. If not, ask in a more co-operative way, everybody is pleased to help. If examples are broken, feel free to repair it...

@RemusMar One of the very first things I learned about three.js, when I started 3D programming in JavaScript, was the fact that it is not backwards compatible.

I think, in general that is absolutely no problem, because I only have to make sure, that in my project I link to the same version of three.js I have built my code with.

The policy not to take backwards compability into account was certainly the basis for the chance to develop three.js in such a dynamic manner, with such very fantastic possibilities, up to now.

That's a bad move Ricardo

amazing how people notice this after 70+ revisions )

But to add to the point, someone was recently writing to me "the latest stable three.js is r72", lol. there is no stable three.js. they do not update old revisions with bug fixes, instead there comes new version with bugfixes _and_ breaking changes or new bugs.

Then again, some things magically work through versions even if underlying code was turned upside down. Like skins using buffer geometry )

While we're on subject of breaking changes, what is pissing me off the most are json changes. Someone has old exporting plugin in his 3dmax, and I spend ages editing json by hand to make animations work.

Then again, some things magically work through versions even if underlying code was turned upside down. Like skins using buffer geometry )

That took some effort! 😅

While we're on subject of breaking changes, what is pissing me off the most are json changes. Someone has old exporting plugin in his 3dmax, and I spend ages editing json by hand to make animations work.

Yes. Animation needs to get stable ASAP. I think the new animation system is a great step in the right direction.

It looks like this sample is broken given your r73 changes. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Oh! Always forget about the samples in docs...

@mrdoob
What should I use to replace the "old" THREE.Animation class?
Are there any examples that use the new animation system? It's not so clear what is new on the examples page.

While we're on subject of breaking changes, what is pissing me off the most are json changes. Someone has old exporting plugin in his 3dmax, and I spend ages editing json by hand to make animations work.

This has been a concern of mine as well. I really don't want to ever have to re-export hundreds of models.

@jostschmithals
The policy not to take backwards compability into account was certainly the basis for the chance to develop three.js in such a dynamic manner, with such very fantastic possibilities, up to now.

That's a false statement.
In fact, breaking the backward compatibility all the time makes the 3rd party developers to give up on THREE.js
On the other hand, new features and bug fixes does not mean to break the compatibility with the older projects.
If Ricardo will continue on this path, time will tell if I'm right or not.
cheers

This has been a concern of mine as well. I really don't want to ever have to re-export hundreds of models.

Agreed! The json format is something where I think backwards compatibility is super important. Is not hard to do anyway.

Agreed! The json format is something where I think backwards compatibility is super important. Is not hard to do anyway.

Big sigh of relief =]

It does seem a bit premature to release a build without updateing the migration guide when breaking changes are involved. Fortunately for me since I follow these boards, I was aware of the Animation Change. I wouldn't bet that all users were equally prepared.

I do agree with Remus about removing things from the core just to keep the 100KB size limit. Personally I care about 10000x more about functionality than shaving off a few bytes. I know I can grab the necessary files from examples, but it seems a kind of unnecessary pain in the butt (especially having to update them every release).

Anyway enough complaining from me. These few criticisms aside, amazing work guys!

It does seem a bit premature to release a build without updateing the migration guide when breaking changes are involved.

Doing a release involves quite a few steps. Sometimes my patience/dedication runs out... 😕
Anyone can update the migration page. I would love to get some help there.

It looks like this sample is broken given your r73 changes. http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry

Fixed!

Where can I find FontUtils in r74? Seems to be removed in r74...

@pjanik

Yeah, sorry about that, the TextGeometry API changed again. It's back in core though!

Please use http://threejs.org/examples/webgl_shadowmap.html as reference.

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

} );

If anyone is interested, this is how I loaded font without async request, using NPM [email protected] module and webpack: https://gist.github.com/pjanik/49c03c02c66341a26904
If you're using any other build tool, the key thing is to load font file as a string. Maybe this funny parsing could be extracted to some helper method in the future?

On a side note, it's cool that r74 includes /examples dir (r73 didn't), please continue to do that. :wink: Finally, I can use only three package, no externals script files anymore (I'm also using examples/js/controls/OrbitControls). It would be even more cool if examples were published using UMD format, so I could directly require OrbitControls without shimming global THREE dependency (not a big deal, as most of the build tools can handle it, but still).

Thanks!

or you could just define _typeface_js.loadFace locally and eval it?

Yeah, sorry about that, the TextGeometry API changed again. It's back in core though!

That was a wise decision Ricardo.
A minor syntax change for the loader is needed, but it is backward compatible.
r71: http://necromanthus.com/Test/html5/koolmoves.html
r74: http://necromanthus.com/Test/html5/koolmoves_r74.html
cheers

Should we add back loading of text geometry in the ObjectLoader?

@fraguada well, is not that easy, we should also handle the font file...

FontUtil is not defined in the version of r74 I've been getting: https://github.com/mrdoob/three.js/blob/master/build/three.js

That appears to be the same as the one being used by http://threejs.org/examples/webgl_shadowmap.html (except minified) but I also don't see it explicitly including FontUtils or typeface... yet that example page works. (Whereas I still get "_typeface_js is not defined") Are you doing something in addition to what is shown in your comment (the code sample 6 comments above this one)?

The documentation needs to get updated as the API changed, this no longer applies: http://threejs.org/docs/index.html#Reference/Extras.Geometries/TextGeometry

It would have been super useful to have a very basic example without all the keystroke recording switching fonts, weights and bevels. Not that those aren't also great to have, but a simple basic one in your examples would have saved me a ton of time.

This example could have helped a lot: http://threejs.org/docs/scenes/geometry-browser.html#TextGeometry, but when you look at the source, it only ends up drawing a torus as it pulls in external resources to actually do the work.

I put together this simple example on JSFiddle for anyone that finds this thread.
https://jsfiddle.net/287rumst/1/

It would have been super useful to have a very basic example

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

Just two my cents because I am also a fan of backwards compatibility:

If compatibility cannot be guaranteed, it would be nice to have a upgrade folder (or fixes) in github that shows the old version and the new handling. A reference.

This way it would be easy for programmers to catch up with the changes.

I am still using r65 because of such "unknown" problems that I don't have the extra time to spent, figuring out how to fix these issues.

Hi all, I just moved from r71 to r76 and discovered the new animation.mixer. So to keep my older json 3D objects librairies working I copied MorphAnimMesh.js Animation.js AnimationHandler.js and KeyFrameAnimation.js into my javascript lib. But now I get "data hierarchy undefined" error. Does this mean I have to RE-export all my former 3D json objects from Blender or is there a way the keep these working ?

Hello, Nobody to help with "undefined data.hierarchy" ?

Please, use StackOverflow for help.

Doing a release involves quite a few steps. Sometimes my patience/dedication runs out... :confused:
Anyone can update the migration page. I would love to get some help there.

I recently run into this problem using an older version of three.js.

But after reading through the comments and insults you received, instead of asking for help, I just wanted to thank you for maintaining three.js.

You're a super dedicated and patient guy! :+1:

The update from r72 to r84 was a bunch of work (~3 hours for one project).

Helpful:

• For the font issue: see source code of http://necromanthus.com/Test/html5/koolmoves.html (you do not load the font in HTML anymore, but instead in JS, assign a var and this goes into the parameters. Watch out to only assign the font AFTER it has been loaded)
• see the error messages in the dev console, they help a lot, because they even tell you what to do (good work @mrdoob )
• also take a look at https://github.com/mrdoob/three.js/wiki/Migration-Guide

My happy result: https://www.matheretter.de/geoservant/en/

In detail what I needed to do from v72 to v84:

1. Remove from your html file:

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

2. Run your threejs scene, you probably get:

   Uncaught TypeError: c.generateShapes is not a function
   

3. This happens because the renderer starts without having the font loaded. So let's first load the font and then call the renderer at startup:

   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. As I set the text new during runtime, I need to define the stage objects on global scape, e.g.:

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

5. Example of the start function:

   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. I also got the error THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead. To solve this, I removed:

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

and added (gridstep was 1 before, then needed to set the value to 20 to get the same grid):

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

1. Then I need to take care of the threejs changes (shown as warning in the Chrome console):

6.1 THREE.MeshBasicMaterial: 'ambient' is not a property of this material. Solved by removing ambient:color, from new THREE.MeshBasicMaterial();

6.2 Lights changes, just replace as stated in the warnings:

    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. - remove it.

1. I also changed the renderer setup:

   // 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. I also needed to add a white background color to the scene setup:

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

Now my application runs as with the old threejs version. Good luck for your project too!