如何创建一个相当于俯视地球表面的three.js几何体?

时间:2017-04-20 15:31:11

标签: three.js

我想创建一个类似于此着色器中完成的几何体的几何体: https://www.shadertoy.com/view/Ms2SD1

在你基本上俯视地球表面的地方,它在所有轴周围都是微微弯曲的。我不想为整个球体创建几何体,而只是为可见的表面创建几何体。

如何做到这一点?

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;