Three.js加载外部模型(Obj\mtl\json\font)

目录

Obj+mtl模型加载

加载json+贴图模型（后续详细说一说材质的贴图）：

3D字体加载

---

Obj+mtl模型加载

引入JS文件

<script src="build/three.js">script>

<script src="build/OBJLoader.js">script>

<script src="build/MTLLoader.js">script>

<script src="build/DDSLoader.js">script>

function OBJ(obj, mtl,name) {
    var mtlLoader= new THREE.MTLLoader();//mtl材质加载器
    mtlLoader.load(mtl, function( materials ) {

        materials.preload();
        materials.side= THREE.DoubleSide;
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(obj, function (object) {
            //object.scale.set(0.16,0.16,0.16);
            // object.position.y= 0;
            // building_1 = object.children[ 0 ].geometry;
            //var mesh =new THREE.group(object,materials);
            object.name=name;
            /*  object.traverse(function(child) {
             if (child instanceof THREE.Mesh) {
             alert(child);
             }
             });*/
            //mesh =object;
            //building_1=mesh;
            scene.add(object);
            building_1=object;


        } );

    });
}

 

加载json+贴图模型（后续详细说一说材质的贴图）：

先说一说如何得到json文件：

1. Blender 安装 ThreeJS 导出插件.

    1). 安装插件

            拷贝导出插件( three.js-master\three.js-master\utils\exporters\blender\addons\io_three ) 到Blender 相应的目录 ( Blender\2.79\scripts\addons ) .

    2). 装载插件

            启动 Blender , File -> User Preferences -> Add-ons -> 查询 Three, 勾选 Import-Export: Three.js Format

            Save User Settings(保存).

3. 导出 ThreeJS JSON 文件.

    1). 选择导出, File -> Export -> Three.js(.json)

    2). 选择导出设置进行导出.

导出设置配置详情:

    导出普通模型:

        默认设置直接导出.（类型选择几何数据，切记）

    导出带有关键帧动画的模型:

        SCENE

            勾选 Scene,  勾选 Materials

        ANIMATION

            勾选 Keyframe animation

        其他保持默认.

Json模型导入网页：

1. 
   // 实例化一个JSONLoader类
2. var loader = new THREE.JSONLoader();
3. // 导入资源
4. loader.load(
5.     // 导入的模型文件所在 URL
6.     'models/animated/monster/monster.js',
7.     // 资源加载成功后执行的函数
8.         //@params geometry  传入的模型，只能是单个模型，不能是一个场景
9.        // @params materials  传入的材质，是个数组
10. function ( geometry, materials ) {
11.     var material = materials[ 0 ];
12.     var object = new THREE.Mesh( geometry, material );
13.     scene.add( object );
14.  
15. }
16. );

贴图+json封装代码,材质贴图这里就不重点介绍了，大家可以自己去试试：

function changeBuilding(num,name,pathopacity,pathfile, pathjs, pathalbedo, pathroughness, pathao, pathmetallic,pathnormal) {

    var loader = new THREE.JSONLoader();
    var path = pathfile;
    var material = new THREE.MeshPhongMaterial();
    loader.load(path + pathjs, function (geometry) {
        var loader = new THREE.TextureLoader();
        material.roughness = 1;
        material.metalness = 1;
        material.transparent=true;

        material.aoMapIntensity=-0.01;
        material.map = loader.load(path + pathalbedo);
        material.normalMap = loader.load(path + pathnormal);
        material.metalnessMap = loader.load(path + pathmetallic);
        material.roughnessMap = loader.load(path + pathroughness);
        material.aoMap = loader.load(path + pathao);
        material.opacity=pathopacity;
        //material.opacity= loader.load(path+pathopacity);
        material.map.wrapS = THREE.RepeatWrapping;
        material.roughnessMap.wrapS = THREE.RepeatWrapping;
        material.metalnessMap.wrapS = THREE.RepeatWrapping;
        material.normalMap.wrapS = THREE.RepeatWrapping;
        material.aoMap.wrapS = THREE.RepeatWrapping;
        material.side = THREE.DoubleSide;
        var zmesh = new THREE.Mesh(geometry, material);
        zmesh.name=name;
        building_1f[num]=zmesh;
        //zmesh.position.y -= 1100;
        scene.add(zmesh);
    });
}

别的模型的加载也就这个套路，找到加载器，附材质，加载场景就可以了。

3D字体加载

//实时三维数据显示(demo完成)
var font1;
var font11="11.1";
var font111="%";
var fonter=new THREE.FontLoader();
function zitishuan() {
    fonter.load('fonts/helvetiker_bold.typeface.json',function(font){
        fLoader(font,font11+font111);
    });
}
function Rand() {
    font11= Math.floor(((Math.random()*(20-10)+10)*10))/10;
}

function fLoader(font,t) {
    scene.remove(font1);
    var text1 = t;
    var g = new THREE.TextGeometry(text1,{
        size: 0.2, //字号大小，一般为大写字母的高度
        height: 0.1, //文字的厚度
        //weight: 'normal', //值为'normal'或'bold'，表示是否加粗
        font: font, //字体，默认是'helvetiker'，需对应引用的字体文件
        //style: 'normal', //值为'normal'或'italics'，表示是否斜体
        //bevelThickness: 1, //倒角厚度
        //bevelSize: 1, //倒角宽度
        //curveSegments: 10,//弧线分段数，使得文字的曲线更加光滑
        // bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
    });
    g.center();
    g.computeBoundingBox();
    //3D文字材质
    var m = new THREE.MeshBasicMaterial({color:0xEAEAEA});
    var f = new THREE.Mesh(g,m);
    f.position.set(12.8,1.7,-6.2);
    f.rotation.y=0;
    f.rotation.x=0;
    f.rotation.z=0;
    // 加入到场景中
    font1=f;
    scene.add(f);


}
setInterval("zitishuan()","1000");
setInterval("Rand()","1000");

字体文件在three.js中的包中有一部分自带，现在使用的不支持中文显示，想中文显示换字体类型就可以了。最后的两行代码是为了检验字体的刷新影响。