Question

这实际上取自THREEJS: add hole to rendered Shape。但它仍然没有用。

错误是

three.js：34206未捕获的TypeError：无法读取未定义的属性'concat'

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”相比，现在有一种更简单的方法来处理洞，并自己构建三角形。

//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 );

...

在three.js中创建漏洞

1 个答案: