SVG-VML-3D脚本库介绍
2006-12-05 15:38
357 查看
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中使用曲面类
<html xmlns:v ="urn:schemas-microsoft-com:vml">
<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>
<script src="svgvml3d.js" LANGUAGE="JavaScript" TYPE="text/javascript"></script>
<script src="curvedSurface.js" LANGUAGE="JavaScript" TYPE="text/javascript"></script>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
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();
}
}
onload=Init;
</script>
</head>
<body bgcolor=#404040>
<input type="button" onClick="ZoomPicture(1)" value="[+]" title="zoom picture in" />
<input type="button" onClick="ZoomPicture(-1)" value="[-]" title="zoom picture out" />
<input type="button" onClick="Shift(-20,0)" value="◄" title="move picture left" />
<input type="button" onClick="Shift(0,-20)" value="▲" title="move picture up" />
<input type="button" onClick="Shift(0,20)" value="▼" title="move picture down" />
<input type="button" onClick="Shift(20,0)" value="►" title="move move picture right" />
<input type="button" onClick="ChangeLight(0,10)" value="←" title="rotate light to the left" />
<input type="button" onClick="ChangeLight(-10,0)" value="↑" title="move light up" />
<input type="button" onClick="ChangeLight(10,0)" value="↓" title="move light down" />
<input type="button" onClick="ChangeLight(0,-10)" value="→" title="rotate light to the right" />
<input type="button" onClick="ZoomViewer(1)" value="(+)" title="zoom viewer in" />
<input type="button" onClick="ZoomViewer(-1)" value="(-)" title="zoom viewer out" />
<input type="button" onClick="ChangeViewer(-10)" value="♂" title="move viewer position up" />
<input type="button" onClick="ChangeViewer(10)" value="♀" title="move viewer position down" />
<input type="button" id="StartStop" onClick="StartStop()" value="rotate" style="width:60" />
<table noborder bgcolor=#404040><tr><td>
<script language="JavaScript">
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游戏等并不适用。
相关文章推荐
- 关于JS页面动态绘图SVG,Canvas,VML介绍
- Ext扩展组件介绍之一--Ext.Drawing.Surface绘图组件(vml/svg)
- gml vml svg 三者的介绍(转)
- GML、SVG和VML介绍
- html矢量图 SVG VML 介绍
- 3DGS游戏引擎介绍和脚本教程
- shell脚本中的grep命令参数使用方法介绍(转载)
- bitbake的原理介绍, 使用方法, 编译脚本的编写方法
- 基于SVG的web页面图形绘制API介绍
- Powershell脚本的4种执行权限介绍
- 对象脚本语言BeanShell介绍
- Linux/Unix 脚本中 “set -e”的作用介绍
- 给大家详细介绍几个WIN7系统快捷键,详细3D窗口切换说明,很绚很方便!!!
- Unity 3D 动态创建对象,并渲染贴图,动态添加删除脚本
- 【Unity】Unity 3D坐标系介绍
- 3DGS脚本教程翻译(6)-按钮和滚动条
- Cocos2d-x 3.3 的3D开发功能介绍
- 3DGS脚本教程翻译(10)-动作
- Raphaël Raphael.js 中文帮助文档,SVG、VML、Javascript矢量库(Raphael Reference API)
- 3D 灯光介绍