diff --git a/src/components/script.js b/src/components/script.js index c45bb34..4df4982 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -123,6 +123,8 @@ function createGeo(geoJson) { else if (info.geometry.type === 'Polygon') info.geometry.coordinates.forEach((j) => areaGroup.add(createShapeWithCoord(j, materials))) if (info.properties.adcode === 330000) { + console.log(info.properties.name, areaGroup); + // 获取区域的边界框 const box = new THREE.Box3().setFromObject(areaGroup); const minX = box.min.x; @@ -171,7 +173,48 @@ function createGeo(geoJson) { } if (info.properties.adcode > 330000 && info.properties.adcode < 340000) { - console.log(info.properties.name); + console.log(info.properties.name, areaGroup); + const box = new THREE.Box3().setFromObject(areaGroup); + const minX = box.min.x; + const maxX = box.max.x; + const minY = box.min.y; + const maxY = box.max.y; + const zhejiangTexture = new THREE.TextureLoader().load(zhejiang); + + areaGroup.children.forEach(mesh => { + if (mesh.geometry instanceof THREE.ExtrudeGeometry) { + const geometry = mesh.geometry; + const positions = geometry.attributes.position.array; + const uvs = new Float32Array(positions.length / 3 * 2); + + // 计算UV坐标 + for (let i = 0; i < positions.length; i += 3) { + const x = positions[i]; + const y = positions[i + 1]; + uvs[i / 3 * 2] = (x - minX) / (maxX - minX); + uvs[i / 3 * 2 + 1] = (y - minY) / (maxY - minY); + } + + // 设置UV属性 + geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2)); + + // 创建新的材质数组,包含原有材质和顶面材质 + const materials = [ + new THREE.MeshStandardMaterial({ + map: zhejiangTexture, + metalness: 0.5, + roughness: 0.5 + }), + new THREE.MeshBasicMaterial({ + map: texture, + color: 0xffffff * Math.random() + }) + ]; + + // 更新网格的材质 + mesh.material = materials; + } + }); } const div = document.createElement('div')