X3dom : 旋转一个圆柱体
X3dom : Rotate a cylinder
如何在 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 中生成的内容如下所示:
<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>
请指教
您可以使用变换节点并将其旋转 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)。
如何在 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 中生成的内容如下所示:
<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>
请指教
您可以使用变换节点并将其旋转 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)。