THREEJS无法克隆FBX模型

时间:2018-08-03 10:50:50

标签: javascript three.js 3d fbx

我正在为我的项目加载FBX模型。我想创建相同FBX模型的多个对象,但是分别加载每个对象的效率很低,因此我想保存一个加载的模型并对其进行克隆。此概念适用于.OBJ格式。

一切正常,但随后我使用“ model.clone();”真的什么也没发生。 该模型不再可见,但没有错误。如果将克隆的模型与原始模型进行比较,它们看起来会完全一样,所以我不知道为什么它没有显示出来。

工作时的样子:

enter image description here

当它不起作用时,它只是一块空白画布。

这是一些简化的工作源代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://vitalkia.com/jsLibraries/zlib.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/FBXLoader.js"> 
</script>
<script>
    var aspectRatio = 240 / 135;
    var scene;
    var renderer;
    var loaderFBX;
    var camera = new THREE.PerspectiveCamera(45, aspectRatio, 1, 10000);




    //Actual code
    //Setus up scene and renderer
    sceneSetup();

    //Load fbx and render
    //IGNORE ERROR ABOUT NOT FINDING THE RIGHT TEXTURE. It still works
    loaderFBX.load("https://threejs.org/examples/models/fbx/Samba Dancing.fbx", function(model){
        //Sending the object "model" works
        //But using model.clone() does not. It doesn't give any errors or anything, it's just not visible
        //If you compare the cloned model with the original they look exactly the same.

        var sendModel = model;//Works
        //var sendModel = model.clone();//Doesn't works
        console.log("Original: ");
        console.log(model);
        console.log("Cloned: ");
        console.log(model.clone());

        calcDistance(sendModel);

        scene.add(sendModel);
        renderer.render(scene, camera);
    });




    function calcDistance(model){
        var bbox = new THREE.Box3().setFromObject(model);

        var camDistance = bbox.max.z;
        if(bbox.max.x > camDistance){
            camDistance = bbox.max.x;
        }
        if(bbox.max.y*aspectRatio > camDistance){
            camDistance = bbox.max.y*aspectRatio;
        }

        camera.position.z = camDistance;
        model.position.x -= bbox.getCenter().x;
        model.position.y -= bbox.getCenter().y;
    }


    function sceneSetup(){
        loaderFBX = new THREE.FBXLoader();
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setSize(240, 135);
        document.body.appendChild(renderer.domElement);
        var light1 = new THREE.PointLight(0xffffff, 1, 100000000);
        light1.position.set(0, 0, 15);
        scene.add(light1);
        var newLightPoint = new THREE.HemisphereLight(0x8be2ff, 0xfff9cf, 0.55);
        scene.add(newLightPoint);
        camera.position.set(0, 0, 100);
        scene.add(camera);
    }
</script>

这是重用模型而不用为每个对象重新加载模型的方式吗?还是有更好的方法?

0 个答案:

没有答案