THREEJS 笔记3 模型篇

THREEJS支持很多模型，这里我们主讲两种obj,fbx

而这里，我们主要讲obj

obj模型

obj主要用于展示静态，也就是自身不带动画的模型，它经常和同名的mtl文件以及几张贴图放在一起使用。

obj文件保存的是网格模型数据，mtl文件保存了网格上的素材贴图，而图片就是放在一起那些jpg或者png。

obj使用objLoader.js文件加载obj模型，同时要使用mtlLoader文件去加载mtl（如果你只要obj的话另当别论），部分代码如下：

function initObj() {
    // 定义监听进度方法，通过该方法了解模型加载的程度
    var onProgress = function(xhr) {
        if(xhr.lengthComputable) {
            var percentComplete = xhr.loaded / xhr.total * 100;
        }
    };
    
    // 定义模型加载失败方法
    var onError = function(xhr) {};
    
    // 定义mtlLoader方法
    var mtlLoader = new THREE.MTLLoader();
    
    // 设定mtl文件的路径
    mtlLoader.setBaseUrl('male02/');
    mtlLoader.setPath('male02/');
    // 加载mtl文件，后面的方法是回调函数materials会返回加载完的皮肤数据
    mtlLoader.load('male02.mtl', function(materials) {
        // 不理解有啥用，不加似乎也没啥
        materials.preload();
        
        // 定义objLoader
        var objLoader = new THREE.OBJLoader();
        
        // 将皮肤定义好
        objLoader.setMaterials(materials);
        
        // 同样设置路径
        objLoader.setPath('male02/');
        objLoader.load('male02.obj', function(object) {
            // 这里的obj就已经是完整的带皮肤素材的模型了
            scene.add(object);
            object.position.x = 100;
            object.position.z = 100;
            object.scale.set(0.3, 0.3, 0.3);
        }, onProgress, onError);

    });
}

obj基本用于静态的模型展示，内部并不含有动画信息，真的想要在模型中自定义动画，请尝试其他格式，如fbx。

796d026e6760090c1d91fdefa03b7a3.png

fbx模型

fbx模型相对于obj来讲要简单的多，只需要加载一个fbxloader.js，并且能够自带动画。但up主听说three官方似乎不想更新维护这个加载器了，不知道是不是真的。
其加载代码如下：

var mixers=[];
function addFloor() {
    // 定义fbxloader
    var loader = new THREE.FBXLoader();
    
    // 查看进度方法，你要不想写也能把对应的部分删了
    var onProgress = function(xhr) {
        if(xhr.lengthComputable) {
            if(xhr.loaded == xhr.total) {
            }
        }
    }
    
    // 加载对应的fbx模型
    loader.load('assets/obj/floor/floor.fbx', function(object) {
        
        // 直接用也没啥但是最好还是赋值一下，方便其他元素（render）去操作。
        var floorEl = object;
        
        // 设置缩放比，坐标，将其添加到场景中
        floorEl.scale.multiplyScalar(0.1);
        floorEl.position.set(0, 0, 0);
        groupT.add(floorEl);
        
        // 以下代码用于执行带有动画的fbx模型，全局需要定义个空数组mixers。
        object.mixer = new THREE.AnimationMixer(object);
        mixers.push(object.mixer);

        var action = object.mixer.clipAction(object.animations[0]);
        action.play();
        
    }, onProgress);
}

function render() {

    var delta = clock.getDelta();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
    
    // 循环遍历mixers中的元素并执行动画
    if(mixers.length > 0) {
        for(var i = 0; i < mixers.length; i++) {
            mixers[i].update(delta);
        }
    }


}

以上便是fbx模型的基本用法：

7e89188169a46b2b72fa2c37bf658eb.png a21c44d98ad39f5b0a2a3258d97e487.png

上面除了水都是fbx模型，可以看到瓶子已经执行了动画。