Start a new topic

3D Model can't animate on Geo location

Hi...


Based on sample 3d geo, I put 2 button (Play and Snap)


Snap is capture screen

Play is animate 3d model


Snap function is work. But animate can't. Can you help me?


Here the index.html :


<!DOCTYPE HTML>

<html>

 

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">

 

    <title></title>

    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />

    <!-- required to set background transparent & enable "click through" -->

    <link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />

    <script src="architect://architect.js"></script>

    <script type="text/javascript" src="../ade.js"></script>

    <script type = "text/javascript">

      function clic_camera()

    {

        $(".camera_hdp").hide().delay(1000).fadeIn('fast');

       };

     </script>

     <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>

     <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>

   

 

    <link rel="stylesheet" href="css/default.css">

</head>

 

<body>

    <div id="loadingMessage" class="info">Loading ...</div>

    <div class="camera_hdp" id="scanButtonWrapper">

        <a href="javascript: World.captureScreen();" onClick="clic_camera()" data-role="button" data-inline="true">SNAP</a>

    </div>

 

    <div class="camera_hdp" id="scanButtonWrapper2">

        <a href="#" onClick="World.playScreen();" data-role="button" data-inline="true">PLAY</a>

    </div>

 

 

    <script src="js/3dmodelatgeolocation.js"></script>

</body>

</html>



The 3dmodelatgeolocation.js ;


var World = {

 loaded: false,

 rotating: false,

 init: function initFn() {

  this.createModelAtLocation();

 },

 createModelAtLocation: function createModelAtLocationFn() {

  /*

   First a location where the model should be displayed will be defined. This location will be relativ to the user.

  */

  var location = new AR.RelativeLocation(null, 5, 0, -2);

 

 

  /*

   Next the model object is loaded.

  */

  var modelEarth = new AR.Model("assets/dragon.wt3", {

   onLoaded: this.worldLoaded,

   scale: {

    x: 2,

    y: 2,

    z: 2

   }

  });

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

        var indicatorDrawable = new AR.ImageDrawable(indicatorImage, 0.1, {

            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.CENTER

        });

 

     

  /*

   Putting it all together the location and 3D model is added to an AR.GeoObject.

  */

  var obj = new AR.GeoObject(location, {

            drawables: {

               cam: [modelEarth],

               indicator: [indicatorDrawable]

            }

        });

       

 

 },

 

 captureScreen: function captureScreenFn() {

       document.location = "architectsdk://button?action=captureScreen";

    },

 

 playScreen: function playScreenFn() {

 

   var anim = new AR.ModelAnimation(World.modelEarth, "Animation_00");

         anim.start(-1);

    },

 worldLoaded: function worldLoadedFn() {

  World.loaded = true;

  var e = document.getElementById('loadingMessage');

  e.parentElement.removeChild(e);

 }

};

World.init();



1 Comment

Hello Budi,


In order to have a better understanding of how the animation for 3D models on Geo location should work, I suggest you have a look at our following samples.


http://www.wikitude.com/external/doc/documentation/latest/android/solarsystemir.html#solar-system-ir


http://www.wikitude.com/external/doc/documentation/latest/android/solarsystemgeo.html#solar-system-geo


Thanks

Eva

Login or Signup to post a comment