Wikitude

Multiple Model

How to add multiple 3d model on the tracker that contains multiple images.I want to add each model on different image in the tracker file.

I want  both model to be shown on the camera view but only one model can be rendered at a time.I want both model to be rendered at the same time.How can achive this.Here is my code.

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

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

createOverlays: function createOverlaysFn() {
/*
First an AR.ClientTracker needs to be created in order to start the recognition engine. It is initialized with a URL specific to the target collection. Optional parameters are passed as object in the last argument. In this case a callback function for the onLoaded trigger is set. Once the tracker is fully loaded the function loadingStep() is called.

Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
Use a specific target name to respond only to a certain target or use a wildcard to respond to any or a certain group of targets.
*/
this.tracker = new AR.ClientTracker("assets/tracker.wtc", {
onLoaded: this.loadingStep
});

/*
3D content within Wikitude can only be loaded from Wikitude 3D Format files (.wt3). This is a compressed binary format for describing 3D content which is optimized for fast loading and handling of 3D content on a mobile device. You still can use 3D models from your favorite 3D modeling tools (Autodesk® Maya® or Blender) but you'll need to convert them into the wt3 file format. The Wikitude 3D Encoder desktop application (Windows and Mac) encodes your 3D source file. You can download it from our website. The Encoder can handle Autodesk® FBX® files (.fbx) and the open standard Collada (.dae) file formats for encoding to .wt3.

Create an AR.Model and pass the URL to the actual .wt3 file of the model. Additional options allow for scaling, rotating and positioning the model in the scene.

A function is attached to the onLoaded trigger to receive a notification once the 3D model is fully loaded. Depending on the size of the model and where it is stored (locally or remotely) it might take some time to completely load and it is recommended to inform the user about the loading time.
*/
this.modelCar = new AR.Model("assets/car.wt3", {
onLoaded: this.loadingStep,
scale: {
x: 0.045,
y: 0.045,
z: 0.045
},
translate: {
x: 0.0,
y: 0.05,
z: 0.0
},
rotate: {
roll: -25
}
});

/*
Similar to 2D content the 3D model is added to the drawables.cam property of an AR.Trackable2DObject.
*/
var trackable = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {
enabled = true
cam:
}
});



this.modelCar2 = new AR.Model("assets/xx.wt3", {
scale: {
x: 0.045,
y: 0.045,
z: 0.045
},
translate: {
x: 0.0,
y: 0.05,
z: 0.0
},
rotate: {
roll: -25
}
});



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

loadingStep: function loadingStepFn() {
if (!World.loaded && World.tracker.isLoaded() && World.modelCar.isLoaded()) {
World.loaded = true;
var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
document.getElementById('loadingMessage').innerHTML =
"<div" + cssDivLeft + ">Scan CarAd ClientTracker Image:</div>" +
"<div" + cssDivRight + "><img src='assets/car.png'></img></div>";

// Remove Scan target message after 10 sec.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 10000);
}
}
};

World.init();


 

Hello Mehmet,

I would suggest that you start with the sample code we provide in the documentation here and then try to adjust this code in order to achieve the functionality that you wish.

Thanks

I changed the "*" characters with the target names and its working but not at the same time.It is possible that multiple 3d object can be rendered at the same time on the different targets in the tracker right?.

here is the code 

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

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

createOverlays: function createOverlaysFn() {
/*
First an AR.ClientTracker needs to be created in order to start the recognition engine. It is initialized with a URL specific to the target collection. Optional parameters are passed as object in the last argument. In this case a callback function for the onLoaded trigger is set. Once the tracker is fully loaded the function loadingStep() is called.

Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
Use a specific target name to respond only to a certain target or use a wildcard to respond to any or a certain group of targets.
*/
this.tracker = new AR.ClientTracker("assets/tracker.wtc", {
onLoaded: this.loadingStep
});

/*
3D content within Wikitude can only be loaded from Wikitude 3D Format files (.wt3). This is a compressed binary format for describing 3D content which is optimized for fast loading and handling of 3D content on a mobile device. You still can use 3D models from your favorite 3D modeling tools (Autodesk® Maya® or Blender) but you'll need to convert them into the wt3 file format. The Wikitude 3D Encoder desktop application (Windows and Mac) encodes your 3D source file. You can download it from our website. The Encoder can handle Autodesk® FBX® files (.fbx) and the open standard Collada (.dae) file formats for encoding to .wt3.

Create an AR.Model and pass the URL to the actual .wt3 file of the model. Additional options allow for scaling, rotating and positioning the model in the scene.

A function is attached to the onLoaded trigger to receive a notification once the 3D model is fully loaded. Depending on the size of the model and where it is stored (locally or remotely) it might take some time to completely load and it is recommended to inform the user about the loading time.
*/
this.modelCar = new AR.Model("assets/car.wt3", {
onLoaded: this.loadingStep,
scale: {
x: 0.045,
y: 0.045,
z: 0.045
},
translate: {
x: 0.0,
y: 0.05,
z: 0.0
},
rotate: {
roll: -25
}
});

/*
Similar to 2D content the 3D model is added to the drawables.cam property of an AR.Trackable2DObject.
*/
var trackable = new AR.Trackable2DObject(this.tracker, "surfer", {
drawables: {
cam:
}
});




this.modelCar2 = new AR.Model("assets/xx.wt3", {
onLoaded: this.loadingStep,
scale: {
x: 0.045,
y: 0.045,
z: 0.045
},
translate: {
x: 0.0,
y: 0.05,
z: 0.0
},
rotate: {
roll: -25
}
});

/*
Similar to 2D content the 3D model is added to the drawables.cam property of an AR.Trackable2DObject.
*/
var trackable2 = new AR.Trackable2DObject(this.tracker, "magazine_page_two", {
drawables: {
cam:
}
});
},

loadingStep: function loadingStepFn() {
if (!World.loaded && World.tracker.isLoaded() && World.modelCar.isLoaded()) {
World.loaded = true;
var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
document.getElementById('loadingMessage').innerHTML =
"<div" + cssDivLeft + ">Scan CarAd ClientTracker Image:</div>" +
"<div" + cssDivRight + "><img src='assets/car.png'></img></div>";

// Remove Scan target message after 10 sec.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 10000);
}
}
};

World.init();


I created the tracker and targets names are right and its working but not at the same time.Whats wrong with my code.Thank you in advance.

 

Hello Mehmet,

Actually this is something that is not supported with our product. Every time only one tracker can be identified so you cannot aim at two image trackers at the same time and have different augmentations again at the same time. 

Thanks