three.js几何体之边缘几何体
边缘几何体 EdgesGeometry，和网格几何体 WireframeGeometry 一样，可以作为一个辅助对象用来查看其它实体几何体的边缘，不同的是，边缘几何体比网格几何体多了一个入参 thresholdAngle，用于控制两个相邻面之间的边是否需要绘制：如果两个面的法线小于该阈值，则边将不会被渲染，就是说，这个值越小，绘制的边就越多。其实现原理也是遍历Mesh几何体所有的三角面，再遍历三角面的边，若边没有被公用，则认为是边缘，会被收集。需要注意的是，作为辅助性质的几何体，边缘几何体和网格几何体一样，都需要借助其它几何体才能构图。构造器：
EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )
其中：
geometry — 任何一个Mesh几何体对象
thresholdAngle — 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。缺省时默认值为 1
为了对比，以下代码我们同时绘制了边缘几何体和网格几何体，效果见预览页面：
<div>左图: 边缘几何体<br>右图: 网格几何体<br><br>点击页面可暂停、继续动画</div>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
var scene = new THREE.Scene;
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.ExtrudeGeometry(); // 挤压缓冲几何体（默认参数）
var edges = new THREE.EdgesGeometry(geometry, 1); // 边缘几何体
var mesh_edges = new THREE.LineSegments(edges, new THREE.LineBasicMaterial()); // 构图
mesh_edges.position.set(-1, 0, 0); // 往左靠
var wireframe = new THREE.WireframeGeometry(geometry); // 网格几何体
var mesh_wireframe = new THREE.LineSegments(wireframe, new THREE.LineBasicMaterial()); // 构图
mesh_wireframe.position.set(1, 0, 0); // 往右靠
scene.add(mesh_edges, mesh_wireframe); // 两个图形加入场景
var animate = () => {
requestAnimationFrame(animate);
var delta = clock.getDelta();
[mesh_edges, mesh_wireframe].forEach(mesh => mesh.rotation.y -= delta / 5);
renderer.render(scene, camera);
};
document.onclick = () => clock.running ? clock.stop() : clock.start();
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
animate();
</script>
<style>
/* 预览页面CSS */
body { margin: 0; }
div { margin: 10px; position: absolute; color: #eee; }
</style>
前一篇: three.js几何体之车削缓冲几何体
下一篇: three.js几何体之挤压缓冲几何体
发表评论:
评论列表 [0条]
