Wikitude
play_for_work
Forum
FAQ
Documentation
Download
wikitude.com
How can we help you today?
Enter your search term here...
Search
Start a new topic
Discussions
Wikitude SDK (Android, iOS, UWP)
Wikitude SDK Questions or Problems
HTML button half working
A
Amandine.jala
started a topic
over 6 years ago
HTML button half working
3 Comments
Oldest First
Popular
Newest First
Sorted by
Popular
A
Amandine.jala
said
over 6 years ago
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!
A
Andreas Fötschl
said
over 6 years ago
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
A
Amandine.jala
said
over 6 years ago
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
Login
or
Signup
to post a comment
More topics in
Wikitude SDK Questions or Problems
Instatiation of WTArchitectView compile errors
Point of interest - native iOS
Slider
Camera lagging / slow in native Swift application
Create a web service
N-th ImageDrawable not displayed
Radar Example
stop defaultlocationmanager and use architectview.injectlocation ios 10
WTC Size Limit
AngularJS and wikitude
See all 3858 topics
© 2021 Wikitude, a Qualcomm company
Amandine.jala