6

Here I have a basic 3D Globe in Three.js. I get the location of the user using Navigator and input the location with a marker on the globe of the users current position. I cannot for the life of me get this to show the correct position. Also the 3D Globe rotates. How would I go about getting the correct position and making the marker simply rotate with the Globe ?

Example: http://corexsystems.net/Projects/ThreeJs/EarthAndMoon/

Code:

    var renderer    = new THREE.WebGLRenderer({
        antialias   : true
    });
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.shadowMapEnabled   = true

    var onRenderFcts= [];
    var scene   = new THREE.Scene();
    var camera  = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100 );
    camera.position.z = 1;

    var light   = new THREE.AmbientLight( 0x222222 )
    scene.add( light )

    var light   = new THREE.DirectionalLight( 0xffffff, 1 )
    light.position.set(5,5,5)
    scene.add( light )
    light.castShadow    = true
    light.shadowCameraNear  = 0.01
    light.shadowCameraFar   = 15
    light.shadowCameraFov   = 45

    light.shadowCameraLeft  = -1
    light.shadowCameraRight =  1
    light.shadowCameraTop   =  1
    light.shadowCameraBottom= -1
    // light.shadowCameraVisible    = true

    light.shadowBias    = 0.001
    light.shadowDarkness    = 0.2

    light.shadowMapWidth    = 1024
    light.shadowMapHeight   = 1024

    //////////////////////////////////////////////////////////////////////////////////
    //      added starfield                         //
    //////////////////////////////////////////////////////////////////////////////////

    var starSphere  = THREEx.Planets.createStarfield()
    scene.add(starSphere)

    //////////////////////////////////////////////////////////////////////////////////
    //      add an object and make it move                  //
    //////////////////////////////////////////////////////////////////////////////////

    // var datGUI   = new dat.GUI()

    var containerEarth  = new THREE.Object3D()
    containerEarth.rotateZ(-23.4 * Math.PI/180)
    containerEarth.position.z   = 0
    scene.add(containerEarth)
    var moonMesh    = THREEx.Planets.createMoon()
    moonMesh.position.set(0.5,0.5,0.5)
    moonMesh.scale.multiplyScalar(1/5)
    moonMesh.receiveShadow  = true
    moonMesh.castShadow = true
    containerEarth.add(moonMesh)

    var earthMesh   = THREEx.Planets.createEarth()
    earthMesh.receiveShadow = true
    earthMesh.castShadow    = true
    containerEarth.add(earthMesh)
    onRenderFcts.push(function(delta, now){
        earthMesh.rotation.y += 1/32 * delta;       
    })

    var geometry    = new THREE.SphereGeometry(50, 32, 32)
    var material    = THREEx.createAtmosphereMaterial()
    material.uniforms.glowColor.value.set(0x00b3ff)
    material.uniforms.coeficient.value  = 0.8
    material.uniforms.power.value       = 2.0
    var mesh    = new THREE.Mesh(geometry, material );
    mesh.scale.multiplyScalar(1.01);
    containerEarth.add( mesh );
    // new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)

    var geometry    = new THREE.SphereGeometry(0.5, 32, 32)
    var material    = THREEx.createAtmosphereMaterial()
    material.side   = THREE.BackSide
    material.uniforms.glowColor.value.set(0x00b3ff)
    material.uniforms.coeficient.value  = 0.5
    material.uniforms.power.value       = 4.0
    var mesh    = new THREE.Mesh(geometry, material );
    mesh.scale.multiplyScalar(1.15);
    containerEarth.add( mesh );
    // new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)

    var earthCloud  = THREEx.Planets.createEarthCloud()
    earthCloud.receiveShadow    = true
    earthCloud.castShadow   = true
    containerEarth.add(earthCloud)
    onRenderFcts.push(function(delta, now){
        earthCloud.rotation.y += 1/8 * delta;       
    })

    //////////////////////////////////////////////////////////////////////////////////
    //      Camera Controls                         //
    //////////////////////////////////////////////////////////////////////////////////
    var mouse   = {x : 0, y : 0}
    document.addEventListener('mousemove', function(event){
        mouse.x = (event.clientX / window.innerWidth ) - 0.5
        mouse.y = (event.clientY / window.innerHeight) - 0.5
    }, false)
    onRenderFcts.push(function(delta, now){
        camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
        camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
        camera.lookAt( scene.position )
    })





       var marker2 = new THREE.Object3D();
                var loader = new THREE.OBJLoader( );
                loader.load( 'Pin.obj', function ( object2 ) {                 
                    object2.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            child.material = new THREE.MeshPhongMaterial( { 
                                color: 0x790811, 
                                specular: 0x050505,
                                shininess: 100
                            } );
                        }
                    } );

                    object2.position.set(0.57,-0.15 ,-0.07); // rotating obj should set (X > 0, 0, 0)
                        object2.receiveShadow   = true
    object2.castShadow  = true
    object2.quaternion.setFromUnitVectors(
                    new THREE.Vector3(8, 1, 3.5), new THREE.Vector3(1, 0, 0));
                    object2.scale.set(0.0003,0.0003,0.0003);


                containerEarth.add( object2 );

                });



    scene.add(marker2);


    var rad = Math.PI / 180;

    marker2.quaternion.setFromEuler(
        new THREE.Euler(0, 105 * rad, 45 * rad, "YZX")); 

  navigator.geolocation.watchPosition(function (pos) {


     var lat2 = 42.3125, lon2 = -86.1131;
        marker2.quaternion.setFromEuler(
            new THREE.Euler(45, lon2 * rad, lat2 * rad, "YZX")); 
        });

    //////////////////////////////////////////////////////////////////////////////////
    //      render the scene                        //
    //////////////////////////////////////////////////////////////////////////////////
    onRenderFcts.push(function(){
        renderer.render( scene, camera );       
    })

    //////////////////////////////////////////////////////////////////////////////////
    //      loop runner                         //
    //////////////////////////////////////////////////////////////////////////////////
    var lastTimeMsec= null
    requestAnimationFrame(function animate(nowMsec){
        // keep looping
        requestAnimationFrame( animate );
        // measure time
        lastTimeMsec    = lastTimeMsec || nowMsec-1000/60
        var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec)
        lastTimeMsec    = nowMsec
        // call each update function
        onRenderFcts.forEach(function(onRenderFct){
            onRenderFct(deltaMsec/1000, nowMsec/1000)
        })
    })
5
  • A working GIST is here: gist.github.com/bellbind/47f36f39f632d9ab77a3 Download the zip file and run it on a test server to see it working.
    – Radio
    Sep 2, 2017 at 21:52
  • This is the example I am working off of. I have no idea why it isn't working the marker is close just not position :(
    – user8320550
    Sep 2, 2017 at 22:10
  • The code your working off of according to the script you've left here is at corexsystems.net/Projects/ThreeJs/EarthAndMoon . Are you sure the gist isn't helpful?
    – Radio
    Sep 3, 2017 at 0:40
  • It is helpful a lot, CoreXSystems is my website. I made that example based on that GIT. I just can't seem to get the marker to place correctly on this one. Some of the variables are different not sure which.
    – user8320550
    Sep 3, 2017 at 1:06
  • There is definitely an error here: object2.quaternion.setFromUnitVectors(new THREE.Vector3(8, 1, 3.5), new THREE.Vector3(1, 0, 0));: The function expects both parameters to be normalized vectors (length === 1), so you need to normlaize them (for example new THREE.Vector3(8, 1, 3.5).normalize()). Not sure how relevant it is to your question tho. Sep 3, 2017 at 21:07

1 Answer 1

9

You need to convert from spherical coordinates to cartesian coordinates.

If you didn't modify the texture offset of your sphere, the following code should do the trick:

/**
 * Position an object on a planet.
 * @param {THREE.Object3D} object - the object to place
 * @param {number} lat - latitude of the location
 * @param {number} lon - longitude of the location
 * @param {number} radius - radius of the planet
 */
function placeObjectOnPlanet(object, lat, lon, radius) {
    var latRad = lat * (Math.PI / 180);
    var lonRad = -lon * (Math.PI / 180);
    object.position.set(
        Math.cos(latRad) * Math.cos(lonRad) * radius,
        Math.sin(latRad) * radius,
        Math.cos(latRad) * Math.sin(lonRad) * radius
    );
    object.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);
}

Note that you can do the same thing with THREE.Spherical.

Check this fiddle.

If you want your pins to rotate as the planet rotates, you need to add them as children of the planet. Or add both the planet and the pins to the same THREE.Object3D:

var object = THREE.Object3D();
object.add(planet);
object.add(pins);
object.rotation.y = 1.0;
3
  • Absolutely genius, you we're 100% correct I was placing the object in 3D Space not to the Sphere itself!
    – user8320550
    Sep 3, 2017 at 23:19
  • 2
    I think some confusion in the order of lat-lon value inside the function on your fiddle, here is the modified fiddle jsfiddle.net/k0Lz9hek/2
    – Haris
    Feb 2, 2018 at 6:46
  • My bad! I swapped lat and lon. The fiddle and the code are updated, thanks for pointing that out
    – neeh
    Feb 2, 2018 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.