Strange differences between different three.js versions

Questions
,
1

Hello,

I am learning Three.js, and for that purpuse, I purchased the book of the same name (namely, “learning Three.js”). After looking at the sample code, I experimentally switched it over to the three.js version from the github repository. This yielded strange results

Here is the scene rendered by the (outdated) three.js that comes with the book
good

and here the same rendererd by the very recent version:
bad

the latter looks rather unacceptable. The sample code that generates the scene looks very innocent, so I am leaving it out here. Can someone tell me what is going wrong?

Thanks,
Chris

2

Do you have a link to the code?

3

Here are a couple of the issues anyway: material.flatShading = true is the newer way to get the flat shading effect you see in the first image.

I’d double-check the SphereGeometry in the current docs to see if something looks inconsistent with the code in the book.

As for the shadows, the API has just changed a bit… adding an ambient light in the scene will lighten the shadows, and setting renderer.shadowMap.type = THREE.PCFSoftShadowMap might give softer edges like you see in the first example, along with maybe tweaking the LightShadow size.

1 Like
4

Yes, looking at this again it seems one of the most likely differences is the shadow map size.

Try adding these lines:

light.shadow.mapSize.width = 2048; 
light.shadow.mapSize.height = 2048;
5
6

thanks for your replies, guys. I am amazed that the API has changed so much to cause this kind of effect, and the fact that the defaults yield such bad results. I have increased the mapSize (was reluctant to do so earlier, because this is a 4 fold increase over the default), and things look better. However, the shadow is still way too dark, so I may have to add the ambient light as mentioned. Material.flatShading did not change anything.

This renders the book rather useless. I just found out that the author is currently working on rewriting all the code to the most recent release of three.js and the next edition of the book

7

The code of the book uses three.js R69 which was released on 28 Oct 2014. Many changes were introduced since that time, some of them require migration tasks by the user when upgrading the library.

Sry for the confusion but certain improvements could not be implemented backwards compatible.