Currently working on an augmented reality project and I'd like to incorporate an Object3D
into another object for rendering purposes.
Using the ColladaLoader
to bring in the object, but the output is a Scene
which doesn't quite fit my requirements.
Any tips on how to transform the scene into an Object3D
?
Sharing my existing code below:
var cat;
var catObject;
var loader = new THREE.ColladaLoader();
// Changing the axes orientation to avoid the model appearing upside-down:
loader.options.convertUpAxis = true;
// Loading the 3D collada file (cat01.dae in this case) and defining
// the callback function to be executed upon model loading completion:
loader.load( 'assets/cat_v1_model/meshes/cat_v1_model_animated.dae', function ( collada ) {
// Accessing the collada scene data:
cat = collada.scene.children[0];
// Omitting the skin as it's not used in my model:
// var skin = collada.skins[ 0 ];
catObject = new THREE.Object3D();
for (var j = 0; j < cat.children.length; j++) {
catObject.add(new THREE.Mesh(cat.children[j].geometry, cat.children[j].material));
}
catObject.matrixAutoUpdate = false;
catObject.position.z = 100;
// Enlarging the model for better visibility:
/* cat.scale.x = cat.scale.y = cat.scale.z = 3.0;
cat.rotation.z = 360;
cat.rotation.x = 180;
cat.rotation.y = 180;
cat.position.x = 0;
cat.position.y = -10;
cat.position.z = 100;
cat.updateMatrix();*/
//arScene.scene.add(catObject);
});
and
// Loading the marker for usage.
arController.loadMultiMarker('jsartoolkit5/examples/Data/multi/marker.dat', function(marker, markerNum) {
window.onclick = function() {
arScene.video.play();
};
// Creating an object that follows the marker's transformation.
var markerRoot = arController.createThreeMultiMarker(marker);
arScene.scene.add(markerRoot);
for (var i=0; i<markerNum; i++) {
markerRoot.markers[i] = catObject;
markerRoot.add(markerRoot.markers[i]);
}
// Invoking arScene.renderOn for each frame,
// performing marker detection, updating the Three.js scene, and rendering a new frame.
var tick = function() {
requestAnimationFrame(tick);
arScene.process();
arScene.renderOn(renderer);
};
tick();
});