Wikitude
How can we help you today?
.addCamDrawable() and 3D models
3 CommentsSorted by Oldest First
I've run into an odd problem.
I want to have an object displayed on a target, and when I touch the object I want to replace it with another object.
Seems simple enough. I create a Trackable2DObject with its drawable.cam set to be the first Model, and I add an onClick() handler that does a removeCamDrawable() and an addCamDrawable().
The result, however, is a bit strange. It displays the first object, but when I click on it, it simply disappears and the second object is nowhere to be seen. However, when I look away from the target and back again, the second object appears! It's almost as if the removeCamDrawable() worked, but the addCamDrawable() was somehow postponed.
My code is very short. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=540, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="xui.js"></script>
<script src="architect://architect.js"></script>
<script type="text/javascript" src="ade.js"></script>
<script>
var logoTracker = new AR.Tracker("targets.zip");
var modelOptions = {
scale: {x: 0.25, y: 0.25, z: 0.25},
rotate: {tilt: -90},
translate: {y: -1}
};
var model1 = new AR.Model("Models/egg1.wt3", modelOptions);
var model2 = new AR.Model("Models/egg2.wt3", modelOptions);
var trackable = new AR.Trackable2DObject(logoTracker, "CityOfWaterlooLogo",
{ drawables: { cam: }});
trackable.onClick = function() {
trackable.drawables.removeCamDrawable(0); // remove model1
trackable.drawables.addCamDrawable(model2); // add model2
}
</script>
</head>
<body>
</body>
</html>
I verified that this is an issue and there's already a fix for it to be released in the next update.
Until then you could achieve the same thing using following technique:
...
var model1 = new AR.Model("egg1.wt3", modelOptions);
modelOptions.enabled = false;
var model2 = new AR.Model("egg2.wt3", modelOptions);
var trackable = new AR.Trackable2DObject(logoTracker, "stones",
{ drawables: { cam: }});
trackable.onClick = function() {
// trackable.drawables.removeCamDrawable(0); // remove model1
// trackable.drawables.addCamDrawable(model2); // add model2
model1.enabled = false;
model2.enabled = true;
}
...
Both models will be added to the trackable2dobject during creation. One model is disabled (.enabled = false) so it won't be rendered. On a user click the first model is disabled and the second model enabled.
Thanks. I ended up doing something similar, and it works fine.
© 2023 Wikitude, a Qualcomm company
Bernie Roehl