の世界を作成します。私は&をGoogleのようないくつかの最良の例を見つける：利用可能な生のコードがある場合は、私が要件に従って変更を加えることができるように http://paperplanes.world &3D Paperplanesのような世界や変更
http://news-lab-trends-experiment.appspot.com/ を。私はこれらを参考にすることができ、どのようにいくつかのjs https://threejs.org/ & http://www.webglearth.orgを見て回ります。
地球の抽象表現をほのめかすだけなら、ウェブグレースなどに行くのはあまり意味がありません。a）その複雑さは必要ありませんし、b）簡単に調整することはできません。例のように単純なものに向かって地球の外観。
良いニュースは、すべてのことが本当にそれが最初に聞こえるかもしれないほど複雑ではないということです。単純化された3Dモデルの場合、そこにいくつかのモデルがあります。ただ、these search-resultsを見ています。私はthis is the oneがpaperplanesプロジェクトに使われたと信じています。
球形に配置することはそれほど難しくありません。ちょうど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>