7.three.js通用几何体加载与gltf模型、obj模型加载

7.three.js通用几何体加载与gltf模型、obj模型加载

1.几何体加载

three.js中提供了各种各样通用的几何体对象，方便我们进行通用几何体的构建，不必通过geometry基类来自定义顶点、面信息来进行构建，简化了我们开发。如BoxGeometry（方形几何体）、CircleGeometry（圆平面几何体）、CylinderGeometry（圆柱几何体）等等。

// BoxGeometry（方形几何体）
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

//CircleGeometry（圆平面几何体）
var geometry = new THREE.CircleGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

//CylinderGeometry（圆柱几何体）
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

2.gltf模型加载

three.js可以使用THREE.GLTFLoader加载gltf（或者glb）模型。THREE.GLTFLoader需要引入依赖库：GLTFLoader。

该依赖库在源码包中，如下：

<script src="../three.js-master/examples/js/loaders/GLTFLoader.js"></script>

 //加载器
        var loader = new THREE.GLTFLoader();

        //THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
        //loader.setDRACOLoader( new THREE.DRACOLoader() );

        loader.load(
          "./data/ztc-yellow-new.gltf",
          function (gltf) {
            scene.add(gltf.scene);
          },

          //加载回调
          function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
          },
          //加载失败回调
          function (error) {
            console.log("An error happened");
          }
        );

3.obj模型加载

three.js可以使用THREE.OBJLoader加载OBJ模型。THREE.OBJLoader需要引入依赖库：OBJLoader。

如果obj模型有纹理文件，则需要引入THREE.MTLLoader先加载纹理文件，THREE.MTLLoader需要引入依赖库：MTLLoader。

该依赖库在源码包中，如下：

<script src="../three.js-master/examples/js/loaders/OBJLoader.js"></script>
<script src="../three.js-master/examples/js/loaders/MTLLoader.js"></script>

 //先加载材质
        const mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath("./data/obj/male02/");
        mtlLoader.load("male02.mtl", (mtl) => {
          mtl.preload();

          //再加载模型
          const objLoader = new THREE.OBJLoader();
          objLoader.setMaterials(mtl);
          objLoader.load(
            "./data/obj/male02/male02.obj",
            function (root) {
              scene.add(root);
            },

            //加载回调
            function (xhr) {
              console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
            },
            //加载失败回调
            function (error) {
              console.log("An error happened");
            }
          );
        });

案例中的obj和gltf文件下载：

【免费】一些开发用的obj模型、gltf模型、glb模型资源-CSDN文库

视频学习地址：https://www.bilibili.com/video/BV1NZy5YiEWk/