Three.js加载OBJ模型或FBX模型

最新推荐文章于 2024-05-27 23:00:00 发布

葱葱葱葱葱呀

最新推荐文章于 2024-05-27 23:00:00 发布

阅读量3.6k

点赞数 2

分类专栏： Three.js 文章标签： javascript 前端 three

本文链接：https://blog.csdn.net/weixin_42358094/article/details/123262483

版权

Three.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 引入相关OBJLoader、MTLLoader文件；

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

2. 在MTL材质中加载OBJ模型

var OBJLoader = new THREE.OBJLoader();//obj加载器
var MTLLoader = new THREE.MTLLoader();//材质文件加载器

MTLLoader.load('./all.mtl', function (materials) {
    OBJLoader.load('./obj/BUJIAN.obj', function (obj) {
        scene.add(obj);//返回的组对象插入场景中
    })
})

3. 加载FBX模型

var loader = new THREE.FBXLoader();
loader.load('./all.FBX', function (obj) {
    //渲染阴影
    obj.traverse(function (child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
      });
     scene.add(obj);
});

如果模型加载了却没显示出来，看下是否因为模型大小原因；通过obj.scale.set(0.15, 0.1, 0.1)

4. 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="./three.min.js"></script>
    <!-- 引入fbx模型加载库FBXLoader -->
    <script src="./FBXLoader.js"></script>
    <script src="./OBJLoader.js"></script>
    <script src="./MTLLoader.js"></script>
    <!-- 辅助文件 -->
    <script src="./inflate.min.js"></script>
    <script src="./OrbitControls.js"></script>

</head>

<body>
    <script>
        /**
           * 创建场景对象Scene
        */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        var OBJLoader = new THREE.OBJLoader();//obj加载器
        var MTLLoader = new THREE.MTLLoader();//材质文件加载器
        // MTLLoader.load('./all.mtl', function (materials) {
        //     //obj的模型会和MaterialCreator包含的材质对应起来
        //     OBJLoader.setMaterials(materials);
        //     OBJLoader.load('./obj/HY_q.obj', function (obj) {
        //         window.obj = obj
        //         scene.add(obj);//返回的组对象插入场景中
        //     })

        // })
        var loader = new THREE.FBXLoader();
        loader.load('./a/b.FBX', function (obj) {
            //渲染阴影
            obj.traverse(function (child) {
                if (child.isMesh) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });
            obj.position.set(-20, -50, 50)
            obj.scale.set(0.15, 0.1, 0.1)
            scene.add(obj);
        });
        /**
         * 光源设置
         */
        //点光源
        // var point = new THREE.PointLight(0xffffff);
        // point.position.set(400, 200, 300); //点光源位置
        // scene.add(point); //点光源添加到场景中
        // //环境光
        // var ambient = new THREE.AmbientLight(0x444444);
        // scene.add(ambient);
        var light = new THREE.HemisphereLight(0xffffff, 0x444444);
        light.position.set(0, 200, 0);
        scene.add(light);
        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(0, 200, 100);
        light.castShadow = true;
        light.shadow.camera.top = 180;
        light.shadow.camera.bottom = - 100;
        light.shadow.camera.left = - 120;
        light.shadow.camera.right = 120;
        scene.add(light);
        const width = window.innerWidth
        const height = window.innerHeight
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 20, 20);
        
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        new THREE.OrbitControls(camera, renderer.domElement);
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        //执行渲染操作   指定场景、相机作为参数
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate()
    </script>
</body>

</html>