【threejs】较大物体或shape的贴图较小问题处理方法-编程知识

【threejs】较大物体或shape的贴图较小问题处理方法

问题

有的场景内相对体型差距过大的物体（如山地海洋等····）由于尺寸问题，加载贴图过于小，同时shader也无法完全展示，如图
在这里插入图片描述

我们可以获取物体的uv，进行缩放使得贴图可以完全展开
如果uv是乱的可以用xyz坐标最大最小值先排布uv再对uv进行缩放

//假设你有一个 mest.geometry(物体网格)let max = { x: 10000, y: 10000, z: 10000 }let min = { x: 30000, y: 30000, z: 30000 }let positions = geometry.getAttribute('position').array.map((item, index) => {let axis = index % 3switch (axis) {case 0:return item - min.xbreak;case 1:return item - min.ybreak;case 2:return item - min.zbreak;default:break;}})let uv_ = []let _X = max.x - min.xlet _Y = max.y - min.ylet _Z = max.z - min.zfor (let i = 0; i < positions.length / 3; i++) {let x = positions[i * 3]let y = positions[i * 3 + 1]let z = positions[i * 3 + 2]let _u = x / _Xlet _v = z / _Z// 或者你的高度轴是y//  _v = y/_Yuv_.push(_u, _v)}let uvs = uv_.map(item=>item*scale)//缩放// 只是改原始模型uv比例 let uvs = geometry.getAttribute('uv').array.map(item => item / 500)//缩放uv// uv传给geometry（网格）geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2))
```# 效果
```javascript
//我这里只是进行uv缩放const mesh = new Mesh(geometry, mat)// mesh.position.setZ(-this.lineTick)mesh.position.set(startX, startY, - this.lineTick)// console.log(geometry);let uvs = geometry.getAttribute('uv').array.map(item => item / 500)//缩放geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2))mesh.scale.set(scale, scale, 1)return mesh
```![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d3ddd5998906476bb488d32da7fb56a9.png)
贴图完全展开了