Three.js with augrement reality with latitude and longitude

Questions
1

hello every one ,
i am new to three.js.

i want to use three.js in augmented reality with ionic 1 framework.

i need to display three.js sphere at specific latitude longitude. and as i rotate my device it should be displayed in my device by my application camera. all things will be dynamic. do i need to use three.js DeviceOrientationControls ? if yes then how can I ?

var scene = new THREE.Scene();
 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({
        alpha: true
  });
function calcPosFromLatLonRad(lat, lon, radius) {
var phi = (90 - lat) * (Math.PI / 180);
var theta = (lon + 180) * (Math.PI / 180);
x = -((radius) * Math.sin(phi) * Math.cos(theta));
z = ((radius) * Math.sin(phi) * Math.sin(theta));
y = ((radius) * Math.cos(phi));

var geometry0 = new THREE.Geometry()
geometry0.vertices = [new THREE.Vector3(x,y,z)];
  var spheres ;
    for (var i = 0; i < geometry0.vertices.length; i++) {
       var sphereGeometry = new THREE.SphereGeometry(0, 0, 0);
        var sphereMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            opacity: 1
        });
    
        var spheres= new THREE.Mesh(sphereGeometry, sphereMaterial);
    
        spheres.position.set(geometry0.vertices[i].x,
            geometry0.vertices.y,
            geometry0.vertices.z);
        scene.add(spheres);
          renderer.setClearColor(0x000000, 0);
    renderer.setSize(window.innerWidth, window.innerHeight);
     camera.position.z = 3;
    var render = function() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
    }
}
calcPosFromLatLonRad(21.1830, 72.8316, 10000);

here is my code but it displays nothing.
i can run simple cube demo in my application but not able to display three.js object on latitude and longitude.
please help me. is there anyone expert with three.js then please help me.

2

Hello Dhamu143,

In order to debug and built upon your code, I would suggest to organize it in a structured maner. You could use something like this to get started:

  • global variables
  • lib/class functions
  • init functions
  • loop/display functions

You could startup with this example https://threejs.org/examples/?q=cube#webgl_geometry_cube and build upon it by adding the calcPosFromLatLonRad() as a lib class function that return a Vertex3 position instead of encompassing all the logic in it.

Another good option before all of this, would be to go through online tutorials and lessons like :

Once you have done this, you will get a better understanding of the framework, you will be able to isolate the problems better and dive into the details for your integration.

Your project integration with the ionic framework seems promising, I will be interested to see the final result. Keep it up and let us know what’s up…

3

if i need to locate sphere at specific latitude longitude then how can I?

4