如何使圆弧角外出而不是 Three.js 形状

Question

如何使 Three.js 形状的所有三个角（使用 shape.absarc 创建）都向外而不是向内？

    // Shape
    var radius = 10;
    var material = new THREE.MeshNormalMaterial();

    pt1 = new THREE.Vector3(40, 50, 0);
    pt2 = new THREE.Vector3(-40, 0, 0);
    pt3 = new THREE.Vector3(30, -20, 0);

    p = pt3.clone().sub(pt1);
    a1 = Math.atan2(p.y, p.x) + Math.PI / 2;

    p = pt2.clone().sub(pt1);
    a2 = Math.atan2(p.y, p.x) - Math.PI / 2;

    p = pt1.clone().sub(pt2);
    a3 = Math.atan2(p.y, p.x) + Math.PI / 2;

    p = pt3.clone().sub(pt2);
    a4 = Math.atan2(p.y, p.x) - Math.PI / 2;

    shape = new THREE.Shape();
    shape.absarc(pt1.x, pt1.y, radius, a1, a2, true);

    shape.absarc(pt2.x, pt2.y, radius, a3, a4, true);

    shape.absarc(pt3.x, pt3.y, radius, a4, a1, true);

    var geometry = shape.extrude({
        amount: 10,
        bevelEnabled: false
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 0;

    scene.add(mesh);

一个角 'out'，但两个角 'in'。怎么把所有的角都凸出来？

Answer 1

这是一种从路径创建挤压形状的方法。

var path = new THREE.Path();

path.absarc( pt1.x, pt1.y, radius, a1, a2, false );

path.absarc( pt2.x, pt2.y, radius, a3, a4, false );

path.absarc( pt3.x, pt3.y, radius, a4, a1, false );

var points = path.getSpacedPoints( 100 );

var shape = new THREE.Shape( points );

var geometry = new THREE.ExtrudeGeometry( shape, {
    amount: 10,
    bevelEnabled: false
} );

var mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
scene.add( mesh );

http://jsfiddle.net/v7v4fu2v/35/

three.js r.87

如何使圆弧角外出而不是 Three.js 形状

How to make the arc corners go out not in with a Three.js Shape

javascript

shapes

three.js