从three.js中的3个顶点渲染平面

问题描述 投票:0回答:1

我正在尝试将一组3个顶点渲染为一个平面(如图所示)。但是,我尝试过的每种方法(大多来自SO或官方Three.js论坛)都不适合我。

// example vertices
const vert1 = new THREE.Vector3(768, -512, 40)
const vert2 = new THREE.Vector3(768, -496, 40)
const vert3 = new THREE.Vector3(616, -496, 40)

我已经尝试了以下代码来计算平面的宽度和高度,但是我认为它过于复杂(因为我仅计算X和Y坐标,如果我也添加了代码,我想我的代码将成倍增长。 Z坐标和该逻辑的平面位置)。

const width = vert1.x !== vert2.x ? Math.abs(vert1.x - vert2.x) : Math.abs(vert1.x - vert3.x)
const height = vert1.y !== vert2.y ? Math.abs(vert1.y - vert2.y) : Math.abs(vert1.y - vert3.y)

示例:我想创建一个具有点A,B和C的三个角的平面以及一个具有点D,E和F的三个角的平面。

Example Video

javascript math three.js geometry webgl
1个回答
0
投票

您可以使用THREE.Plane.setFromCoplanarPoints()从三个共面点创建一个平面。但是,THREE.Plane的实例只是将3D空间分成两个半空间的无限平面的数学表示。如果要使其可视化,请考虑使用THREE.PlaneHelper。或者,您可以使用以下线程中的方法从THREE.Plane实例中获取平面网格。

Three.js - PlaneGeometry from Math.Plane

© www.soinside.com 2019 - 2024. All rights reserved.