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