纹理映射

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'