使用three.js加载3D模型

一、three.js加载模型

three.js是一个基于WebGL的开源JavaScript库，用于创建3D图形，同时它也支持加载和渲染3D模型。使用three.js可以方便快捷地创建WebGL应用程序，并且不需要关注底层的复杂细节。下面让我们来看看如何使用three.js加载3D模型。

首先，你需要引入three.js库。你可以通过下面的方式将其引入你的HTML代码中：

  
  <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
  

接着，你需要创建场景、相机、灯光、材质、纹理等元素，并且将它们添加到渲染器中。下面是一个基本的three.js场景：

  
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建物体
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    // 渲染场景
    renderer.render(scene, camera);
  

通过上面的代码，我们创建了一个场景，一个相机，一个渲染器，以及一个绿色的立方体。其中，PerspectiveCamera是透视相机，表示透视关系，可以产生透视效果。BoxGeometry表示一个立方体几何体，Mesh表示一个网格，MeshBasicMaterial是一种基本材质。

二、three.js引入3D模型

three.js支持多种格式的3D模型，包括JSON、OBJ、MTL、FBX等。不同的格式有不同的优缺点，在选择模型格式时需要考虑到自己的需求。下面让我们看看如何引入不同格式的3D模型。

1. JSON格式的3D模型

JSON格式的3D模型通常是由Blender或者其他3D建模软件导出的。需要使用Three.js的JSONLoader加载器加载。下面是一个JSON格式的模型加载示例：

  
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 加载json模型
    var loader = new THREE.JSONLoader();
    loader.load('model.json', function(geometry, material){
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });

    // 渲染场景
    renderer.render(scene, camera);
  

上面的示例代码使用了JSONLoader加载器来加载模型，load方法用来加载模型给它传递模型的url，回调函数里通过Mesh来创建物体，并添加到场景中。

2. OBJ格式的3D模型

OBJ格式的3D模型被广泛使用，可以使用Three.js的OBJLoader加载器来加载OBJ格式的模型。下面是一个OBJ格式的模型加载示例：

  
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 加载obj模型
    var loader = new THREE.OBJLoader();
    loader.load('model.obj', function(object){
      scene.add(object);
    });

    // 渲染场景
    renderer.render(scene, camera);
  

上面的示例代码使用了OBJLoader加载器来加载模型，load方法用来加载模型给它传递模型的url，回调函数里通过add方法添加到场景中。

三、three.js加载模型进度

当我们加载较大的模型时，页面可能会因为长时间未响应而显示“假死”状态，为了解决这个问题，我们可以使用three.js提供的LoadingManager和onProgress（进度）方法来追踪并显示模型加载进度。下面给出了一个加载进度的实例：

  
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建LoadingManager，并且给它添加onProgress方法
    var manager = new THREE.LoadingManager();
    manager.onProgress = function(item, loaded, total){
      console.log(item, loaded, total);
    }

    // 创建一个obj加载器，并且给它传入创建的manager
    var loader = new THREE.OBJLoader(manager);
    loader.load('model.obj', function(object){
      scene.add(object);
    });

    // 渲染场景
    renderer.render(scene, camera);
  

上面的示例代码中通过在LoadingManager和load方法间添加连接器来追踪进度，每次一个物体被成功加载时会通过添加到场景中来触发onProgress方法，显示加载进度。

四、总结

使用three.js可以方便地加载和渲染3D模型，有了它我们就可以让Web应用程序拥有更加丰富的交互体验。本文介绍了使用three.js加载3D模型的步骤，包括引入three.js、引入3D模型、加载模型进度等内容。希望这篇文章能够帮助你更好地使用three.js创建你的3D应用程序。