Three.js: LookAt() Does not work with the CSS3DRenderer in Safari

[terkelg]

The camera lookAt() method does not work in Safari on Mac and iOS devices when you use CSS3DRenderer. It works fine in both Chrome and Firefox.

Here's a JSFiddle to demonstrate:
http://jsfiddle.net/akmcv7Lh/56/

Three.js version

• [x] Dev
• [x] r76

• [ ] ...

  Browser

• [ ] All of them

• [x] Safari
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer
  

  OS

I haven't tested on other than OSX and iOS

• [ ] All of them
• [ ] Windows
• [ ] Linux
• [ ] Android
• [x] OSX
• [x] IOS

[WestLangley]

Commenting out one of the lines helps, but response is jittery in OSX Safari.

camera.position.x += ( mouseX - camera.position.x ) * .02;
//camera.position.y += ( -mouseY - camera.position.y ) * 0.02;
camera.lookAt( lookAt );

With the above edit, if you move the mouse slowly, you can see that the two renderings get out-of-sync -- and then snap back in-sync periodically. Safari only.

[terkelg]

Thanks for the quick reply @WestLangley. Interesting it only works in one axis in Safari.
I'll try to look more into why later today

[WestLangley]

The suggestion in #8845 largely fixes this bug in Safari. Modify the following function in CSS3DRenderer.js like so:

var epsilon = function ( value ) {

    return Math.abs( value ) < Number.EPSILON ? 0 : value.toFixed( 6 );

};

It is not an acceptable solution, though, because it leads to innacuracies.

[andrewbusch7]

@WestLangley

It is not an acceptable solution, though, because it leads to innacuracies.

Can you describe these inaccuracies? Would it be relevant in a simple animation, or only for fine detail meshes & computations?

[mrdoob]

7802

[WestLangley]

@andrewb273 Correction. Actually, the fiddle by @terkelg does appear to work for me now with this change.

http://jsfiddle.net/akmcv7Lh/57/

I have not investigated situations in which this patch may be unacceptable.

[saru-dev]

I'm nobody to wade in on this issue but have been having similar problems with Safari, weirdly only on iPhone 5 and not 6.
The jsfiddle solution works much better for me also but might I suggest avoiding toFixed as it outputs a string, and instead consider Math.round constrained as follows:

return Math.abs( value ) < Number.EPSILON ? 0 : Math.round( value * 1e6 ) / 1e6;

learnt from http://stackoverflow.com/a/29494612/2413733