【Three.js】模型线条化

           

 

制作思路：

1.加载模型。我用的是OBJ模型 官网API：https://threejs.org/docs/index.html?q=OBJLoader#examples/zh/loaders/OBJLoader

2.给模型贴上透明材质

3.使用EdgesGeometry创建这个模型描边数据。官网API：https://threejs.org/docs/index.html?q=EdgesGeometry#api/zh/geometries/EdgesGeometry

4.按照描边生成线条，赋上材质，把线条添加到场景中。

5.把模型添加到场景中

直接上代码：

      // 建筑面材质
      let buildMaterial = new THREE.MeshBasicMaterial({
        color: "#009EFF",     // 颜色
        transparent: true,    // 是否开启使用透明度
        opacity: 0.25,        // 透明度
        depthWrite: false,    // 关闭深度写入 透视效果
        side: THREE.DoubleSide, // 双面显示
      });

      // 建筑线材质
      let lineMaterial = new THREE.LineBasicMaterial({
        color: "#36BCFF",
        transparent: true,
        opacity: 0.4,
        depthWrite: false,
        side: THREE.DoubleSide,
      });

      const loader = new OBJLoader(); //引用加载obj模型组件
      loader.load(
          'images/test/baida.obj',
          function (object) {
            object.scale.set(0.1, 0.1, 0.1);  // 设置模型缩放
            object.traverse((e) => {              // 遍历模型中所有mesh
              e.material = buildMaterial;             // 赋模型材质
              if (e.geometry) {
                const edges = new THREE.EdgesGeometry(
                    e.geometry
                );
                const line = new THREE.LineSegments(
                    edges,
                    lineMaterial                      // 赋线条材质
                );
                object.add(line);                     // 把每一个mesh生成的线条添加到场景中
              }
            });
            scene.add(object);                        // 添加到场景中
          },
          function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% 加载进度');
          },
          function (error) {
            console.log("错误，检查你的模型路径是否准确，模型是否存在！", error);
          }
      );

ps：
1.加载模型。这里的模型我使用的是项目的绝对路径，图片我放在public下。也可以使用相对路径../../xxx.obj，../代表当前脚本父文件夹。如果没反应就查看下log看看是否模型没加载出来。
2.如果没有报错，在场景中还是看不到模型，那就检查下模型的缩放是不是太小或者太大超出屏幕。
3.使用object.traverse((e) => {}遍历 ，因为会用3dmax或其他建模软件的小伙伴知道建模的时候也是一个对象一个对象分开的便于管理，导出的时候会有一个root节点下面才是模型网格。