SVG-VML-3D脚本库介绍

最新推荐文章于 2024-05-16 10:03:02 发布

firefight

最新推荐文章于 2024-05-16 10:03:02 发布

阅读量5.8k

点赞数

文章标签：脚本 button input object function javascript

本文链接：https://blog.csdn.net/firefight/article/details/1430968

版权

SVG-VML-3D是德国人Lutz Tautenhahn编写的一个免费的JAVASCRIPT脚本库，该脚本可以根据浏览器的种类不同，自动选择SVG或VML，将3D物体在浏览器上显示。在IE中使用VML，其它浏览器使用SVG。其切换技术基本同“自动选择SVG和VML的WEB页面”。脚本库的下载地址在 http://www.lutanho.net/index.html。

脚本支持3D物体显示，缩放，旋转，以及简单的光照处理和鼠标事件交互。

脚本库的核心文件为svgvml3d.js，其中定义了几个重要的类，包括Scene3D和Poly3D类，另外还有Box3D，CoordSys，Line和 Vector类。

Scene3D类定义了一个3D的画布，所有的3D物体必须在Scene3D上显示。

Poly3D类为所有3D类的基类，实际上是一个基于顶点的3D平面。每个3D物体都是由多个Poly3D对象合围而成，因此在绘制自己的3D物体时，应先将其分解为多个3D平面并确定其顶点坐标集合。对于曲面则必须采用平面拼接的方法实现。

CoordSys为坐标视图类，可以用于坐标变换。

BoundingBox是另外一个绘制图表时常用的类，用于生成半开的，带有单位刻度的3D空间。

用户可以根据自己的需要，从基础类中派生自己3D类，例如在platonic.js，colorbox3d.js以及torus.js中演示的几种3D物体。

在脚本库中带有一个简单的例子和使用到的数学知识说明，以及各种类的属性和方法介绍。

在这里演示一个SIN函数曲面的例子。

1，取得3D物体的几何特性

SIN函数曲面的特性为 y=sin(x)

曲面宽度为固定值，在Z轴方向 z=w

2，使用简单的矩形模拟曲面，采样周期为一个角度值，例如1度。由此建立的曲面类为：

function CurvedSurface(aParentScene, aFrontColor, aBackColor, aStrokeColor, aStrokeWeight, beginAngle, endAngle, step, cw)

{ this.Parent=aParentScene;

this.ClassName="CurvedSurface";

this.Center=new Vector(0,0,0);

this.FrontColor=aFrontColor;

this.BackColor=aBackColor;

this.StrokeColor=aStrokeColor;

this.StrokeWeight=aStrokeWeight;

this.Zoom=_Object3DZoom;

this.Shift=_Object3DShift;

this.SetFrontColor=_Object3DSetFrontColor;

this.SetBackColor=_Object3DSetBackColor;

this.SetStrokeColor=_Object3DSetStrokeColor;

this.SetStrokeWeight=_Object3DSetStrokeWeight;

this.SetVisibility=_Object3DSetVisibility;

this.RotateX=_Object3DRotateX;

this.RotateY=_Object3DRotateY;

this.RotateZ=_Object3DRotateZ;

this.Poly3D=new Array();

var x, y, z;

var s = 0;

for (var angle = beginAngle; angle<endAngle; angle = angle + step)

{ this.Poly3D[s]=new Poly3D(aParentScene, aFrontColor, aBackColor, aStrokeColor, aStrokeWeight);

x = (angle / 180) * Math.PI;

y = Math.sin(x);

z = 0;

this.Poly3D[s].AddPoint(Math.round(x*50),Math.round(y*50),z);

this.Poly3D[s].AddPoint(Math.round(x*50),Math.round(y*50),z+cw);

x = ( (angle + step) / 180) * Math.PI;

y = Math.sin(x);

z = 0;

this.Poly3D[s].AddPoint(Math.round(x*50),Math.round(y*50),z+cw);

this.Poly3D[s].AddPoint(Math.round(x*50),Math.round(y*50),z);

//alert(x+","+y+","+z);

this.Poly3D[s].Update();

s++;

}

其中

beginAngle 曲面开始角度

endAngle 曲面结束角度

step 采样角度

cw 曲面宽度

3，在HTML中使用曲面类

<head>

<title>SVG-VML-3D-Example - Torus</title>

<style>

v/:* { behavior: url(#default#VML); }

input { background-color:#cc8800; width:28; height:28; font-size:14pt; }

</style>

var cs;

//useSVG=true;//you can also change this by hand

function Init()

{ if (useSVG)

{ if (! SVGObjects[0])

{ setTimeout("Init()",100);

return;

}

S=new Scene3D(SVGObjects[0],0,500,500);

}

else S=new Scene3D(document.getElementById("Scene1"),1);

cs=new CurvedSurface(S, "#cc8800", "#cc8800", "#cc8800", 0, 0, 360, 10, 20);

cs.Shift(0,2,0);

S.AutoCenter();

S.Center.Zoom(0.0);

S.ZoomAll*=1.4;

S.ChangeViewer(-15,0);

S.ChangeLight(-20,-30);

S.Sort();

S.Draw();

}

function Rotate()

{ if (! isRotating) return;

cs.RotateZ(10,1);

S.ChangeViewer(0,-5);

S.ChangeLight(0,-5);

S.Sort();

S.Draw();

setTimeout("Rotate()",100);

}

function ChangeViewer(vv)

{ S.ChangeViewer(vv, 0);

if (! isRotating)

{ S.Sort();

S.Draw();

}

function ChangeLight(ttheta, ffi)

{ S.ChangeLight(ttheta, ffi);

if (! isRotating) S.Draw();

}

var viewerzoomed=0;

function ZoomViewer(vv)

{ if ((viewerzoomed+vv>5)||(viewerzoomed+vv<-5)) return;

viewerzoomed+=vv;

if (vv>0) S.Dist*=0.8;

else S.Dist/=0.8;

if (! isRotating)

{ S.Sort();

S.Draw();

}

function Shift(hh, vv)

{ S.XM+=hh;

S.YM+=vv;

if (! isRotating) S.Draw();

}

var picturezoomed=0;

function ZoomPicture(vv)

{ if ((picturezoomed+vv>5)||(picturezoomed+vv<-5)) return;

picturezoomed+=vv;

if (vv>0) S.ZoomAll*=1.1;

else S.ZoomAll/=1.1;

if (! isRotating) S.Draw();

}

var isRotating=false;

function StartStop()

{ if (isRotating)

{ isRotating=false;

document.getElementById("StartStop").value="rotate";

}

else

{ isRotating=true;

document.getElementById("StartStop").value="stop";

Rotate();

}

οnlοad=Init;

</script>

</head>

if (useSVG) document.writeln("<embed width='500' height='500' name='Scene1' src='scene.svg' wmode='transparent' type='image/svg+xml' />");

else document.writeln("<div id='Scene1' style='position: relative; width:500; height:500; overflow: hidden;'></div>");

</script>

</td></tr></table>

</body>

</html>

显示的效果如下：

此脚本可用于基于WEB的3D报表，3D矢量图形包括各种几何形状的演示等应用，实现比较简单，效果还可以，但对速度，真实度要求比较高的3D游戏等并不适用。

firefight

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫