nicolas/three_china
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

纹理映射
All checks were successful
Deploy / test (push) Successful in 2s
Details

Browse Source
This commit is contained in:
nicomacbookpro 2025-06-18 14:13:15 +08:00
parent 8f026a7268
commit c7502c9cad
1 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/script.js
View File

@ -122,29 +122,52 @@ function createGeo(geoJson) {
else if (info.geometry.type === 'Polygon') info.geometry.coordinates.forEach((j) => areaGroup.add(createShapeWithCoord(j, materials))) else if (info.geometry.type === 'Polygon') info.geometry.coordinates.forEach((j) => areaGroup.add(createShapeWithCoord(j, materials)))
if (info.properties.adcode === 330000) { if (info.properties.adcode === 330000) {
const box = new THREE.Box3().setFromObject(areaGroup.clone()) // 获取区域的边界框
//const helper = new THREE.Box3Helper(box, 0xff0000) const box = new THREE.Box3().setFromObject(areaGroup);
// areaGroup.add(helper) const minX = box.min.x;
const maxX = box.max.x;
const minY = box.min.y;
const maxY = box.max.y;
// 实例化浙江省上表面 // 加载浙江省的纹理贴图
// box上面四个点 const zhejiangTexture = new THREE.TextureLoader().load(zhejiang);
// 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), areaGroup.children.forEach(mesh => {
// new THREE.Vector3(box.max.x, box.min.y, box.max.z), if (mesh.geometry instanceof THREE.ExtrudeGeometry) {
// new THREE.Vector3(box.min.x, box.min.y, box.max.z), const geometry = mesh.geometry;
// ] const positions = geometry.attributes.position.array;
// 四个点生成面 plane const uvs = new Float32Array(positions.length / 3 * 2);
const zhejiangTexture = new THREE.TextureLoader().load(zhejiang)
const topPlane = new THREE.PlaneGeometry(box.max.x - box.min.x, box.max.y - box.min.y) // 计算UV坐标
const topMaterial = new THREE.MeshBasicMaterial({ map: zhejiangTexture }) for (let i = 0; i < positions.length; i += 3) {
const topMesh = new THREE.Mesh(topPlane, topMaterial) const x = positions[i];
topMesh.position.z += PAEAMS.DEPTH || 2 const y = positions[i + 1];
topMesh.position.copy(box.getCenter(new THREE.Vector3())) uvs[i / 3 * 2] = (x - minX) / (maxX - minX);
topMesh.position.z = topMesh.position.z + box.max.z / 2 uvs[i / 3 * 2 + 1] = (y - minY) / (maxY - minY);
areaGroup.add(topMesh)
} }
// 设置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') const div = document.createElement('div')
div.innerHTML = info.properties?.name div.innerHTML = info.properties?.name
div.style.color = '#dbdbdb' div.style.color = '#dbdbdb'