THREEJS:向渲染形状添加孔 [英] THREEJS: add hole to rendered Shape

问题描述

我正在尝试为已经添加到场景中的形状注入孔，但是出了点问题......所以细节:形状

I'm trying to inject hole to the shape that is already added to the scene, but some thing going wrong... so in details: the shape

        var well,
            vertices = [],
            wellShape,
            wellMaterial = new THREE.MeshLambertMaterial({color: this.params.wellsColor});

            vertices.push(new THREE.Vector2(0,3000));
            vertices.push(new THREE.Vector2(4000,3000));
            vertices.push(new THREE.Vector2(4000,0));
            vertices.push(new THREE.Vector2(0,0));

            wellShape = new THREE.Shape(vertices);

            well = new THREE.Mesh( new THREE.ShapeGeometry(wellShape), wellMaterial);

    scene.add(well);

    well.geometry.dynamic = true;

    var hole = [
            new THREE.Vector3(300,300,0),
            new THREE.Vector3(1000,300,0),
            new THREE.Vector3(1000,1000,0),
            new THREE.Vector3(300,1000,0)
        ];

        well.geometry.vertices = well.geometry.vertices.concat(hole);
        well.geometry.faces = [];

var triangles = THREE.Shape.Utils.triangulateShape ( well.geometry.vertices, hole );

    for( var i = 0; i < triangles.length; i++ ){

        well.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
        well.geometry.faceVertexUvs[ 0 ][i] = THREE.ExtrudeGeometry.WorldUVGenerator.generateTopUV(well.geometry, triangles[i][0], triangles[i][1], triangles[i][2]);

}

但结果我得到了一些奇怪的东西:在控制台输出中无限循环！剩下的洞:4，可能是形状之外的洞！"在桌面上我得到了 https://yadi.sk/i/WHRzH7c2jnaRm有人能告诉我我的代码有什么问题吗?

but as result i got something strange: in console output "Infinite Loop! Holes left:4, Probably Hole outside Shape!" and on desktop i got https://yadi.sk/i/WHRzH7c2jnaRm could someone tell me what is wrong in my code?

推荐答案

玩了几天后，我发现了问题所在:1. THREE.Shape.Utils.triangulateShape 期望顶点和孔是相同形状的部分.2. 孔不应该是点数组，而是路径数组.3. 三角剖分后的顶点应该连接起来.所以正确的结果是:

after few days play around I found what is wrong: 1. THREE.Shape.Utils.triangulateShape expect vertices and holes to be parts of same shape. 2. hole should be not the array of points but array of path. 3. vertices should be concated after triangulation. so correct result is:

....
var holePoints = [
            new THREE.Vector3(300,300,0),
            new THREE.Vector3(1000,300,0),
            new THREE.Vector3(1000,1000,0),
            new THREE.Vector3(300,1000,0)
        ],
hole = new THREE.Path();
hole.fromPoints(holePoints);

var shape = new THREE.Shape(well.geometry.vertices);
shape.holes = [hole];
var points = shape.extractPoints();
well.geometry.faces = [];

var triangles = THREE.Shape.Utils.triangulateShape ( points.vertices, points.holes );
....

希望有人会发现此信息有帮助.

Hope someone will find this info helpful.

这篇关于THREEJS:向渲染形状添加孔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！