I'm making a 360 viewer, so textures are inside a cylinder. Problem is that they appear inverted horizontally.
I know about texture.flipY
but I haven't found a texture.flipX
on the source .
So how can I flip a texture horizontally, or along the x axis, directly in the code? (not using an image editor)
To flip a texture horizontally, you can do the following:
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = - 1;
As mentioned in the comments, this approach requires the texture to be a power-of-two in size.
three.js r.87
The answer was easier than I thought.
cylinder.scale.x = -1;
And don't forget to add
material.side = THREE.DoubleSide;
It might seem a bit of an overkill, but I think a nice way to do it is to turn it by 180 degrees (PI radians) around it's center then flip it:
texture.center = new THREE.Vector2(0.5, 0.5);
texture.rotation = Math.PI;
texture.flipY = false;
Another approach here is to change the geometry. In the cylinder geometry you specify thetaStart
and thetaLength
for the cylinder section you want to render, and usually you choose a positive angle, ie thetaLength>0
. If instead you pass thetaStart + thetaLength
and -thetaLength
to CylinderBufferGeometry
, the cylinder is rendered clockwise instead of counter-clockwise, and all face normals now point inwards. So, there is no need to flip the texture anymore.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.