2017-09-26 108 views
0

如何在x3dom中旋轉圓柱體?X3dom:旋轉圓柱體

但是,在API文檔中:API,只是如何創建垂直柱面。 如何製作水平滾筒?

這是代碼:

myCanvas.addCylinder({ 
    id: item.coil_no, 
    x:row, y: tier , z:(Math.abs(column)), 
    radius: 0.5, 
    height:1, 
    color:warna, 
    onclick:'ClickHandler(this)', 'data-description' : item.coil_no, 'data-lokasi' : item.lokasi_terakhir 
}); 

更新:

這是我的JS:

$.fn.addCylinder = function(oArg) { 
    this.find('scene').append($(drawCylinder(oArg))); 
}; 

這是drawCylinder是:

function drawCylinder (oArg) { 
    var oAttr = { 
     x:0, y:0, z:0, radius:.1, height:1, color:NODE_COLOR, 
     label:'', labeloffset: 0.1, 
     fontFamily:FONT_FAMILY, fontColor:FONT_COLOR, fontSize:FONT_SIZE 
    }; 
    $.extend(true, oAttr, oArg); 
    var label = (oAttr.label.length > 0) ? setLabel (oAttr) : ''; 
    var gObj = $('\ 
     <transform translation="' + oAttr.x + ' ' + oAttr.y + ' ' + oAttr.z + '">\ 
     <shape><appearance><material diffuseColor="'+hex2rgb(oAttr.color)+'"></material></appearance>\ 
     <Cylinder radius="'+oAttr.radius+' "height="'+oAttr.height+'"></Cylinder></shape>\ 
     </transform>'+label); 
    if (oAttr.id) { $(gObj).find('shape').attr("id", oAttr.id); } 
    if (oAttr.onclick) { $(gObj).find('shape').attr("onclick", oAttr.onclick); } 
    $.each(oAttr, function(key, value) { 
     if (key.match("^data-")) { $(gObj).find('shape').attr(key, value); } 
    }); 
    return gObj; 
} 

而在XML中生成了看上去l IKE在此:

<transform translation="1 1 1" render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" center="0,0,0" rotation="0,0,0,0" 
     scale="1,1,1" scaleorientation="0,0,0,0"> 
<shape id="DNA07X1A518081734A" onclick="ClickHandler(this)" data-description="DNA07X1A518081734A" data-lokasi="111" 
     render="true" bboxcenter="0,0,0" bboxsize="-1,-1,-1" ispickable="true"> 
    <appearance sorttype="auto" alphaclipthreshold="0.1"> 
     <material diffusecolor="1,0,1" ambientintensity="0.2" emissivecolor="0,0,0" shininess="0.2" 
        specularcolor="0,0,0"></material> 
    </appearance> 
    <cylinder radius="0.5 " height="1" solid="true" ccw="true" usegeocache="true" lit="true" bottom="true" 
       top="true" subdivision="32" side="true"></cylinder> 
</shape> 

請指教。

+0

scene3d是一個僅包含核心函數的通用jquery X3DOM包裝器。與任何其他API一樣,您可以根據自己需要的功能擴展它 - 包括旋轉函數。 –

回答

3

您可以使用變換節點並將其旋轉90度。因爲我不知道你的外部功能addCylinder和你的XML是什麼樣子呢,我剛纔添加的XML:

<x3d id="x3dElement" style="width:100%; height:100%; border:0" width="1355px" height="826px"> 
    <scene> 
     <transform rotation="1 0 0 -1.57"> 
      <transform rotation="0 0 1 1.57"> 
       <shape> 
        <appearance> 
         <material diffusecolor="0 1 1" ambientintensity="0.2" emissivecolor="0,0,0" shininess="0.2" specularcolor="0,0,0"></material> 
        </appearance> 
        <cylinder radius="1" height="2"></cylinder> 
       </shape> 
      </transform> 
     </transform> 
    </scene> 
</x3d> 

我已經旋轉氣缸的兩倍。圍繞X軸首先旋轉90度(PI/2),然後圍繞Z軸旋轉90度(PI/2)。

+0

請參閱我的更新 –

+0

您還需要什麼?我的回答清楚地表明,你是如何做到的。在變換節點中使用旋轉。先圍繞x軸旋轉,然後繞z軸旋轉。兩個90度(PI/2)。 – mistapink

+0

奧基,謝謝,完成。 –