三形中的U形磁铁几何形状

Question

我想创建一个＆＃34; U＆＃34;塑料磁铁在three.js。那么我可以使用TubeGeometry吗？

因此，如果这是用于创建3D sin曲线的代码。我怎样才能成为＆＃34; U＆＃34;形磁铁？

    var CustomSinCurve = THREE.Curve.create(

        function ( scale ) { //custom curve constructor

        this.scale = ( scale === undefined ) ? 1 : scale;

                       },

        function ( t ) { //getPoint: t is between 0-1

        var tx = t * 3 - 1.5;
        var ty = Math.sin( 2 * Math.PI * t );
        var tz = 0;

        return new THREE.Vector3( tx, ty, tz ).multiplyScalar(this.scale);

       }

   );

       var path = new CustomSinCurve( 10 );
       var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
       var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
       var mesh = new THREE.Mesh( geometry, material );
       scene.add( mesh );

Answer 1

如果磁铁轮廓的形状不重要（矩形而不是圆形），那么您可以使用THREE.ExtrudeGeometry()：

var path = new THREE.Shape(); // create a U-shape with its parts
path.moveTo(-1, 1);
path.absarc(0, 0, 1, Math.PI, Math.PI * 2);
path.lineTo(1, 1);
path.lineTo(.8, 1);
path.absarc(0, 0, .8, Math.PI * 2, Math.PI, true);
path.lineTo(-.8,1);
path.lineTo(-1, 1);

var extOpt = { // options of extrusion
    curveSegments: 15,
    steps: 1,
    amount: .2,
    bevelEnabled: false
}

var uGeom = new THREE.ExtrudeGeometry(path, extOpt); // create a geometry
uGeom.center(); // center the geometry
var average = new THREE.Vector3(); // this variable for re-use
uGeom.faces.forEach(function(face){
  average.addVectors(uGeom.vertices[face.a], uGeom.vertices[face.b]).add(uGeom.vertices[face.c]).divideScalar(3); // find the average vector of a face
  face.color.setHex(average.x > 0 ? 0xFF0000 : 0x0000FF); // set color of faces, depends on x-coortinate of the average vector
});

var uMat = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors }); // we'll use face colors

var u = new THREE.Mesh(uGeom, uMat);
scene.add(u);

jsfiddle示例