[英]How to flip a Three.js texture horizontally
I'm making a 360 viewer, so textures are inside a cylinder.我正在制作 360 查看器,因此纹理位于圆柱体内。 Problem is that they appear inverted horizontally.
问题是它们水平倒置。
I know about texture.flipY
but I haven't found a texture.flipX
on the source .我知道
texture.flipY
但我没有在 source上找到texture.flipX
。
So how can I flip a texture horizontally, or along the x axis, directly in the code?那么如何直接在代码中水平或沿 x 轴翻转纹理呢? (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.正如评论中提到的,这种方法要求纹理的大小为 2 的幂。
three.js r.87三.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:这似乎有点矫枉过正,但我认为一个很好的方法是将它围绕它的中心旋转 180 度(PI 弧度)然后翻转它:
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
.在圆柱几何体中,您为要渲染的圆柱部分指定
thetaStart
和thetaLength
,通常选择一个正角,即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.相反,如果您将
thetaStart + thetaLength
和-thetaLength
给CylinderBufferGeometry
,圆柱体将顺时针渲染而不是逆时针渲染,并且所有面法线现在都指向内部。 So, there is no need to flip the texture anymore.因此,无需再翻转纹理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.