Three.js地板贴图

### 如何在 Three.js 中添加地板纹理材质实现地砖效果

为了创建具有真实感的地砖效果，在Three.js中可以加载并应用纹理到平面几何体上。通过设置重复属性可以使纹理平铺显示，从而模拟出地砖的效果[^1]。

下面是一个简单的示例代码来展示如何操作：

// 创建场景对象Scene
const scene = new THREE.Scene();

// 加载器用于加载图像文件作为纹理
const textureLoader = new THREE.TextureLoader();
// 使用TextureLoader加载图片资源,路径为'./textures/stone.png'
let floorTexture = textureLoader.load('./textures/floor.jpg');

// 设置纹理的环绕方式以及是否沿s轴(tu)和t轴(tv)方向重复渲染该纹理
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
// 定义纹理在一个维度上的重复次数
floorTexture.repeat.set( 50, 50 );

// 平面缓冲几何体PlaneBufferGeometry定义地面大小
const planeGeometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
// MeshStandardMaterial标准网格材质接收阴影，并指定颜色或地图参数map为之前加载好的纹理
const planeMaterial = new THREE.MeshStandardMaterial({
    map: floorTexture,
});

// 将geometry与material组合生成mesh物体
const mesh = new THREE.Mesh(planeGeometry, planeMaterial);
// 调整平面的方向，默认情况下它面向z轴正向；这里旋转使其朝向y轴负半空间即向下看齐
mesh.rotation.x = Math.PI / -2;

scene.add(mesh); // 添加至场景内

此段脚本展示了基本流程：先实例化`THREE.Scene()`得到一个空白画布；接着利用`THREE.TextureLoader().load(url)`方法读取外部jpg/png格式的地图数据；再配置好纹理属性使之能够按照需求多次映射在同一表面上形成连续图案；最后构建起由顶点构成的大面积矩形区域——也就是所谓的“地板”，并通过调整其姿态让这个二维图形正确呈现于三维坐标系之中[^1]。