ThreeJS 立方体贴图

Melody132

发布于 2020-03-12 00:03:00

3K0

发布于 2020-03-12 00:03:00

文章被收录于专栏：时光笔记

前言

什么要贴图？

在上一篇《ThreeJS 掏洞术》中，利用ThreeBSP完成了在‘墙’上掏出‘门’或‘窗户’洞的效果。但那个所谓的‘墙’一点也不像，试想谁家的墙是绿色的呀，而且就算换成其他颜色也是不行的，因为色彩太单调了，实际上在我们现实世界中，物体表面的色彩通常都是丰富的。所以要让几何体看起来真实、精致就需要贴图。

其实简单一句话形容就是：就像家里装修时要给大白墙贴上壁纸一样。

那么本文将‘简单描述’一下给立方体贴图的过程，我之所以说‘简单描述’是因为这里涉及的领域比较多，所以文中的内容就不做过多扩展描述了，只简述关于《ThreeJS 立方体贴图》的干货。

示例

什么是贴图？

贴图学名叫做 Texture Mapping ，译作纹理映射、纹理贴图、材质贴图。

简单说就是：把一张图片贴到几何体的表面上。

那么下面开始写代码！

必要操作：使用TextureLoader对象的load函数，将图片加载为纹理对象，并使用该纹理对象创建一个MeshBasicMaterial (基本材质)。以下素材，下载可以右键点击另存为。

let mesh = new THREE.Mesh(
        new THREE.BoxGeometry(300, 300, 300),
        new THREE.MeshBasicMaterial( {
            map: new THREE.TextureLoader().load('./crate.jpg') }
        )
    );
scene.add(mesh);

这样就将图片覆盖到了立方体的6个面上，以下是效果图

如果你想6个面分别贴不同的图的话也好办，最简单的方法是，Mesh构造函数的第二个参数，可以直接传一个Material数组，所以我们可以创建对应6个面的MeshBasicMaterial数组，那么现在演示如何将下面6个图片分别贴到6个面上。

//创建纹理加载器对象
let textureLoader = new THREE.TextureLoader();
let mesh = new THREE.Mesh(
    new THREE.BoxGeometry(300, 300, 300),
    [
        //下标0：右面材质
        new THREE.MeshBasicMaterial({
            map: textureLoader.load('./img/tietu_demo_5.jpg')
        }),
        //下标1：左面材质
        new THREE.MeshBasicMaterial({
            map: textureLoader.load('./img/tietu_demo_6.jpg')
        }),
        //下标2：上面材质
        new THREE.MeshBasicMaterial({
            map: textureLoader.load('./img/tietu_demo_7.jpg')
        }),
        //下标3：下面材质
        new THREE.MeshBasicMaterial({
            map: textureLoader.load('./img/tietu_demo_8.jpg')
        }),
        //下标4：前面材质
        new THREE.MeshBasicMaterial({
            map: textureLoader.load('./img/tietu_demo_9.jpg')
        }),
        //下标5：后面材质
        new THREE.MeshBasicMaterial({
            map: textureLoader.load('./img/tietu_demo_10.jpg')
        }),
    ]
);
scene.add(mesh);

效果如下图：