diff --git a/src/components/script.js b/src/components/script.js index 3cc7e83..cb010c9 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -122,29 +122,52 @@ function createGeo(geoJson) { else if (info.geometry.type === 'Polygon') info.geometry.coordinates.forEach((j) => areaGroup.add(createShapeWithCoord(j, materials))) if (info.properties.adcode === 330000) { - const box = new THREE.Box3().setFromObject(areaGroup.clone()) - //const helper = new THREE.Box3Helper(box, 0xff0000) - // areaGroup.add(helper) + // 获取区域的边界框 + 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; - // 实例化浙江省上表面 - // box上面四个点 - // const topPoints = [ - // new THREE.Vector3(box.min.x, box.max.y, box.max.z), - // new THREE.Vector3(box.max.x, box.max.y, box.max.z), - // new THREE.Vector3(box.max.x, box.min.y, box.max.z), - // new THREE.Vector3(box.min.x, box.min.y, box.max.z), - // ] - // 四个点生成面 plane - const zhejiangTexture = new THREE.TextureLoader().load(zhejiang) - const topPlane = new THREE.PlaneGeometry(box.max.x - box.min.x, box.max.y - box.min.y) - const topMaterial = new THREE.MeshBasicMaterial({ map: zhejiangTexture }) - const topMesh = new THREE.Mesh(topPlane, topMaterial) - topMesh.position.z += PAEAMS.DEPTH || 2 - topMesh.position.copy(box.getCenter(new THREE.Vector3())) - topMesh.position.z = topMesh.position.z + box.max.z / 2 - areaGroup.add(topMesh) + // 加载浙江省的纹理贴图 + 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') div.innerHTML = info.properties?.name div.style.color = '#dbdbdb'