diff --git a/src/components/script.js b/src/components/script.js index f0c1d53..3cc7e83 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -7,9 +7,10 @@ const PAEAMS = { DEPTH: 6, coordsMaxCounts: 500 } const fetchJson = (url) => fetch(url).then((res) => res.json()) import chinajson from '@/assets/china.json?url' +let scene = null export async function setScene(DOM) { - const scene = new THREE.Scene() + scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(50, DOM.clientWidth / DOM.clientHeight, 0.1, 100000000) camera.position.set(0, 600, 200) const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }) @@ -81,6 +82,7 @@ function clickEvent(camera, controls, DOM, rootGroup) { } import textureMap from '@/assets/texture.png?url' +import zhejiang from '@/assets/map/zhejiang_top_surface.jpg?url' // 创建地图 const texture = new THREE.TextureLoader().load(textureMap) texture.wrapT = THREE.RepeatWrapping @@ -110,15 +112,39 @@ function createGeo(geoJson) { // 行政区块组 const areaGroup = new THREE.Group() - console.log(info.properties.adcode); areaGroup.info = info areaGroup.name = info.properties?.name group.add(areaGroup) + if (info.geometry.type === 'MultiPolygon') info.geometry.coordinates.forEach((j) => j.forEach((z) => areaGroup.add(createShapeWithCoord(z, materials)))) 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) + + // 实例化浙江省上表面 + // 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 div = document.createElement('div') div.innerHTML = info.properties?.name div.style.color = '#dbdbdb'