Wikitude

Switching 3D models dynamically via buttons

Recently I started preparing a sample application for a project with wikitude and 3D models.
I created an array of AR.Model objects and related buttons (AR.ImageDrawable).
The buttons are assigned as cam drawables to the a AR.Trackable2DObject tracker.

I would like to use the buttons to switch between the models.
In the SDK documentation I found the functions drawables.removeCamDrawable, drawables.addCamDrawable.

It seems that the drawables are not accessable (in the onClick function of the buttons).
Is it possible to switch the 3D models dynamically?
Or should I try to add all 3D models in advance and show them by setting the ARObject.enabled flag?

Attached is a simplified source code sample.

Thanks in advance!

 

var World = {
    loaded: false,

    init: function initFn() {
        this.myModels = ;
        var buttons = ;    
       

        // Basic model info like wt3 file path, name,
        this.myModelsInfo =   

        // Button labels      
        this.myModelsButtons =         
        
        for (var i = 0; i < this.myModelsInfo.length; i++) {
            var info = this.myModelsInfo;
            this.myModels = new AR.Model(info.modelFilePath);
        }

        for (var i = 0; i < this.myModelsButtons.length; i++) {
            var mb = this.myModelsButtons;
            var btn = new AR.ImageResource("assets/button.png");
            buttons = new AR.ImageDrawable(btn, 0.15, {
                offsetX: 0.2,
                offsetY: 0.2 - i
            });
            
            buttons.onClick = this.loadModel(mb.id); // id equals array index
        }
        
        var tracker = new AR.ClientTracker("assets/surfer_tracker.wtc", {
            onLoaded: this.trackerLoaded,
            onError: this.trackerError
        });

        this.trackable = new AR.Trackable2DObject(tracker, "*", {
            drawables: {
                cam: buttons
            }
        });   
    },

    loadModel: function loadModelFn(id) {
        if (this.trackable) {        
            for (var i = 0; i < this.myModels.length; i++) {
                this.trackable.drawables.removeCamDrawable(this.myModels);
            }
            this.trackable.drawables.addCamDrawable(this.myModels);
        }   
    }    
};

World.init();

Hi!

I strongly recommend to load the 3D Models  on demand so you always just have one AR.Model in your AR.Trackable2dObject and use add/removeCamDrawables to destroy and remove the old one and load and add the new one.

I recommend you to display a loading-indicator in the HUD (html section) and hide it when the onLoaded event fires.

Best regards,
Andreas

PS.: ensure to properly destroy objects you don't need anymore by calling objects .destroy() function - and don't forget attached animations.