three.js设置模型边界线

最新推荐文章于 2024-06-20 10:12:56 发布

是云呀！

最新推荐文章于 2024-06-20 10:12:56 发布

阅读量605

点赞数 8

分类专栏： three.js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/yunbabac/article/details/135595538

版权

three.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了如何在three.js中设置外部模型的透明度并创建边缘线，通过traverse方法遍历模型对象，使用EdgesGeometry创建线条几何体并应用LineSegments实现模型边界效果。

摘要由CSDN通过智能技术生成

three.js设置模型边界线

图例

在这里插入图片描述

步骤

拿到模型（如果是外部模型需要遍历），设置透明度
根据模型的几何体创建EdgesGeometry几何体
创建线条材质
创建LineSegments线模型
模型加入线模型

代码

const m = model.scene.getObjectByName("仓库");
  // 模型边界线
  m.traverse(function (obj) {
    if (obj.isMesh) {
      obj.material.transparent = true;
      obj.material.opacity = 0.3;
      const edges = new THREE.EdgesGeometry(obj.geometry);
      const edgesMaterial = new THREE.LineBasicMaterial({
        color: 0x00ffff,
      });
      const line = new THREE.LineSegments(edges, edgesMaterial);
      obj.add(line);
    }
  });