three.js - 是否可以将立方体环境贴图围绕 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;

我该怎么做？

标签： three.jsar.js

Answer 1

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

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

解决方案

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

我们必须记住，默认情况下 Three.jsCamera是朝向-Z方向的。

看看这些图片。左图描绘了一个默认的 6 图像放置以形成一个立方体贴图。右图表示围绕 Y 轴 180 度重新定向的立方体。

重命名过程

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

|--------------------|--------------------|
|   "Default name"   |      "RENAMED"     | 
|--------------------|--------------------|
|   posX.jpg         |         negX.jpg   |
|--------------------|--------------------|
|   negX.jpg         |         posX.jpg   |
|--------------------|--------------------|
|   posZ.jpg         |         negZ.jpg   |
|--------------------|--------------------|
|   negZ.jpg         |         posZ.jpg   |
|--------------------|--------------------|

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