Three.js - EdgesGeometry 几何体边框辅助线

最新推荐文章于 2024-06-20 08:49:41 发布

「已注销」

最新推荐文章于 2024-06-20 08:49:41 发布

阅读量1.1w

点赞数 4

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81531822

版权

本文介绍了Three.js中EdgesGeometry的用法，用于显示几何体对象的边缘。内容包括构造函数、参数解释、使用步骤及示例代码，通过设置thresholdAngle可以控制边框显示条件。示例链接展示了实际效果。

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

EdgesGeometry在老版本中叫做EdgesHelper但是已经被移除。新版本赋予边框辅助参考线，更加灵活的使用方法，可以改变其材质以及其他属性，EdgesGeometry的作用是可以帮助查看几何体对象的边缘。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180809/01-EdgesGeometry.html

构造函数

EdgesGeometry( geometry : Geometry, thresholdAngle : Integer )

参数

**geometry **：几何体对象
**thresholdAngle **：只有当相邻的面法线的角度（在一定程度上）超过这个值时，才会呈现出一条边。默认= 1度

使用步骤

1、首先，需要创建一个几何体，例如此处创建一个立方体

 let cubeGeometry = new THREE.BoxGeometry(50, 50 ,50);

2、然后，将立方体对象传给EdgesGeometry的构造函数，此时就创建了边缘几何体对象，但是还需要创阿建边框材质

let cubeEdges = new THREE.EdgesGeometry(cubeGeometry, 1);

3、创建基础线条材质，并创建线框分段THREE.LineSegments

let edgesMtl =  new THREE.LineBasicMaterial({
   color: 0xff0000});

// edgesMtl.depthTest = false; 深度测试，若开启则是边框透明的效果
let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);

4、最后将创建的线框加入的几何体中

cube.add(cubeLine);
scene.add(cube);

效果

这里写图片描述

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EdgesGeometry 边缘几何</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three-r93.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <scr

最低0.47元/天解锁文章

「已注销」

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
4
评论
Three.js - EdgesGeometry 几何体边框辅助线

EdgesGeometry在老版本中叫做EdgesHelper但是已经被移除。新版本赋予边框辅助参考线，更加灵活的使用方法，可以改变其材质以及其他属性，EdgesGeometry的作用是可以帮助查看几何体对象的边缘。示例：EdgesGeometry.html构造函数EdgesGeometry( geometry : Geometry, thresholdAngle : Integer ...
复制链接

扫一扫

专栏目录