CODEWITHSUNDEEP
three.js
Oved D
Oved D

Reputation: 7442

How can you create a three.js geometry that is equivalent to looking over the earths surface?

I'd like to create a geometry similar to something what's done in this shader: https://www.shadertoy.com/view/Ms2SD1

Where you are essentially looking over the surface of the earth, and it's slighty curved around all the axes. I don't want to create geometry for the entire sphere, but just for the surface that is visible.

How can this be done?

Upvotes: 2

Views: 100

Answers (1)

micnil
micnil

Reputation: 4805

In the SphereGeometry constructor you can specify how what part of the sphere you want. For example, if you want to top part of the sphere, you can use:

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

You can experiment with the last 4 arguments and check the documentation for more information.

To get it less curved you can just give the sphere a bigger radius.

Here is an example:

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>

Upvotes: 1

Related Questions