相关疑难解决方法(0)

在伪重复点中,Three.js多边形三角剖分失败

three.js中有一个功能triangulateShape().现在我遇到了使用Javascript Clipper简化三角形多边形的失败.Clipper中的简化是使用Unioning完成的.维基百科文章将联合确定为找到包含两个简单多边形中任一区域内的区域的简单多边形或多边形.同一篇文章说,在简单的多边形"恰好两个边缘在每个顶点相遇"并且还确定了一个弱简单的多边形,边缘可以在这里面相遇,但是没有说明边缘不满足的边缘情况,但有些或许多顶点相遇.所以有点不清楚这种情况是简单的多边形还是弱简单的多边形.

Clipper选择了一种允许的方法:简单的多边形可以使这些像触摸(或伪复制)顶点.这种Clipper风格的许可方法导致生成的简单多边形在three.js:s triangulateShape()期望的含义中并不简单.

下图显示了此边缘情况的两个示例.左边的多边形是一个"简单"多边形,红点是"重复".右边的也是一个"简单"的多边形,但红点是"重复".

在此输入图像描述

triangulateShape()在这些情况下失败,因为它跟踪数组中的点,allPointsMap并从那里检查点是否重复.要删除这些重复项,我有两个选择:


OPTION 1.

更改Javascript Clipper内部代码以使用额外参数来处理这些内容,例如.breakPolygonByWeakDuplicatesSimplifyPolygon()SimplifyPolygons().正如安格斯约翰逊在其帖子中所描述的那样,改变将是这样的:

在IntersectEdges()方法中,更改以下内容...

if ( e1Contributing && e2contributing )
{
  if ( e1stops || e2stops || 
    (e1Wc != 0 && e1Wc != 1) || (e2Wc != 0 && e2Wc != 1) ||
    (e1->polyType != e2->polyType && m_ClipType != ctXor) )
      AddLocalMaxPoly(e1, e2, pt); 
  else
      DoBothEdges( e1, e2, pt …

polygon boolean-operations three.js

6
推荐指数
1
解决办法
3601
查看次数

使用Three.js生成正多边形

我正在使用Three.js 基于用户提供的边数来程序生成常规N字符.长期目标是将其作为渲染多面体棱镜的第一步.

我正在使用此处讨论的解决方案来计算N字形的顶点.

然后我使用这里讨论的技术在N -gon 上生成面.

我第一次尝试生成必要的Geometry对象导致以下内容,在添加到Mesh后似乎没有呈现任何内容:

function createGeometry (n, circumradius) {

    var geometry = new THREE.Geometry(),
        vertices = [],
        faces = [],
        x;

    // Generate the vertices of the n-gon.
    for (x = 1; x <= n; x++) {
        geometry.vertices.push(new THREE.Vector3(
            circumradius * Math.sin((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
            circumradius * Math.cos((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
            0
        ));
    }

    // Generate …
Run Code Online (Sandbox Code Playgroud)

javascript geometry polygon three.js

5
推荐指数
2
解决办法
9007
查看次数

如何向 THREE.BufferGeometry 添加面?

我以编程方式创建了一个简单的网格:

var CreateSimpleMesh = new function () {
    var xy = [],
        maxX = 7,
        maxY = 10,
        river = [[0, 5], [0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 1], [6, 0]],
        grassGeometry = new THREE.BufferGeometry(),
        grassVertexPositions = []

    this.init = function () {
        for (i = 0; i < maxX; i++) {
            for (j = 0; j < maxY; j++) {
                xy.push([i, j])
            }
        }

        for (var i = 0; i < xy.length; i++) { …
Run Code Online (Sandbox Code Playgroud)

javascript vertex three.js buffer-geometry

5
推荐指数
1
解决办法
6838
查看次数

使用 Three.js 自定义形状

我正在尝试在 Three.js 中创建一个多边形,这是我使用的代码。

function DeployZone(coordinatesList) {
// Create the polygon Shape
{


    var material = new THREE.MeshLambertMaterial({ color: 0x00ffcc });

    var faces = [0, 1, 2, 3, 4];

    var geometry = new THREE.Geometry();
    for (var i = 0; i < coordinatesList.length; i++) {
        geometry.vertices.push(new THREE.Vector3(
            coordinatesList[i].x,
            coordinatesList[i].z,
            coordinatesList[i].y
        ));
    }


    for (var i = 0; i<faces.length; i++) {
        for (var j = 1; j < faces.length - 1; j++) {
            geometry.faces.push(new THREE.Face3(faces[0], faces[j], faces[j + 1]));
        }
    }

    geometry.computeFaceNormals();
    var …
Run Code Online (Sandbox Code Playgroud)

javascript 3d three.js geometry-surface

3
推荐指数
1
解决办法
6000
查看次数