Three.js 立方体纹理图片命名对照

前端

2023-12-03 17:13:30

作为一名技术博客创作专家，我经常遇到 Three.js 中使用 CubeTexture（立方体纹理）的情况。这种纹理经常用于创建天空背景，为场景增添逼真感和深度。

然而，在实际开发中，我发现 Three.js 中 CubeTexture 的图片命名有时会带来一些麻烦。它要求图片按特定的顺序排列，这可能会让人困惑，尤其是当我们试图为自己的场景添加自定义背景时。

为了解决这个问题，我找到了一个巧妙的方法：将立方体的六个面展开来。通过这种方式，我们可以使用更熟悉的命名惯例，例如 "正面"、"背面"、"左面" 等。

展开立方体

要展开立方体，我们可以将其想象为一个展开的盒子。六个面将排列如下：

正面（+X）
负面（-X）
顶部（+Y）
底部（-Y）
左面（+Z）
右面（-Z）

图片命名对照

有了展开的立方体，我们现在可以轻松地为每个面指定图像文件。以下是图片命名对照：

面	图片名称
正面	pos-x.jpg
负面	neg-x.jpg
顶部	pos-y.jpg
底部	neg-y.jpg
左面	pos-z.jpg
右面	neg-z.jpg

在 Three.js 中使用

有了展开的立方体和图片命名对照后，我们就可以在 Three.js 中轻松创建 CubeTexture：

const textureLoader = new THREE.TextureLoader();

const cubeTexture = new THREE.CubeTexture([
    textureLoader.load('path/to/pos-x.jpg'),
    textureLoader.load('path/to/neg-x.jpg'),
    textureLoader.load('path/to/pos-y.jpg'),
    textureLoader.load('path/to/neg-y.jpg'),
    textureLoader.load('path/to/pos-z.jpg'),
    textureLoader.load('path/to/neg-z.jpg'),
]);