Wikitude

HTML button half working

Hello there,

 

I'm working on a custom animation that's launch when pressing a HTML button, but it's not working properly and I can't figure out why.

 

Here's the Javascript:

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

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

createOverlays: function createOverlaysFn() {

this.tracker = new AR.ClientTracker("target/tracker.wtc", {
onLoaded: this.loadingStep
});

this.model = new AR.Model("models/model.wt3", {
onLoaded: this.loadingStep,
scale: {
x: 0.045,
y: 0.045,
z: 0.045
},
translate: {
x: 0.0,
y: 0.0,
z: 0.0
}
});

this.isModelRendered = true;

this.displayAnimation = this.animateModel();

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

loadingStep: function loadingStepFn() {
if (!World.loaded && World.tracker.isLoaded() && World.modelBuilding.isLoaded()) {
World.loaded = true;
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 2000);
}
},

animateModel: function animateModelFn() {
var sz;

if(World.isModelRendered) {
sz = new AR.PropertyAnimation(World.model, "scale.z", 0.045, 0.0, 1500, {
type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_ELASTIC
});
World.isModelRendered = false;
} else {
sz = new AR.PropertyAnimation(World.model, "scale.z", 0, 0.045, 1500, {
type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_ELASTIC
});
World.isModelRendered = true;
}
return sz;
}

};

World.init();

 

And the HTML:

<button id="cubeButton" onClick="World.displayAnimation.start()">Building</button>


 

The purpose here is to have:

When button is pressed: 

- if 3D object (which is a cube) is flat then grow

- if cube is "full"/grown then flatten it

 

The animation actually works in one way = flattening the cube, but doesn't in the other.

 

Any idea why that is?

 

Many thanks!

 

Hi there!

Try using animateModel instead as onClick attribute. I guess the issue is related to the assignment of the displayAnimation.

<button id="cubeButton" onClick="World.animateModel.start()">Building</button>

 

If that does not solve the issue please add some debug logs and check out WebView debugging on Safari/Chrome.

Best regards,
Andreas

Hi!

 

Thank you for helping out, you were right, it's actually working with this:

<button id="cubeButton" onClick="World.animateModel().start()">Building</button>

 

Best,

Amandine