【Threejs】04材质贴图和360°环境贴图

最新推荐文章于 2025-03-19 16:42:36 发布

原创

最新推荐文章于 2025-03-19 16:42:36 发布 · 1.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了如何在Three.js中使用TextureLoader加载和应用纹理到几何体上，包括材质贴图的创建和环境贴图的使用方法，以及如何创建立方体纹理作为背景。

上一节中讲述了缓冲区几何体，这一节我们来着重讲述一下纹理（texture）。
利用纹理我们可以给物体和环境添加自己喜欢的图案。

材质贴图

创建纹理

首先利用TextureLoader创建一个texture变量，在load后面添加图片路径

// 创建纹理
const texture= new THREE.TextureLoader().load("/textures/03-map.jpg");

创建几何体添加材质

在我们原先给几何体添加颜色的地方使用map参数，将刚刚创建的texture传入进去。

//创建几何体
const geometry = new THREE.BoxGeometry(1,1,1);
//创建材质
const material = new THREE.MeshBasicMaterial({
   
   
    map:texture,
    // color:0x00ff00
});

演示效果

为物体贴图后的效果如下图所示。
在这里插入图片描述

环境贴图

聊完了材质贴图，下面简单聊聊环境贴图。环境贴图需要使用到6张单独的图像所组成的数组才能构成360°的全景效果。
####如何下载全景图片并切片

首先需要准备一张全景图片，可以直接在百度中搜索“全景图片”
下载到本地
使用PTGui进行切片，点击下载
打开PTGui，点击上方工具栏Tools
点击红框的选项
点击加号添加图片，并按照图示进行配置
最后点击右下角convert导出，默认导出到原始图片的文件夹

创建立方体纹理

首先需要找到图片所在的路径，再按照“左右上下”的顺序将图片的名称写到数组内，最后在场景中添加背景纹理。

const cubeTexture = new THREE

最低0.47元/天解锁文章