Three.js学习09

提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。

---

前言

本篇主要介绍了stl和obj格式模型的导入。

---

一、三维模型导入

一些基本的模型可以通过three.js直接创建，如一些复杂的模型则需要在专业软件里完成，进行导入。

下面介绍一下stl和obj格式模型的导入。

1.stl格式的三维模型导入

stl格式的模型只有顶点等几何体信息，不包含材质信息。

1.1 引入STLLoader.js文件

引入STLLoader.js文件

<!--引入STLLoader.js文件-->
<script src="../threejs01/libs/STLLoader.js"></script>

1.2 使用 THREE.STLLoader() 创建加载器加载模型

使用 THREE.STLLoader() 创建加载器，加载.stl格式的模型，这里导入了一个房子的模型 ‘Kame_House_complete.stl’ ，加载完对模型进行一些移动等操作，设置了材质的颜色为0xff00ff。

// THREE.STLLoader创建一个加载器
    var loader = new THREE.STLLoader();
    loader.load('Kame_House_complete.stl',function (geometry) {
        // 加载完成后会返回一个几何体对象BufferGeometry，你可以通过Mesh、Points等方式渲染该几何体
        // 控制台查看加载放回的threejs对象结构
         console.log(geometry);
        // 几何体居中
        geometry.center();
        // 几何体绕着x轴旋转45度
        geometry.rotateX(-Math.PI / 2);
        // 平移立方体
        geometry.translate(0,80,0);
        var material = new THREE.MeshLambertMaterial({
            color: 0xff00ff,

        }); //材质对象Material
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中

1.3 效果

效果：

2.obj格式的三维模型导入

obj格式的模型和stl格式一样只有顶点等几何体信息，不包含材质信息。
但是从其他软件导出obj格式文件时，同时会导出mtl文件，mtl文件里包含了模型的材质信息。
所以，我们想要呈现完整的模型效果，一般同时导入obj和mtl格式模型文件。

2.1 引入OBJLoader.js和MTLLoader.js文件

引入OBJLoader.js和MTLLoader.js文件

<!-- 引入obj模型加载库OBJLoader.js -->
    <script src="../threejs01/libs/OBJLoader.js"></script>
    <!-- 引入obj模型材质加载库MTLLoader.js -->
    <script src="../threejs01/libs/MTLLoader.js"></script>

2.2 使用 THREE.OBJLoader()和THREE.MTLLoader() 创建加载器加载模型

和上面导入stl格式文件类似，这里导入了一个人物的模型 ‘boxe4.3dcool.net.obj’ 以及它的mtl格式材质文件。

/**
     * OBJ和材质文件mtl加载
     */
    var OBJLoader = new THREE.OBJLoader();//obj加载器
    var MTLLoader = new THREE.MTLLoader();//材质文件加载器
    MTLLoader.load('../threejs01/boxe4-fbx/boxe4.3dcool.net.mtl', function(materials) {
        // 返回一个包含材质的对象MaterialCreator
        console.log(materials);
        //obj的模型会和MaterialCreator包含的材质对应起来
        OBJLoader.setMaterials(materials);
        OBJLoader.load('../threejs01/boxe4-fbx/boxe4.3dcool.net.obj', function(obj) {
            console.log(obj);
            //obj.scale.set(10, 10, 10); //放大obj组对象

            scene.add(obj);//返回的组对象插入场景中
        })
    })

效果：

2.3 改变材质属性

想改变材质属性，因为材质信息都在mtl文件里，所以需要分析mtl文件。比如想改变皮肤的颜色，打印日志发现 child[5]的name为mtl格式文件里的皮肤，在里面设置了人物的全身皮肤贴图。

打印材质：

mtl文件里对应的部分：

所以我们想要将皮肤颜色，比如变绿，只需设置children[5]里的材质颜色。

obj.children[5].material.color.set(0x2BA715);

效果：

---