You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
6.6 KiB
1 lines
6.6 KiB
var e=``+new URL(`../images/earth_light_gray_white-D7Fpf71y.png`,import.meta.url).href,t=`data:image/svg+xml,%3csvg%20viewBox='0%200%2030%2041.1846'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='30.000000'%20height='41.184570'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='减去顶层'%20d='M14.898%2041.1845C14.898%2041.1845%2030%2031.7422%2030%2014.8666C30%206.6297%2023.2653%200%2015.102%200C6.73469%200%200%206.6297%200%2014.8666C0%2030.5368%2014.898%2041.1845%2014.898%2041.1845ZM20.2041%2015.0225C20.2041%2017.7964%2017.9198%2020.045%2015.102%2020.045C12.2843%2020.045%2010%2017.7964%2010%2015.0225C10%2012.2487%2012.2843%2010%2015.102%2010C17.9198%2010%2020.2041%2012.2487%2020.2041%2015.0225Z'%20fill='rgb(239,67,53)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e`;(function(){let n=document.getElementById(`earth-canvas`);if(!n||!window.THREE)return;let r=n.parentElement,i=new THREE.Scene,a=new THREE.PerspectiveCamera(40,r.clientWidth/r.clientHeight,.1,1e3);a.position.z=1.5;let o=new THREE.WebGLRenderer({canvas:n,alpha:!0,antialias:!0});o.setSize(r.clientWidth,r.clientHeight),o.setPixelRatio(window.devicePixelRatio);let s=new THREE.OrbitControls(a,o.domElement);s.enableDamping=!0,s.dampingFactor=.05,s.enablePan=!0,s.enableZoom=!1,s.autoRotate=!1,s.rotateSpeed=.1,s.minPolarAngle=Math.PI/2,s.maxPolarAngle=Math.PI/2;let c=new THREE.SphereGeometry(.5,64,64),l=new THREE.HemisphereLight(`#e0e0e0`,`#6a8aaa`,.5);i.add(l);let u=new THREE.DirectionalLight(`#000000`,.1);u.position.set(0,-5,0),i.add(u);let d=new THREE.AmbientLight(`#e0e0e0`,.9);i.add(d);let f=new THREE.TextureLoader,p=new THREE.MeshPhongMaterial({color:`#efefef`,emissive:`#000000`,shininess:20,transparent:!0,opacity:.9}),m=new THREE.Mesh(c,p);m.renderOrder=0,f.load(e,function(e){p.map=e,p.color.setHex(16777215),p.needsUpdate=!0},void 0,function(e){console.warn(`Earth texture failed to load, using default color.`,e)}),i.add(m);let h=[{name:`上海`,lat:31.2304,lon:121.4737},{name:`东京`,lat:35.6762,lon:139.6503},{name:`伊斯坦布尔`,lat:41.0082,lon:28.9784},{name:`伦敦`,lat:51.5074,lon:-.1278},{name:`加尔各答`,lat:22.5726,lon:88.3639},{name:`北京`,lat:39.9042,lon:116.4074},{name:`华沙`,lat:52.2297,lon:21.0122},{name:`南京`,lat:32.0603,lon:118.7969},{name:`吉隆坡`,lat:3.139,lon:101.6869},{name:`圣保罗`,lat:-23.5505,lon:-46.6333},{name:`圣安东尼奥`,lat:29.4241,lon:-98.4936},{name:`墨西哥城`,lat:19.4326,lon:-99.1332},{name:`多伦多`,lat:43.6532,lon:-79.3832},{name:`奥克兰`,lat:-36.8485,lon:174.7633},{name:`孟买`,lat:19.076,lon:72.8777},{name:`安地比斯`,lat:43.5804,lon:7.1251},{name:`山景城`,lat:37.3861,lon:-122.0839},{name:`巴黎`,lat:48.8566,lon:2.3522},{name:`布宜诺斯艾利斯`,lat:-34.6037,lon:-58.3816},{name:`开普敦`,lat:-33.9249,lon:18.4241},{name:`悉尼`,lat:-33.8688,lon:151.2093},{name:`新加坡`,lat:1.3521,lon:103.8198},{name:`新德里`,lat:28.6139,lon:77.209},{name:`曼谷`,lat:13.7563,lon:100.5018},{name:`法兰克福`,lat:50.1109,lon:8.6821},{name:`波哥大`,lat:4.711,lon:-74.0721},{name:`深圳`,lat:22.5431,lon:114.0579},{name:`牛津`,lat:51.752,lon:-1.2577},{name:`特拉维夫`,lat:32.0853,lon:34.7818},{name:`科伦坡`,lat:6.9271,lon:79.8612},{name:`米兰`,lat:45.4642,lon:9.19},{name:`纽约`,lat:40.7128,lon:-74.006},{name:`莫斯科`,lat:55.7558,lon:37.6173},{name:`达卡`,lat:23.8103,lon:90.4125},{name:`迪拜`,lat:25.2048,lon:55.2708},{name:`邦加罗尔`,lat:12.9716,lon:77.5946},{name:`金奈`,lat:13.0827,lon:80.2707},{name:`雅加达`,lat:-6.2088,lon:106.8456},{name:`首尔`,lat:37.5665,lon:126.978},{name:`香港`,lat:22.3193,lon:114.1694},{name:`全球总部福州`,lat:26.0745,lon:119.2965}],g=[],_=null;function v(e,t,n=1){let r=(90-e)*(Math.PI/180),i=(t+180)*(Math.PI/180),a=-n*Math.sin(r)*Math.cos(i),o=n*Math.cos(r),s=n*Math.sin(r)*Math.sin(i);return new THREE.Vector3(a,o,s)}let y=new THREE.CircleGeometry(.012,24),b=new THREE.MeshBasicMaterial({color:15680309,side:THREE.FrontSide,depthWrite:!1,transparent:!0,opacity:1}),x=.04,S=f.load(t),C=new THREE.PlaneGeometry(.03,x);C.translate(0,x/2,0);let w=new THREE.MeshBasicMaterial({map:S,color:16777215,side:THREE.FrontSide,depthWrite:!1,transparent:!0,opacity:1});h.forEach(e=>{let t=v(e.lat,e.lon,.5),n;e.name===`全球总部福州`?(n=new THREE.Mesh(C,w),_=n):n=new THREE.Mesh(y,b),n.position.copy(t);let r=t.clone().normalize();n.position.add(r.multiplyScalar(.01)),n.renderOrder=1,n.userData={name:e.name},m.add(n),g.push(n)}),m.rotation.y=-(9.6869*Math.PI/180)+Math.PI;let T=document.createElement(`div`);T.style.position=`absolute`,T.style.padding=`8px`,T.style.color=`#2E353A`,T.style.fontSize=`16px`,T.style.fontFamily=`MiSans VF`,T.style.textAlign=`center`,T.style.lineHeight=`20px`,T.style.whiteSpace=`nowrap`,T.style.pointerEvents=`none`,T.style.display=`none`,T.style.zIndex=`1000`,T.style.transform=`translate(-50%, 15px)`,T.classList.add(`tooltip-arrow`),r.appendChild(T);let E=T.cloneNode(!0);E.innerHTML=`全球总部<br>福州`,r.appendChild(E);let D=new THREE.Raycaster,O=new THREE.Vector2;n.addEventListener(`mousemove`,e=>{let t=n.getBoundingClientRect();O.x=(e.clientX-t.left)/t.width*2-1,O.y=-((e.clientY-t.top)/t.height)*2+1,D.setFromCamera(O,a);let i=D.intersectObjects(g);if(i.length>0){let e=i[0].object,n=e.userData.name;if(n!==`全球总部福州`){T.textContent=n,T.style.display=`block`;let i=e.position.clone();e.updateWorldMatrix(!0,!1),i.setFromMatrixPosition(e.matrixWorld),i.project(a);let o=r.getBoundingClientRect(),s=(i.x*.5+.5)*t.width+(t.left-o.left),c=(-(i.y*.5)+.5)*t.height+(t.top-o.top);T.style.left=`${s}px`,T.style.top=`${c-10}px`}else T.style.display=`none`;document.body.style.cursor=`pointer`}else T.style.display=`none`,document.body.style.cursor=`default`});function k(){if(requestAnimationFrame(k),m.rotation.y+=5e-4,g.forEach(e=>{e.lookAt(a.position);let t=new THREE.Vector3;e.getWorldPosition(t);let n=new THREE.Vector3().subVectors(a.position,t).normalize(),r=t.clone().normalize().dot(n),i=Math.max(0,r);i**=.5,e.scale.setScalar(i)}),_){let e=new THREE.Vector3;_.getWorldPosition(e);let t=new THREE.Vector3().subVectors(a.position,e).normalize();if(e.clone().normalize().dot(t)>0){E.style.display=`block`;let e=_.position.clone();_.updateWorldMatrix(!0,!1),e.setFromMatrixPosition(_.matrixWorld),e.project(a);let t=n.getBoundingClientRect(),i=r.getBoundingClientRect(),o=(e.x*.5+.5)*t.width+(t.left-i.left),s=(-(e.y*.5)+.5)*t.height+(t.top-i.top);E.style.left=`${o}px`,E.style.top=`${s-10}px`}else E.style.display=`none`}s.update(),o.render(i,a)}k(),window.addEventListener(`resize`,()=>{let e=r.clientWidth,t=r.clientHeight;a.aspect=e/t,a.updateProjectionMatrix(),o.setSize(e,t)})})();
|