是否可以将立方体环境贴图绕 Y 轴旋转 180 度？

Question

我想将立方体贴图绕 Y 轴旋转 180 度。

scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader()
                                      .setPath( '/path/to/my/docs/' )
                                      .load( [ 'posX.jpg', 'negX.jpg', 
                                               'posY.jpg', 'negY.jpg', 
                                               'posZ.jpg', 'negZ.jpg' ] );
// this doesn't work
scene.background.rotation.y = Math.PI;

我该怎么做？

Answer 1

遗憾，但在 Three.js 中，我无法使用 rotation 参数旋转我的立方体贴图：

scene.background.rotation.y = Math.PI;

解决方案

在我的例子中最简单的解决方案（我想绕 Y 轴旋转它）是重命名构成立方体贴图侧面的 4 个图像，以将立方体（天空盒）重新定向 180 度。

我们一定要记住默认Three.jsCamera看向-Z方向.

看看这些照片。左图描绘了一个默认的 6-image-placement 来形成立方体贴图。右图代表 180-degrees-about-Y-axis 重新定向的立方体。

重命名过程

因此，为了重新定位，您只需重命名 4 个源文件。 table 向您展示如何：

Default name	Renamed
posX.jpg	negX.jpg
negX.jpg	posX.jpg
posZ.jpg	negZ.jpg
negZ.jpg	posZ.jpg

并在重命名过程后，将 posY.jpg 和 negY.jpg 图像旋转 180 度。