IIS指定MIME类型,便以请求obj,mtl数据。其类型为text/plain。

3js支持多种格式的模型导入,但是常用的也就obj、json、js这几种格式。另外,有些时候,美术或工程部提供max文件,这时需要用3dmax将模型转为常用的格式。我们主要就来说说如何用threejs加载模型以及贴图文件。

//最简单的mtl、obj同时加载
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/OBJLoader.js"></script>
<!-- 你需要先引入这几个文件 -->
···
<!-- 把模型加载封装一下 -->
function initMtlloader () {
    var loaderMtl = new THREE.MTLLoader();
    loaderMtl.setPath('model/');  //设置文件路径
    loaderMtl.load('2032.mtl', function(obj1){
        obj1.preload();
        var loaderobj = new THREE.OBJLoader();
        loaderobj.setMaterials(obj1);
        loaderobj.load('model/2032.obj', function(obj2){
            obj2.scale.set(1, 1, 1);
            obj2.position.y = -100;
            scene.add(obj2);
        });
    });
}
<!--  -->

也可以单独加载obj

<!-- 同样封装一下 -->
function initLoader () {
    var loader = new THREE.OBJLoader();
    loader.load('baiyuDCport/2032.obj', function(obj){
        obj.scale.set(1, 1, 1);
        obj.position.y = 100;
        scene.add(obj);
    });
}

任性一下,加载js格式(obj转js不介绍了)。

<!-- 加载js只需要three.js -->
function loaderjs() {
    var jsLoader = new THREE.JSONLoader();
    jsLoader.load( 'convert_js/2032_2.js', function( geometry ,materials) {
        var material = new THREE.MeshFaceMaterial(materials[0]);
        var object = new THREE.Mesh(geometry, material);
        object.scale.set(1, 1, 1);
        object.position.set(100,0,0);
        scene.add(object);
    });
}

加载模型并没有什么难度,我们要研究不同格式的模型的加载速度和实际效果,以针对项目具体需求。老大让我研究单器物obj和fbx两种格式,fbx又涉及到.max。不急,我们慢慢来。

以银刀动态模型为例

格式 文件大小 加载速度 是否支持动画 使用分析
.obj/.mtl 5.67M 1 加载简单,不需要动作时推荐使用
.fbx 2.62M 1 支持 引入FBXLoader.js,据说有</br>无与伦比的互用性
.js 7.07M 1 支持 几乎满足所有主流需求,但</br>是在导出时有很多细节

下面就加载这个动态模型