2017-03-21 39 views
0

我想在three.js中创建一个“U”形磁体。那么我可以使用TubeGeometry吗?three.js中的U形磁体几何形状

因此,如果这是用于创建3D罪曲线的代码。我怎样才能使它成为“U”形磁铁?

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); 
+0

这听起来像请求自由职业者的工作...... – dash2

+0

我不明白你在说什么? – Naren

+0

我的意思是这个问题没有简单的答案。唯一的答案是有人为你做所有的工作。 – dash2

回答

3

如果磁铁的轮廓的形状并不重要(矩形而不是圆),那么你可以使用THREE.ExtrudeGeometry()

enter image description here

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例如