<脚本>constscene=newTHREE.Scene();constrenderer=newTHREE.WebGLRenderer();renderer.setClearColor(0x000000);renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);camera.position.set(0,0,10);camera.lookAt(scene.position);letambientLight=newTHREE.AmbientLight(0xffffff);scene.add(ambientLight);functioncreate(){constloader=newTHREE.FileLoader();loader.load('./data/china.json',(data)=>{constjsondata=JSON.parse(data);generateGeometry(jsondata);})}constprojection=d3.geoMercator().center([116.412318,39.909843]).translate([0,0]);letbeijingPosition=projection([116.412318,39.909843]);letshanghaiPosition=projection([121.495721,31.236797]);functiondrawBoundary(多边形){constlineGeometry=newTHREE.Geometry();for(leti=0;i{constprovince=newTHREE.Group();constcoordinates=elem.geometry.coordinates;coordinates.forEach((multiPolygon)=>{multiPolygon.forEach((polygon)=>{constline=drawBoundary(polygon);constprovinceColor=['北京市','上海市'].includes(elem.properties.name)?'yellow':'blue';constmesh=drawExtrudeMesh(polygon,provinceColor);province.add(line);province.add(mesh);});});map.add(province);})scene.add(map);constline=drawLine(beijingPosition,shanghaiPosition);scene.add(line);}functionrender(){if(camera.position.x-shanghaiPosition[1]){camera.position.y-=0.2;}renderer.render(scene,camera);requestAnimationFrame(render);}functiondrawLine(pos1,pos2){const[x0,y0,z0]=[...pos1,0];const[x1,y1,z1]=[...pos2,0];constgeomentry=newTHREE.Geometry();geomentry.vertices=newTHREE.QuadraticBezierCurve3(newTHREE.Vector3(-x0,-y0,z0),newTHREE.Vector3(-(x0+x1)/2,-(y0+y1)/2,-10),newTHREE.Vector3(-x1,-y1,z1),).getPoints();constmaterial=newTHREE.LineBasicMaterial({color:'white'});constline=newTHREE.Line(geomentry,material);line.rotation.y=Math.PI;returnline;}create();render();
