我有一个项目,我必须在主页上显示一个地球仪,访问者可以在其中选择位置(主要已知城市)然后进行搜索。我用谷歌搜索并找到一些最好的例子,例如: http: //paperplanes.world &
http://news-lab-trends-experiment.appspot.com/ 如果有任何可用的原始代码,以便我可以根据要求进行更改。我环顾了一些 js https://threejs.org/和http://www.webgearth.org,这些有什么帮助。
我有一个项目,我必须在主页上显示一个地球仪,访问者可以在其中选择位置(主要已知城市)然后进行搜索。我用谷歌搜索并找到一些最好的例子,例如: http: //paperplanes.world &
http://news-lab-trends-experiment.appspot.com/ 如果有任何可用的原始代码,以便我可以根据要求进行更改。我环顾了一些 js https://threejs.org/和http://www.webgearth.org,这些有什么帮助。
如果您只是想要地球的一些抽象表示,那么使用 webglearth 之类的东西没有多大意义,因为您 a) 不需要它们实现的复杂性,并且 b) 无法轻松调整地球的外观像例子这样简单的事情。
好消息是,这一切并不像一开始听起来那么复杂。对于简化的 3d 模型,其中有一些。看看这些搜索结果。我相信这是用于纸飞机项目的那个。
在球形上定位东西也不是那么难,您只需要让自己熟悉球形坐标(纬度/经度的数学版本)和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>