Three.js 使用UV贴图制作地面
概述
若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
在Three.js中使用UV纹理重复创建一个带有+号的地面。
原理
- 加载图片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);