threejs Colladaloader:如何将场景变成object3d

时间:2016-06-12 08:37:52

标签: javascript three.js

我正在做增强现实,需要将Object3D添加到另一个对象进行渲染。

我使用ColladaLoader导入对象;但是,返回类型是Scene - 而不是我需要的。

如何将场景转换为Object3D

这是我目前的代码:

var mouse;
var mouseObject;

var loader = new THREE.ColladaLoader();

// Need to convert the axes so that our model does not stand upside-down:
loader.options.convertUpAxis = true;

// Load the 3D collada file (robot01.dae in my example), and specify
// the callback function that is called once the model has loaded:
loader.load( 'assets/mouse_v1_model/meshes/mouse_v1_model_animated.dae', function ( collada ) {

    // Grab the collada scene data:
    mouse = collada.scene.children[0];

    // No skin applied to my model so no need for the following:
    // var skin = collada.skins[ 0 ];

    mouseObject = new THREE.Object3D();

    for (var j = 0; j < mouse.children.length; j++) {
        mouseObject.add(new THREE.Mesh(mouse.children[j].geometry, mouse.children[j].material));
    }

    mouseObject.matrixAutoUpdate = false;
    mouseObject.position.z = 100;

    // Scale-up the model so that we can see it:
    /* mouse.scale.x = mouse.scale.y = mouse.scale.z = 3.0;
     mouse.rotation.z = 360;
     mouse.rotation.x = 180;
     mouse.rotation.y = 180;
     mouse.position.x = 0;
     mouse.position.y = -10;
     mouse.position.z = 100;
     mouse.updateMatrix();*/

    //arScene.scene.add(mouseObject);

});

// Load the marker to use.
arController.loadMultiMarker('jsartoolkit5/examples/Data/multi/marker.dat', function(marker, markerNum) {

    window.onclick = function() {
        arScene.video.play();
    };

    // Create an object that tracks the marker transform.
    var markerRoot = arController.createThreeMultiMarker(marker);
    arScene.scene.add(markerRoot);

    for (var i=0; i<markerNum; i++) {

        markerRoot.markers[i] = mouseObject;
        markerRoot.add(markerRoot.markers[i]);
    }

    // Call arScene.renderOn on each frame,
    // it does marker detection, updates the Three.js scene and draws a new frame.
    var tick = function() {
        requestAnimationFrame(tick);

        arScene.process();
        arScene.renderOn(renderer);
    };
    tick();

});    

2 个答案:

答案 0 :(得分:0)

您可以从加载的场景对象中创建类型为THREE.Group的容器对象。
这样的事情:

function onLoadCallback( result ){
    // Create a group object as a container
    var container = new THREE.Group();
    container.name = 'container';
    container.children = result.children;

    // Add it to your existing scene
    scene.add( container );
}

loader.load( 'assets/mouse_v1_model/meshes/mouse_v1_model_animated.dae', onLoadCallback);

答案 1 :(得分:0)

如果您自己制作collada(例如从Blender导出),那么我建议您尝试使用ThreeJS导出器(查看here)。

或者,您可以查看您的collada(毕竟,它只是一个XML),并将您的对象添加到您的场景中,如下所示:

scene.add(collada.children.YOUR_OBJECT);