Three.js 使用UV贴图制作地面

Three.js 使用UV贴图制作地面

• 概述
• 原理

概述

若有帮助到你，麻烦点一波关注，博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
在Three.js中使用UV纹理重复创建一个带有+号的地面。

原理

1. 加载图片texture的一个类

let textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load("base.jpg")
// THREE.RepeatWrapping：平铺重复。
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
// 设置重复次数
texture.repeat.set(100, 100)

2.创建一个平面

let geometry = new THREE.PlaneGeometry(1000, 1000, 32);
let material = new THREE.MeshBasicMaterial({
    	map: texture,  // 使用纹理贴图
        side: THREE.DoubleSide  // 两面都渲染
    });
let plane = new THREE.Mesh(geometry, material);
plane.rotateX(Math.PI / 2)
scene.add(plane);