Question

我尝试制作带孔的形状并挤出它，但我得到了一个奇怪的结果：

这是我的代码：

        var shape = new THREE.Shape();
        shape.moveTo(0,0);
        var radius = 1;
        shape.absarc(0,radius,radius,3/2*(Math.PI),1/2*(Math.PI), false);
        shape.lineTo(6.34,ToolSize);
        shape.absarc(6.34,radius,radius,1/2*(Math.PI),3/2*(Math.PI), false);

        for (var i=0; i<3; i++) {
            var hole = new THREE.Shape();
            var centerX = 1.9+i*1.27;
            hole.absarc(centerX,0.6,0.3,0,2*(Math.PI), false);

            shape.holes.push(hole);
        }

        var extrudeSettings={amount: 2, bevelEnabled: false, material: 0, extrudeMaterial: 1, steps: 10};
        var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

        var material1 = new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.1, metalness: 0.4, side: THREE.DoubleSide});
        var material2 = new THREE.MeshStandardMaterial({color: 0x8dbe8d, roughness: 0.7, metalness: 0, side: THREE.DoubleSide});

        var materials = [
            material1,
            material2];

        var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,materials);

感谢您的帮助

Answer 1

如果使用earcut作为三角测量算法，三角测量将起作用。

此更改应在将来的three.js版本中永久更改，但目前，请按照this three.js example中实施的更改进行操作。

更改涉及添加以下代码：

<!-- replace built-in triangulation with Earcut -->
<script src="js/libs/earcut.js"></script>
<script>
    THREE.ShapeUtils.triangulateShape = function ( contour, holes ) {

        function removeDupEndPts( points ) {

            var l = points.length;
            if ( l > 2 && points[ l - 1 ].equals( points[ 0 ] ) ) {

                points.pop();

            }

        }

        function addContour( vertices, contour ) {

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

                vertices.push( contour[ i ].x );
                vertices.push( contour[ i ].y );

            }

        }

        removeDupEndPts( contour );
        holes.forEach( removeDupEndPts );

        var vertices = [];
        addContour( vertices, contour );
        var holeIndices = [];
        var holeIndex = contour.length;
        for ( i = 0; i < holes.length; i ++ ) {

            holeIndices.push( holeIndex );
            holeIndex += holes[ i ].length;
            addContour( vertices, holes[ i ] );

        }

        var result = earcut( vertices, holeIndices, 2 );
        var grouped = [];
        for ( var i = 0; i < result.length; i += 3 ) {

            grouped.push( result.slice( i, i + 3 ) );

        }

        return grouped;

    };

</script>

three.js r.88

three.js：挤出带孔问题

1 个答案: