2017-03-21 41 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例如