Start a new topic

3d geo location

3d geo location

Hello, 

Using the sample code above, it gets stuck on 'loading...' and never advances.

I'm using iOS Xamarin project. Any ideas what's wrong?

// Sample experience to show 3D Model in Geo-AR
var World = {

    PATH_INDICATOR : "assets/indi.png", // use direction indicator from samples
    PATH_MODEL_WT3 : "assets/earth.wt3", // use model from samples
    MSG_VISIBLE : "Here it is!",
    MSG_NOTVISIBLE : "There is a model nearby!",
    FEEDBACK_DIV : document.getElementById('loadingMessage'),


    init: function initFn() {
  
        // wait for first location signal before creating the experience to ensure you know user's location during setup process
        AR.context.onLocationChanged = function(latitude, longitude, altitude, accuracy){

            // store user's location so you have access to it at any time
            World.myLocation = {"latitude": latitude, "longitude" : longitude, "altitude" : altitude };

            // create model around the user on very first location update
            if (!World.created) {
                World.FEEDBACK_DIV.innerHTML = 'Loading...';
                World.created = true;
                World.createModelAtLocation(World.myLocation);
            }
        };

    },

    createModelAtLocation: function createModelAtLocationFn(location) {


        // place object around the user, in this case just a few meters next to the user. Note that the object will stay where it is, so user can move around it.
        World.modelGeoLocation = new AR.GeoLocation(location.latitude - 0.005, location.longitude + 0.0005, AR.CONST.UNKNOWN_ALTITUDE);
  
        // load model from asset directory
        World.model = new AR.Model(World.PATH_MODEL_WT3, {

            // trigger animation once asset was loaded
            onLoaded: function() {

                // trigger loading of directin indicator
                World.indicatorImage = new AR.ImageResource(World.PATH_INDICATOR);

                // create indicator drawable using the image resource
                World.indicatorDrawable = new AR.ImageDrawable(World.indicatorImage, 0.1, {
                    verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
                });


                // define geoObject, including its direction indicator
                World.geoObject = new AR.GeoObject(World.modelGeoLocation, {
                    drawables: {
                        cam: World.model,
                        indicator: World.indicatorDrawable
                        },
                    onEnterFieldOfVision: function() {
                        World.modelVisible = true;
                        World.FEEDBACK_DIV.innerHTML = World.MSG_VISIBLE;
                    },
                    onExitFieldOfVision: function() {
                        World.modelVisible = false;
                        World.FEEDBACK_DIV.innerHTML = World.MSG_NOTVISIBLE;
                    },
                    onClick: function() {
                        console.log('clicked model');
                    }
                });

                World.worldLoaded();


            },
            onError: function(err) {
                World.worldError('Could not load file.');
            },

            scale: {
                x: 0.3,
                y: 0.3,
                z: 0.3
            },
            translate: {
                x: 0,
                y: 0.5,
                z: 0
            },
            rotate: {
                heading: 180,
                tilt: -40
            }
        });
    },

 

    worldLoaded: function worldLoadedFn() {
        World.loaded = true;
        World.FEEDBACK_DIV.innerHTML = World.modelVisible ? World.MSG_VISIBLE : World.MSG_NOTVISIBLE;
    },

 

    worldError: function worldErrorFn(msg) {
        World.FEEDBACK_DIV.innerHTML = msg ? msg : 'unexpected error';
    }
};

 

World.init();

 

Now I'm using the Wikitude app and then in developer using the my own url to view the AR does that make a difference too.


Are there any videos for iOS JavaScript api?

use Android and iOS feature architectView.setLocation to set the location of the AR-scene.
You may either use system's Location-Service or set the coordinates manually.

Have a look at the iOS and Android Samples that come packaged with the SDK bundles.

Best regards
Same process for get location too? If I want to set a certain location and then go to that location and have object show up.

Thx for the replies just tryin to figure things out.

I'm really impressed with Wikitude with how fast you guys reply and explaining things in detail. Thx for the help

the function assigned to  AR.context.onLocationChanged is fired on location updates of the SDK's AR View - meaning: you do not set the location in JS, it is updated in native iOS/Android environment and forwarded to JS via onLocationChanged callback.

In this sample code you sent me i could get the css or html to come up. where in the code would i put my location?

 

 

// Sample experience to show 3D Model in Geo-AR
var World = {

 

 PATH_INDICATOR : "assets/directionIndicator.png", // use direction indicator from samples
 PATH_MODEL_WT3 : "assets/model.wt3", // use model from samples
 MSG_VISIBLE : "Here it is!",
 MSG_NOTVISIBLE : "There is a model nearby!",
 FEEDBACK_DIV = document.getElementById('loadingMessage'),

 

 init: function initFn() {
  
  // wait for first location signal before creating the experience to ensure you know user's location during setup process
  AR.context.onLocationChanged = function(latitude, longitude, altitude, accuracy){

 

   // store user's location so you have access to it at any time
   World.myLocation = {"latitude": latitude, "longitude" : longitude, "altitude" : altitude };

 

   // create model around the user on very first location update
   if (!World.created) {
    World.FEEDBACK_DIV.innerHTML = 'Loading...';
    World.created = true;
    World.createModelAtLocation(World.myLocation);
   }
  };

 

  
 },

 

 createModelAtLocation: function createModelAtLocationFn(location) {

 

  // place object around the user, in this case just a few meters next to the user. Note that the object will stay where it is, so user can move around it.
  World.modelGeoLocation = new AR.GeoLocation(location.latitude - 0.005, location.longitude + 0.0005, AR.CONST.UNKNOWN_ALTITUDE);
  
  // load model from asset directory
  World.model = new AR.Model(World.PATH_MODEL_WT3, {

 

   // trigger animation once asset was loaded
   onLoaded: function() {

 

    // trigger loading of directin indicator
          World.indicatorImage = new AR.ImageResource(World.PATH_INDICATOR);

 

          // create indicator drawable using the image resource
          World.indicatorDrawable = new AR.ImageDrawable(World.indicatorImage, 0.1, {
              verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
          });

 

          // define geoObject, including its direction indicator
    World.geoObject = new AR.GeoObject(World.modelGeoLocation, {
              drawables: {
                 cam: ,
                 indicator:
              },
              onEnterFieldOfVision: function() {
               World.modelVisible = true;
               World.FEEDBACK_DIV.innerHTML = World.MSG_VISIBLE;
              },
              onExitFieldOfVision: function() {
               World.modelVisible = false;
               World.FEEDBACK_DIV.innerHTML = World.MSG_NOTVISIBLE;
              },
              onClick: function() {
               console.log('clicked model');
              }
          });

 

       World.worldLoaded();

 

   },
   onError: function(err) {
    World.worldError('Could not load file.');
   },
   scale: {
    x: 0.3,
    y: 0.3,
    z: 0.3
   },
   translate: {
    x: 0,
    y: 0.5,
    z: 0
   },
   rotate: {
    heading: 180,
    tilt: -40
   }
  });
 },

 

 worldLoaded: function worldLoadedFn() {
  World.loaded = true;
  World.FEEDBACK_DIV.innerHTML = World.modelVisible ? World.MSG_VISIBLE : World.MSG_NOTVISIBLE;
 },

 

 worldError: function worldErrorFn(msg) {
  World.FEEDBACK_DIV.innerHTML = msg ? msg : 'unexpected error';
 }
};

 

World.init();

 
Can I have mutiple 3D objects on the same geolocation or would they have to be separate geolocations?

What would be good practice to have mutiple targets with 3D objects on them? I would like to create a board game concept design.

Please have a look at the SDK Sample app which is part of the JavaScript API in the download section.

Link to Documentation
Link to Download Section

Best regards
Thx that helps to actually see it. I could download the full file just the JavaScript?

So would I put my position in the AR.context.onlocationchanged= Lat,long,attitude=0, and so would accuracy?

Or would I put in the World. Mylocation= ?

What is a good resource to read if I wanted to dissect this code and understand it completely?

Are there any video tutorials?

Please find sample implementation attached - It should highlight the concept. Ensure to World's constants accordingly.

Hope that helps

Thx for the quick answer Andreas!

       Like i said i'm Newer to the whole AR ballgame. I know javascript, html, and css tho.

Would you be able to provide a sample code of what you mean, or pinpiont where in my that code information should go.

Again thx for the reply.

Please implement AR.context.onLocationChanged callback to receive the location of the user (details)
You can then use lat/lon values to place the object nearby. I recommend using AR.CONST.UNKNOWN_ALTITUDE as altitude value so that the Model is displayed at user's elevation level.
Also ensure to only create the Model on first location update.

Best regards

Hi new to wikitude.

      I want to be about to walk around a 3d object at a geolocation. is it possible?

      Here is the sample code that i have

 

var World = {
 loaded: false,
 rotating: false,

 

 init: function initFn() {
  this.createModelAtLocation();
 },

 

 createModelAtLocation: function createModelAtLocationFn() {


  var location = new AR.GeoLocation(43.009635,-96.062801);

 


  var modelCar = new AR.Model("assets/car.wt3", {
   onLoaded: this.worldLoaded,
   scale: {
    x: 1,
    y: 1,
    z: 1
   }
  });

 

        var indicatorImage = new AR.ImageResource("assets/indi.png");

 

        var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, {
            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
        });

 

 
  var geoObj = new AR.GeoObject(location, {
            drawables: {
               cam: ,
               indicator:
            }
        });
 },

 

 worldLoaded: function worldLoadedFn() {
  World.loaded = true;
  var e = document.getElementById('loadingMessage');
  e.parentElement.removeChild(e);
 }
};

 

World.init();

 
Login or Signup to post a comment