创建 3D 地球，如纸飞机或变化的世界答案

【问题标题】：Create 3D globe like Paperplanes or A world of change创建 3D 地球，如纸飞机或变化的世界
【发布时间】：2017-08-29 13:18:02
【问题描述】：

我有一个项目，我必须在主页上显示一个地球仪，访问者可以在其中选择位置（主要已知城市）然后进行搜索。我谷歌并找到一些最好的例子，比如： http://paperplanes.world&

http://news-lab-trends-experiment.appspot.com/ 如果有任何可用的原始代码，以便我可以根据要求进行更改。我环顾了一些 js https://threejs.org/ 和 http://www.webglearth.org，这些有什么帮助。

【问题讨论】：

标签： three.js 3d-mapping

【解决方案1】：

如果您只是想要一些地球的抽象表示，那么使用 webglearth 之类的东西没有多大意义，因为您 a) 不需要它们实现的复杂性，并且 b) 无法轻松调整外观全球范围内的事情就像例子一样简单。

好消息是，这一切并不像起初听起来那么复杂。对于简化的 3d 模型，其中有一些。看看these search-results。我相信this is the one 是用于纸飞机项目的。

在球形上定位东西也不是那么难，您只需要让自己熟悉spherical coordinates（纬度/经度的数学版本）和THREE.Spherical 类。下面是一个简单的例子（为了简单起见，使用单位球体作为地球，但如果你加载一个复杂模型，只要它大致是球形的，它几乎是相同的）：

const textureLoader = new THREE.TextureLoader();
function setup(scene) {
  // add some helpers 
  scene.add(new THREE.GridHelper(50, 100, 0x444444, 0x222222));
  scene.add(new THREE.AxisHelper(2));

  // add a textured sphere representing the earth
  const texture = textureLoader.load(
    'https://raw.githubusercontent.com/' + 
    'jiwonkim/d3gl/master/img/earth-blank.png'
  );
  
  const earth = new THREE.Mesh(
    new THREE.SphereGeometry(1, 36, 18),
    new THREE.MeshStandardMaterial({
      map: texture,
      metalness: 0,
      roughness: 1
    })
  );
  scene.add(earth);
  
  const marker = new THREE.Mesh(
    new THREE.BoxGeometry(0.05, 0.2, 0.05),
    new THREE.MeshStandardMaterial({color: 0xff5500})
  );
  
  const lat = 52.5;
  const lng = 10;
  
  // compute position (adjust theta/phi conversion to the 
  // orientation of your model)
  const spherical = new THREE.Spherical(
    1, // radius
    (90 - lat) / 180 * Math.PI, // latitude -> phi
    (90 + lng) / 180 * Math.PI  // longitude -> theta
  );
  marker.position.setFromSpherical(spherical);
  earth.add(marker);
  
  // compute orientation
  const v3 = new THREE.Vector3();
  v3.copy(marker.position).normalize();
  marker.quaternion.setFromUnitVectors(marker.up, v3);
}

// ---- boilerplate-code

// .... setup renderer
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// .... setup scene
const scene = (window.scene = new THREE.Scene());

// .... setup camera and controls
const camera = new THREE.PerspectiveCamera(
  70,
  window.innerWidth / window.innerHeight,
  .01,
  100
);
const controls = new THREE.OrbitControls(camera);

camera.position.set(-3, 3, 4);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// .... setup some lighting
const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
dirLight.position.set(1, 0, 0.5);
scene.add(dirLight, new THREE.AmbientLight(0x666666));

// .... setup and run demo-code
setup(scene);
requestAnimationFrame(function loop(time) {
  controls.update();

  renderer.render(scene, camera);
  requestAnimationFrame(loop);
});

// .... bind events
window.addEventListener("resize", ev => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

document.body.appendChild(renderer.domElement);

body {margin: 0; background: black;}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

【讨论】：