javascript - 在 Three.js 中创建漏洞

Question

这实际上取自THREEJS: add hole to rendered Shape 。但还是不行。

错误是

three.js:34206 Uncaught TypeError: Cannot read property 'concat' of undefined

var plane, vertices = [], planeShape;
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0});

        vertices.push(
            new THREE.Vector3(-room_width/2,room_depth/2,0),
            new THREE.Vector3(room_width/2,room_depth/2,0),
            new THREE.Vector3(room_width/2,-room_depth/2,0),
            new THREE.Vector3(-room_width/2,-room_depth/2,0)
        );

        planeShape = new THREE.Shape(vertices);

        plane = new THREE.Mesh( new THREE.ShapeGeometry(planeShape), planeMaterial);

        scene.add(plane);

        var holes = [
            new THREE.Vector3(-room_width/4,room_depth/4,0),
            new THREE.Vector3(room_width/4,room_depth/4,0),
            new THREE.Vector3(room_width/4,-room_depth/4,0),
            new THREE.Vector3(-room_width/4,-room_depth/4,0)
        ],

        hole = new THREE.Path();
        hole.fromPoints(holes);

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

        plane.geometry.faces = [];

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

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

编辑:::ANS

        var plane, vertices = [], planeShape;
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0});

        vertices.push(
            new THREE.Vector3(-150,-150,0),
            new THREE.Vector3(150,-150,0),
            new THREE.Vector3(150,150,0),
            new THREE.Vector3(-150,150,0)
        );

        planeShape = new THREE.Shape(vertices);

        plane = new THREE.Mesh( new THREE.ShapeGeometry(planeShape), planeMaterial);

        scene.add(plane);

        var holes = [
            new THREE.Vector3(-75,-75,0),
            new THREE.Vector3(75,-75,0),
            new THREE.Vector3(75,75,0),
            new THREE.Vector3(-75,75,0)
        ],

        hole = new THREE.Path();
        hole.fromPoints(holes);

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

        plane.geometry.faces = [];

        var triangles = THREE.ShapeUtils.triangulateShape ( points.shape, points.holes );

        plane.geometry.vertices.push(
            new THREE.Vector3(-75,-75,0),
            new THREE.Vector3(75,-75,0),
            new THREE.Vector3(75,75,0),
            new THREE.Vector3(-75,75,0)
        );
        for( var i = 0; i < triangles.length; i++ ){
            plane.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
        }

Answer 1

对于任何偶然发现这一点的人来说，与旧的“THREE.ShapeUtils.triangulateShape”相比，现在有一种更简单的方法来处理孔并自己构建三 Angular 形。

//vertices is the main shape/contour/exterior, a "ring" as a list of THREE.Vector2 instances
//holes is a list of THREE.Path instances, created from THREE.Vector2
//If you pass THREE.Vector3 then the Z property is ignored.

var shape = new THREE.Shape(vertices);
shape.holes = holes;

var geometry = new THREE.ShapeBufferGeometry( shape );

...