Examples: Clean up

[Mugen87]

This PR cleans up misc_controls_deviceorientation.html and explains the following line of code in all relevant examples.

geometry.scale( - 1, 1, 1 );

I was frequently asked why this operation is performed so i've added a comment in the code.

[mrdoob]

Thanks!

[WestLangley]

Sorry, I am not in favor of this at all...

three.js does not support scale( - 1, 1, 1 ); Such a pattern leaves the normals and winding order in an inconsistent state.

Consequently, I would not add further credence to that pattern by adding a comment justifying it.

The only reason it works in these examples, is because the material is MeshBasicMaterial and that material does not respond to lights.

I was frequently asked why this operation is performed so i've added a comment in the code.

The proper answer is to say "don't do it".

The way to handle this is to use this pattern:

var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );

var texture = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
texture.wrapS = THREE.RepeatWrapping;
texture.offset.set( 0, 0 ); // optional
texture.repeat.set( - 1, 1 );

var material = new THREE.MeshBasicMaterial( {
	map: texture,
	side: THREE.BackSide
} );

I'm not sure how to handle video textures in this case, though. That example appears to be distorted anyway, so something is not right...

[mrdoob]

👍

[Mugen87]

@WestLangley Yes, i know the drawbacks of this approach. I'm actually familiar with your posts at stackoverflow 😉 e.g. https://stackoverflow.com/a/16840273

Although geometry.scale( - 1, 1, 1 ); is not a consistent solution, users quickly get the desired result if they want to develop something like a 3D image gallery: https://www.youtube.com/watch?v=jT2mR9WzJ7Y&feature=youtu.be&t=1160

But yeah, the mentioned code snippet is of course the cleaner approach.

[Mugen87]

BTW: @WestLangley What's the problem with video textures and your code snippet?

[WestLangley]

Right. Users copy these example. That is why the quality of the examples is so important.

Regarding the video example. As-implemented, it is distorted.

When trying repeat.set( - 1, 1 ), the video rendered scrambled for me.

[WestLangley]

Video distortion fixed in #11994

[Mugen87]

Cool! 👍