Invert material image of sphere in three.js

Question

I'm using a plugin that implements 360 / VR video into our video player. It does this by using Three.js to create a sphere and taking the video itself and making it the material the sphere is created out of. The viewport is then set inside of the sphere to give it the 360 view.

The problem I'm running into is that the material is placed on the sphere using THREE.DoubleSide (THREE.BackSide would also work since we're only viewing it from the inside of the sphere), but the image is inverted since we are viewing it from the inside.

Is there a way to invert the image material that is placed on the sphere?

WestLangley · Accepted Answer · 2016-04-07T15:24:45.673

0

One way to create a spherical panorama, that is not inverted, is to use this pattern:

var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
var material = new THREE.MeshBasicMaterial( { map: texture } );

var mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( - 1, 1, 1 );
scene.add( mesh );

It is generally not advisable to set negative scale values in three.js, but in this case, since you are using MeshBasicMaterial which does not utilize normals, it is OK to do so.

three.js r.75

edited Apr 07 '16 at 15:24

answered Apr 07 '16 at 15:15

WestLangley

102,557
10
276
276

Here is my current code: http://pastebin.com/aSG4HMVq If I add your scale.set code, it loads in without error but nothing is displayed except black. – alex-phillips Apr 07 '16 at 15:25
Will update my code, however I do get the following error: THREE.SphereBufferGeometry is not a constructor – alex-phillips Apr 07 '16 at 15:40
Update to the current release. You can use `THREE.SphereGeometry` if you want. – WestLangley Apr 07 '16 at 15:46

Invert material image of sphere in three.js

1 Answers1