javascriptthree.js3d360-degrees

How to show spherical grid helper in Three JS

I am working on a project that want to move small objects and show them in a 360 image using ThreeJS library. So I am using Spherical coordinate system in a sphere with some radius to move the objects. User starts seeing the app in the center of the sphere. I want to show some grid helper lines on the sphere ( very similar to longitude and latitude lines). I found the following code from here in the library: 

var radius = 10;
var radials = 16;
var circles = 8;
var divisions = 64;

var helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );

But it only adds a polar plate with some circles not a sphere shape grid helper to the scene.

enter image description here

Solution

  • PolarGridHelper is a flat circle. If you want a spherical geometry just use SphereBufferGeometry and give it a wireframe look:

    var radius = 10;
var latSegments = 18;  // 10° increments
var longSegments = 36; // 10° increments

var geometry = new THREE.SphereBufferGeometry( radius, longSegments, latSegments);
var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: true
});

var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );