Surface

Surfaces sind Abbildungen von R x R |--> R X R x R,
WebDrawing3d verwendet als Prameterraum stets [0,1], womit Surfaces beschränkt sind auf Abbildungen
f: [0, 1] X [0, 1] |--> R X R X R.

Parameterraum (Parameter u und v )	Bildraumraum ( Koordinaten x, y, z)

Es gibt folgende Surfaces

BezierSurface
Torus
Cone
Extruder
NurbsSurface
PolyCurveExtruder
Sphere

Gezeichnet werd ein Surface S durch S.Paint(WebDevice);

BezierSurface

Besitzt eine Listofxyzarray von 4X4 Kontrollpunkten (ControlPoints). Die Punkte ControlPoints[0,0],ControlPoints[0,3],ControlPoints[3,0],ControlPoints[3,3] sind die Eckpunkte der Bezierfläche, die anderen Kontrollpunkte bestimmen für den Anstieg.
Beispiel einer Bezierfläche in WebGL:
Programmierung z.B.:

C1= new xyzarray();
      C1.add(new xyz(0,6,0));
      C1.add(new xyz(2,6,2));
      C1.add(new xyz(4,6,2));
      C1.add(new xyz(6,6,0));
 C.add(C1);

B.ControlPoints= C;
WebDevice.Material= Material.Chrome;
WebDevice.Paint = draw;
 WebDevice.Refresh();
 function draw() {
B.Paint(WebDevice);

}
 </script>
 </body>
 </html>

Dies schaut so aus (mit Kontrollpunkten):

Torus

Besitzt einen InnerRadius und einen OuterRadius.
Beispiel von einem Torus in WebGL:
Programmierung Es genügt z.B.:

Dies schaut so aus :

Cone

Besitzt die Felder
xyz Center
float Radius
float Height
float HalfAngle
Ist der Halfangle kleiner als Height, so entsteht ein Kegelstumpf, ist er größer so gibt es einen Doppelkegel.
Beispiel einem Conus in WebGL:
Verwendung:

Extruder

Extrudiert einen xyarray um eine bestimmte Höhe. Er besitzt die folgenden Felder:
Array und
Height.
Z.B.:

PolyCurveExtruder

Extrudiert eine Loca um eine bestimmte Höhe.
Besitzt die Felder
Loca PolyCurves
float Height
Programmierung z.B.:

<html>
  <body>
  <canvas id="myCanvas" width="600" height="400">
 Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script src="bridge.js"></script>
  <script src="WebDrawing3d.js"></script>
  <script src="Classes.js"></script>
  <script>   // das HTML Element vom canvas anfordern.
 var canvas = document.getElementById("myCanvas");
 var WebDevice = new Device(canvas);
WebDevice.BackGround=Color.WhiteSmoke;
var Curves = new CurveArray();
var B = new Bezier()
var CP= new xyzarray();
CP.add(new xyz(4,1));
CP.add(new xyz(3,5));
CP.add(new xyz(0,2));
CP.add(new xyz(-3,0));
B.ControlPoints= CP;
var L = new Line(); 
L.A= new xy(3,5);
L.B= new xy(4,1);
var QS = new qSpline();
 QS.A = new xy(-3,8);
 QS.B= new xy(3,5);
QS.Controlpoint= new xy(1,10);
var SI = new SplineInterpolation();
var IP= new xyarray();
IP.add(new xy(-3,0));
IP.add(new xy(-5,2));
IP.add(new xy(-8,4));
IP.add(new xy(-6,6));
IP.add(new xy(-3,8));
var PC= new Loca();
var CI = new Circle();
 CI.aRadius= 2;
 CI.bRadius= 1;
 CI.Center= new xy(-3,4)
SI.InterpolationPoints=IP; 
var CA1 = new CurveArray();
CA1.add(SI);
CA1.add(QS);
CA1.add(L);
CA1.add(B);
var CA2 = new CurveArray();
CA2.add(CI);
PC.add(CA1);
PC.add(CA2);
var E = new PolyCurveExtruder();
E.PolyCurves = PC;
E.Height = 4;
    WebDevice.Paint = draw;
 WebDevice.Refresh();
 function draw() {
E.Paint(WebDevice);
 }
 </script>
 </body>
 </html>

NurbsSurface

Die wichtigste Eigenschaft sind die ControlPoints. Sie sind vom Typ Listofxyzarray.
Weiters besitzt es
1. Degree : der Grad der Nurbs.
2. UKnots und VKnots: Sie sind arrays vom typ float.
Sie können direkt oder mit SetDefaultKnots() gesetzt werden. Bei SetDefaultKnots() werden die Hälfte der ControlPointCount + Degree + 1 Knoten auf 0 die andere Hälfte auf 1 gesetzt. 3. Weights: Sie sind vom Typ float[,]. Zu jedem ControlPoint ist ein Gewicht festgelegt, das die Attraktivität des Kontrollpunktes festlegt. Default ist 1. Ein großer Wert zieht die Fläche zum Kontrollpunkt.

Beispiel von einer Nurbsfläche in WebGL:
Programmierung z.B.:

<html>
  <body>
  <canvas id="myCanvas" width="600" height="400">
 Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script src="bridge.js"></script>
  <script src="WebDrawing3d.js"></script>
  <script src="Classes.js"></script>
  <script>   // das HTML Element vom canvas anfordern.
 var canvas = document.getElementById("myCanvas");
 var WebDevice = new Device(canvas);
WebDevice.BackGround=Color.WhiteSmoke;
var N = new NurbsSurface();
var _ControlPoints = new Listofxyzarray(); C1= new xyzarray();
C1.add(new xyz(-5,-5,0));
C1.add(new xyz(-3,-5,1));
C1.add(new xyz(-1,-5,1));
C1.add(new xyz(2,-5,0));
var C2= new xyzarray();
C2.add(new xyz(-5,-4,1));
C2.add(new xyz(-2,-4,2));
C2.add(new xyz(0,-3,2));
C2.add(new xyz(3,-3,1));
var C3= new xyzarray();
C3.add(new xyz(-4,-1,2));
C3.add(new xyz(-1,-1,2));
C3.add(new xyz(1,0,2));
C3.add(new xyz(4,-1,3));
var C4= new xyzarray();
C4.add(new xyz(-4,2,0));
C4.add(new xyz(-2,2,1));
C4.add(new xyz(1,3,1));
C4.add(new xyz(3,4,0));
_ControlPoints.add(C1);
_ControlPoints.add(C2);
_ControlPoints.add(C3);
_ControlPoints.add(C4);
N.ControlPoints=_ControlPoints;
N.SetDefaultKnots();
WebDevice.Paint = draw;
 WebDevice.Refresh();
 function draw() {
 N.Paint(WebDevice);
 }
 </script>
 </body>
 </html>

Dies sieht so aus ( mit Kontrollpunkten):