地球表面を見渡すことと同等のthree.jsジオメトリを作成するにはどうすればよいですか？

Question

私は、このシェーダで行われているものの何かに似た形状を作成したいと思います：あなたは、本質的に、地球の表面上に見ている、そしてそれはslightyすべての軸の周りに湾曲ます https://www.shadertoy.com/view/Ms2SD1

。私は球全体のジオメトリを作成するのではなく、表示されているサーフェスのジオメトリを作成したいと思います。

どうすればいいですか？

Answer 1

SphereGeometryコンストラクタでは、球のどの部分をどのようにしたいかを指定できます。あなたは、球の一部をトップにしたい場合たとえば、あなたが使用することができます。

var geometry = new THREE.SphereGeometry(3, 16, 8, 0, Math.PI * 2, 0, Math.PI/4); 

あなたは、最後の4つの引数を試すことができ、より多くの情報のためdocumentationを確認してください。

曲がりにくくするには、球の半径を大きくするだけです。ここで

は一例です：

var scene = new THREE.Scene(); 
 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
 

 
var renderer = new THREE.WebGLRenderer(); 
 
renderer.setSize(window.innerWidth, window.innerHeight); 
 
document.body.appendChild(renderer.domElement); 
 

 
var geometry = new THREE.SphereGeometry(3, 16, 8, 0, Math.PI * 2, 0, Math.PI/4); 
 
var material = new THREE.MeshBasicMaterial({ 
 
     color: 0xff0000, 
 
     wireframe: true 
 
    }); 
 
var sphere = new THREE.Mesh(geometry, material); 
 
scene.add(sphere); 
 

 
sphere.position.y -= 3; 
 
camera.position.z = 4; 
 
camera.rotation.x -= Math.PI/9 
 

 
var render = function() { 
 
    requestAnimationFrame(render); 
 

 
    renderer.render(scene, camera); 
 
}; 
 

 
render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>