【愚公系列】2023年08月 Three.js专题-模型加载

愚公搬代码

发布于 2025-05-28 17:16:31

17900

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

前言

模型加载是指将3D模型文件加载到应用程序中，以便进行操作和渲染。常见的3D模型格式包括OBJ、FBX、STL、Collada等。加载模型通常需要一个3D引擎或渲染引擎，例如Unity、Unreal Engine、Three.js等。在加载模型时，需要指定模型文件的路径，并根据需要进行调整和设置，例如缩放、位置、旋转等。加载后，可以对模型进行各种操作，例如添加材质、添加动画、进行碰撞检测等。

一、模型加载

1.OBJ模型加载

obj的3D模型是一种计算机图形学中常用的三维模型格式。它是一种文本格式，可以描述物体的几何形状、纹理、光照等属性。obj3D模型通常由3D建模软件生成，常见的有Blender、Maya、3ds Max等。这种格式通常被用于游戏制作、动画制作、建筑设计等领域。

使用Three.js加载OBJ模型可以分为以下步骤：

引入Three.js库和OBJLoader.js插件

<script src="https://cdn.jsdelivr.net/npm/three@0.131.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.131.1/examples/js/loaders/OBJLoader.js"></script>

创建一个渲染器和场景

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();

创建相机

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

创建OBJLoader对象，并加载OBJ文件

var loader = new THREE.OBJLoader();

loader.load(
    'path/to/your/obj/file.obj',
    function (object) {
        scene.add(object);
    }
);

渲染场景

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

animate();

完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three.js OBJLoader Demo</title>
    <style>
        canvas{
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.1/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.1/examples/js/loaders/OBJLoader.js"></script>
    <script>
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.z = 5;

        var loader = new THREE.OBJLoader();
        loader.load(
            'path/to/your/obj/file.obj',
            function (object) {
                scene.add(object);
            }
        );

        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }

        animate();
    </script>
</body>
</html>

注意，在实际使用中，加载OBJ文件的路径需要根据实际情况进行设置。可以使用相对路径或绝对路径。另外，加载完成后的对象可以进行各种操作，例如旋转、缩放、平移等。

2.MTL模型加载

要加载带有MTL材质的模型，需要使用OBJLoader和MTLLoader。首先，下载Three.js库并将其导入到HTML文件中。然后，使用以下代码创建场景、相机和渲染器：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

接下来，使用MTLLoader加载MTL文件，然后使用OBJLoader加载OBJ文件：

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('/path/to/model.mtl', function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load('/path/to/model.obj', function(object) {
        scene.add(object);
    });
});

最后，使用渲染器和相机渲染场景：

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

这将在窗口中呈现带有MTL材质的模型。

3.案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/OBJLoader.js"></script>
  <script src="../lib/three/MTLLoader.js"></script>
  <script src="../lib/three/OBJMTLLoader.js"></script>
</head>
<body>

</body>
</html>

<script>
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0,300,400);
  camera.lookAt(new THREE.Vector3(0,0,0));

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(2000,8000,4000);
  scene.add(spotLight);

  const loader = new THREE.OBJMTLLoader()

  loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {
    scene.add(mesh);
  });

  const animation = () => {
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
  }
  animation()
</script>