要将瓷砖纹理修改为路面纹理并在 Three.js 中创建一个具有路面效果的纹理阵列，我们可以遵循相似的步骤，但选择一个更适合路面的纹理图像。以下是详细的步骤和完整的示例代码：
步骤一：创建矩形平面几何体
创建一个矩形平面作为地面的基础。
javascript
const geometry = new THREE.PlaneGeometry(2000, 2000, 100, 100); // w, h, wSeg, hSeg步骤二：加载纹理并设置阵列模式
加载路面纹理图像，并设置纹理的重复属性以适应更大的几何体。
javascript
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load('path/to/your/asphalt.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(20, 20); // 根据纹理和所需效果调整重复次数步骤三：创建材质并应用纹理
创建材质并使用加载的纹理。
javascript
const material = new THREE.MeshLambertMaterial({
map: texture,
side: THREE.DoubleSide // 确保两面都渲染
});步骤四：创建网格模型并添加到场景
将几何体和材质组合成网格模型，并添加到场景中。
javascript
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);步骤五：调整网格模型的位置和旋转
调整网格模型的位置和旋转，确保它正确显示在场景中。
javascript
mesh.position.y = 0; // 确保地面在原点的 Y 轴位置
mesh.rotateX(-Math.PI / 2); // 旋转以贴合 XY 平面完整实例代码
以下是完整的 HTML 示例，展示如何在 Three.js 中创建具有路面纹理阵列的地面效果：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Road Texture Array Example</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 2, 4).normalize(); // 将位置向量标准化为方向向量
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
// 创建矩形平面几何体
const geometry = new THREE.PlaneGeometry(2000, 2000, 100, 100);
// 创建纹理加载器并加载纹理
const loader = new THREE.TextureLoader();
const texture = loader.load('img/staff_1024.jpg');
// 设置纹理的阵列模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(20, 20); // 根据纹理和所需效果调整
// 创建材质并应用纹理
const material = new THREE.MeshLambertMaterial({
map: texture,
side: THREE.DoubleSide
});
// 创建网格模型并添加到场景
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 调整网格模型的位置和旋转
mesh.position.y = 0;
// mesh.rotateX(-Math.PI / 2);
// 设置相机位置
camera.position.z = 10;
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>请将 'path/to/your/asphalt.jpg' 替换为您要加载的路面纹理图像的实际路径。此示例创建了一个平面，并为其应用了重复的路面纹理，模拟了路面的效果。