Threejs载入OBJ和贴图

最新推荐文章于 2024-04-19 22:50:34 发布

Hi_Panda_CRL

最新推荐文章于 2024-04-19 22:50:34 发布

阅读量2.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： Threejs

本文链接：https://blog.youkuaiyun.com/grief_of_the_nazgul/article/details/42743005

Threejs 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何使用Threejs库加载OBJ模型，并通过两种方式实现贴图：一种是不使用MTL文件直接为模型分配材质和贴图，另一种是使用MTL文件加载贴图。示例代码展示了完整的HTML和JavaScript实现，包括设置场景、相机、渲染器、光源，以及使用OBJLoader和MTLLoader加载模型和材质。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

未使用MTL文件加载贴图

<pre name="code" class="html"><!DOCTYPE html>

<html>

<head>
    <title>Example 08.06 - Load OBJ model </title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>

    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {

        var stats = initStats();
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();
        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColorHex(0xaaaaff, 1.0);
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 1;
        camera.position.z = 200;
        camera.lookAt(new THREE.Vector3(0, 0, 0));


        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-30, 40, 50);
        spotLight.intensity = 1;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        $("#WebGL-output").append(webGLRenderer.domElement);

        // call the render function
        var step = 0;


        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial
        }
        var gui = new dat.GUI();
        var mesh;

        var loader = new THREE.OBJLoader();
        loader.load('../assets/models/00.obj', function (geometry) {
         var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});


		 //store global reference to .obj
        globalObject = geometry;

      geometry.traverse( function (child) {
          if ( child instanceof THREE.Mesh ) {
              child.material.map = THREE.ImageUtils.loadTexture( '../assets/models/00.jpg');
              child.material.needsUpdate = true;
          }
      });

            // geometry is a group of children. If a child has one additional child it's probably a mesh
            geometry.children.forEach(function (child) {
                if (child.children.length == 1) {
                    if (child.children[0] instanceof THREE.Mesh) {
                        child.children[0].material = material;
                    }
                }
            });

            mesh = geometry;
            geometry.scale.set(1, 1, 1);
            geometry.rotation.x = -2;
            scene.add(geometry);
        });


        render();


        function render() {
            stats.update();

            if (mesh) {
                mesh.rotation.y += 0.006;
                mesh.rotation.x += 0.006;
//                mesh.rotation.y+=0.006;
            }


            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            $("#Stats-output").append(stats.domElement);

            return stats;
        }
    });
</script>
</body>
</html>

使用MTL文件加载贴图

<pre name="code" class="html"><!DOCTYPE html>

<html>

<head>
    <title>Example 08.07 - Load OBJ and MTL </title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>
    <script type="text/javascript" src="../libs/MTLLoader.js"></script>
    <script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>
    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {
        var stats = initStats();
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColorHex(0xaaaaff, 1.0);
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(0, 10, 0));
        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(0, 40, 30);
        spotLight.intensity = 2;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        $("#WebGL-output").append(webGLRenderer.domElement);

        // call the render function
        var step = 0;
        // setup the control gui
        var controls = new function () {
            // we need the first child, since it's a multimaterial
        }
        var gui = new dat.GUI();
        var mesh;

        var loader = new THREE.OBJMTLLoader();
        loader.addEventListener('load', function (event) {

            var object = event.content;
            object.scale.set(1, 1, 1);
            mesh = object;
            scene.add(mesh);
            object.rotation.x = 0.2;
            object.rotation.y = -1.3;
        });
        loader.load('../assets/models/00.obj', '../assets/models/00.mtl', {side: THREE.DoubleSide});
        render();


        function render() {
            stats.update();

            if (mesh) {
                //      mesh.rotation.y+=0.006;
            }
            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            $("#Stats-output").append(stats.domElement);

            return stats;
        }
    });


</script>
</body>
</html>