Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Shapes can be created and textured

  • Loading branch information...
commit ec911859f2758fbcf5b889fe2b9a08d62b531a19 1 parent 048a4a9
Matt authored
View
23 c3dl-dev/tests/shapes/shapes.html
@@ -10,26 +10,35 @@
<h1><a href="http://www.c3dl.org/">C3DL</a> Shape Test</h1>
<p>
-
- Box Test
+ Creating and testing shape class:
</p>
<table>
<tr>
<td>
- <canvas id="box" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
<div>Box</div>
+ <canvas id="box" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
</td>
<td>
- <canvas id="plane" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
<div>Plane</div>
+ <canvas id="plane" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
</td>
<td>
+ <div>Sphere</div>
<canvas id="sphere" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
- <div>Sphere</div>
</td>
<td>
- <canvas id="cplane" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
- <div>Custom Plane</div>
+ <div>Sphere (Low Detail)</div>
+ <canvas id="sphereDetail" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div>Custom Shape</div>
+ <canvas id="custom" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
+ </td>
+ <td>
+ <div>Custom Shape with Texture</div>
+ <canvas id="customWTexture" style="border: 2px solid blue" width="300" height="300"></canvas> <br />
</td>
</tr>
</table>
View
64 c3dl-dev/tests/shapes/shapes.js
@@ -1,7 +1,9 @@
c3dl.addMainCallBack(boxMain, "box");
c3dl.addMainCallBack(planeMain, "plane");
c3dl.addMainCallBack(sphereMain, "sphere");
-c3dl.addMainCallBack(custPlaneMain, "cplane");
+c3dl.addMainCallBack(sphere2Main, "sphereDetail");
+c3dl.addMainCallBack(customMain, "custom");
+c3dl.addMainCallBack(custom2Main, "customWTexture");
c3dl.addModel("sphere.dae");
function boxMain(canvasName){
scn = new c3dl.Scene();
@@ -16,7 +18,7 @@ function boxMain(canvasName){
box.setAngularVel([0.0, -0.001, 0.0]);
box.setTexture("testing.jpg");
var cam = new c3dl.FreeCamera();
- cam.setPosition([0.0, 0.0, 25.0]);
+ cam.setPosition([0.0, 0.0, 15.0]);
cam.setLookAtPoint([0.0, 0.0, 0.0]);
scn.addObjectToScene(box);
scn.setCamera(cam);
@@ -36,7 +38,7 @@ function planeMain(canvasName){
var plane = new c3dl.Plane(5,5);
plane.setTexture("testing.jpg");
var cam = new c3dl.FreeCamera();
- cam.setPosition([0.0, 3, 10]);
+ cam.setPosition([0.0, 3, 9]);
cam.setLookAtPoint([0.0, 0.0, 0.0]);
scn.addObjectToScene(plane);
scn.setCamera(cam);
@@ -56,7 +58,8 @@ function sphereMain(canvasName){
var sphere = new c3dl.Sphere(10);
sphere.setTexture("testing.jpg");
var cam = new c3dl.FreeCamera();
- cam.setPosition([0.0, 0, 25]);
+ cam.setPosition([0.0, 0, 20]);
+ sphere.setAngularVel([0.0, -0.001, 0.0]);
cam.setLookAtPoint([0.0, 0.0, 0.0]);
scn.addObjectToScene(sphere);
scn.setCamera(cam);
@@ -64,7 +67,7 @@ function sphereMain(canvasName){
}
}
-function custPlaneMain(canvasName){
+function sphere2Main(canvasName){
scn = new c3dl.Scene();
scn.setCanvasTag(canvasName);
renderer = new c3dl.WebGL();
@@ -73,11 +76,56 @@ function custPlaneMain(canvasName){
scn.init(canvasName);
if (renderer.isReady()) {
- var cplane = new c3dl.Plane();
+ var sphere = new c3dl.Sphere(10,5,5);
+ sphere.setTexture("testing.jpg");
+ var cam = new c3dl.FreeCamera();
+ cam.setPosition([0.0, 0, 20]);
+ sphere.setAngularVel([0.0, -0.001, 0.0]);
+ cam.setLookAtPoint([0.0, 0.0, 0.0]);
+ scn.addObjectToScene(sphere);
+ scn.setCamera(cam);
+ scn.startScene();
+ }
+}
+function customMain(canvasName){
+ scn = new c3dl.Scene();
+ scn.setCanvasTag(canvasName);
+ renderer = new c3dl.WebGL();
+ renderer.createRenderer(this);
+ scn.setRenderer(renderer);
+ scn.init(canvasName);
+
+ if (renderer.isReady()) {
+ var vert = [-5,0,-5,-5,0,5,0,0,2.5, -5,0,5,5,0,5,0,0,2.5, 5,0,5,0,10,0,0,0,2.5];
+ var norm = [0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0];
+ var customShape = new c3dl.CustomShape(vert,norm);
+ var cam = new c3dl.FreeCamera();
+ cam.setPosition([0.0, 25.0, 0.01]);
+ cam.setLookAtPoint([0.0, 0.0, 0.0]);
+ scn.addObjectToScene(customShape);
+ scn.setCamera(cam);
+ scn.startScene();
+ }
+}
+
+function custom2Main(canvasName){
+ scn = new c3dl.Scene();
+ scn.setCanvasTag(canvasName);
+ renderer = new c3dl.WebGL();
+ renderer.createRenderer(this);
+ scn.setRenderer(renderer);
+ scn.init(canvasName);
+
+ if (renderer.isReady()) {
+ var vert = [-5,0,-5,-5,0,5,0,0,0, 5,0,5,5,0,-5,0,0,0];
+ var norm = [0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0];
+ var text = [0,0,0,1,0.5,0.5,1,1,1,0,0.5,0.5];
+ var customShapeWithTexture = new c3dl.CustomShape(vert,norm,text);
+ customShapeWithTexture.setTexture("testing.jpg");
var cam = new c3dl.FreeCamera();
- cam.setPosition([0.0, 10.0, 1.0]);
+ cam.setPosition([0.0, 15.0, 0.01]);
cam.setLookAtPoint([0.0, 0.0, 0.0]);
- scn.addObjectToScene(cplane);
+ scn.addObjectToScene(customShapeWithTexture);
scn.setCamera(cam);
scn.startScene();
}
View
BIN  c3dl-dev/tests/shapes/testing.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  c3dl-dev/tests/shapes/testing2.jpg
Deleted file not rendered
View
2  c3dl/c3dapi.js
@@ -56,6 +56,7 @@ c3dl_require('math/vector.js');
c3dl_require('math/matrix.js');
c3dl_require('math/quaternion.js');
c3dl_require('matrixstack.js');
+
//cameras
c3dl_require('camera/camera.js');
c3dl_require('camera/freecamera.js');
@@ -79,6 +80,7 @@ c3dl_require('shapes/shape.js');
c3dl_require('shapes/box.js');
c3dl_require('shapes/plane.js');
c3dl_require('shapes/sphere.js');
+c3dl_require('shapes/custom.js');
//frustum culling
c3dl_require('frustum_culling/frustum.js');
View
10 c3dl/shapes/box.js
@@ -24,9 +24,13 @@ c3dl.Box = c3dl.inherit(c3dl.Shape, function () {
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0]);
var texCoords = new C3DL_FLOAT_ARRAY([
- 0,1,1,1,1,0,1,0,0,0,0,1,0,1,1,1,1,0,1,0,0,0,0,1,0,1,1,1,1,0,1,0,0,0,0,1,
- 0,1,1,1,1,0,1,0,0,0,0,1,0,1,1,1,1,0,1,0,0,0,0,1,0,1,1,1,1,0,1,0,0,0,0,1,
- 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
+ 0,0,0,1,1,1,1,1,1,0,0,0,
+ 0,-1,-1,-1,-1,0,-1,0,0,0,0,-1,
+ 0,-1,-1,-1,-1,0,-1,0,0,0,0,-1,
+ 0,0,0,-1,-1,-1,-1,-1,-1,0,0,0,
+ 0,1,1,1,1,0,1,0,0,0,0,1,
+ 0,0,0,-1,-1,-1,-1,-1,-1,0,0,0,
+ ]);
this.primitiveSets[0].init(vertices, normals, texCoords);
this.boundingVolume.init(vertices);
if (arguments.length == 3) {
View
25 c3dl/shapes/custom.js
@@ -0,0 +1,25 @@
+/*
+ Copyright (c) 2008 Seneca College
+ Licenced under the MIT License (http://www.c3dl.org/index.php/mit-license/)
+*/
+
+c3dl.CustomShape = c3dl.inherit(c3dl.Shape, function () {
+ c3dl._superc(this);
+ this.primitiveSets[0] = new c3dl.PrimitiveSet();
+ if (arguments.length >= 2) {
+ var vertices = new C3DL_FLOAT_ARRAY(arguments[0]);
+ var normals = new C3DL_FLOAT_ARRAY(arguments[1]);
+ this.primitiveSets[0].init(vertices, normals);
+ this.boundingVolume.init(vertices);
+ }
+ if (arguments.length >= 3) {
+ var vertices = new C3DL_FLOAT_ARRAY(arguments[0]);
+ var normals = new C3DL_FLOAT_ARRAY(arguments[1]);
+ var texCoords = new C3DL_FLOAT_ARRAY(arguments[2]);
+ this.primitiveSets[0].init(vertices, normals, texCoords);
+ this.boundingVolume.init(vertices);
+ }
+});
+
+
+
View
2  c3dl/shapes/plane.js
@@ -14,8 +14,6 @@ c3dl.Plane = c3dl.inherit(c3dl.Shape, function () {
if (arguments.length == 2) {
this.init(arguments[0],arguments[1])
}
- else if (arguments.length >= 3) {
- }
});
c3dl.Plane.prototype.init = function (length, width) {
View
6 c3dl/shapes/shape.js
@@ -7,9 +7,9 @@ c3dl.Shape = c3dl.inherit(c3dl.Primitive, function () {
c3dl._superc(this);
this.boundingVolume = new c3dl.BoundingVolume();
this.boundingVolume.centered = true;
- this.renderObb = true;
- this.renderAabb = true;
- this.renderBoundingSphere = true;
+ this.renderObb = false;
+ this.renderAabb = false;
+ this.renderBoundingSphere = false;
this.shape = new c3dl.Actor();
this.firstTimeRender = true;
this.primitiveSets = [];
View
157 c3dl/shapes/sphere.js
@@ -12,86 +12,105 @@ c3dl.Sphere = c3dl.inherit(c3dl.Shape, function () {
this.sinLUT[i] = Math.sin(i * (Math.PI / 180) * 0.5);
this.cosLUT[i] = Math.cos(i * (Math.PI / 180) * 0.5);
}
- this.sphereDetail(32,32);
+ if (arguments.length == 3) {
+ this.sphereDetail(arguments[1],arguments[2]);
+ }
+ else {
+ this.sphereDetail(32,32);
+ }
var sphereArray = [], texCoords = [];
var i;
for (i = 0; i < this.sphereDetailU; i++) {
- sphereArray.push(0);
- sphereArray.push(-1);
- sphereArray.push(0);
- sphereArray.push(this.sphereX[i]);
- sphereArray.push(this.sphereY[i]);
- sphereArray.push(this.sphereZ[i]);
- }
- sphereArray.push(0);
- sphereArray.push(-1);
- sphereArray.push(0);
- sphereArray.push(this.sphereX[0]);
- sphereArray.push(this.sphereY[0]);
- sphereArray.push(this.sphereZ[0]);
- var v1, v11, v2;
-
- // middle rings
- var voff = 0;
- for (i = 2; i < this.sphereDetailV; i++) {
- v1 = v11 = voff;
- voff += this.sphereDetailU;
- v2 = voff;
- for (var j = 0; j < this.sphereDetailU; j++) {
- sphereArray.push(parseFloat(this.sphereX[v1]));
- sphereArray.push(parseFloat(this.sphereY[v1]));
- sphereArray.push(parseFloat(this.sphereZ[v1++]));
- sphereArray.push(parseFloat(this.sphereX[v2]));
- sphereArray.push(parseFloat(this.sphereY[v2]));
- sphereArray.push(parseFloat(this.sphereZ[v2++]));
- }
- // close each ring
- v1 = v11;
- v2 = voff;
-
- sphereArray.push(parseFloat(this.sphereX[v1]));
- sphereArray.push(parseFloat(this.sphereY[v1]));
- sphereArray.push(parseFloat(this.sphereZ[v1]));
- sphereArray.push(parseFloat(this.sphereX[v2]));
- sphereArray.push(parseFloat(this.sphereY[v2]));
- sphereArray.push(parseFloat(this.sphereZ[v2]));
- }
- for (i = 0; i < this.sphereDetailV*2; i++) {
- for (var j = 0; j < this.sphereDetailU; j++) {
- texCoords.push(j/this.sphereDetailU);
- texCoords.push(i/(this.sphereDetailV*2));
- }
- texCoords.push(j/this.sphereDetailU);
- texCoords.push(i/(this.sphereDetailV*2));
- }
- // add the northern cap
- for (i = 0; i < this.sphereDetailU; i++) {
- v2 = voff + i;
-
- sphereArray.push(parseFloat(this.sphereX[v2]));
- sphereArray.push(parseFloat(this.sphereY[v2]));
- sphereArray.push(parseFloat(this.sphereZ[v2]));
- sphereArray.push(0);
- sphereArray.push(1);
- sphereArray.push(0);
- }
+ sphereArray.push(0);
+ sphereArray.push(-1);
+ sphereArray.push(0);
+ sphereArray.push(this.sphereX[i]);
+ sphereArray.push(this.sphereY[i]);
+ sphereArray.push(this.sphereZ[i]);
+ texCoords.push(0);
+ texCoords.push(1);
+ texCoords.push(this.sphereX[i]);
+ texCoords.push(-this.sphereY[i]);
+ }
+ sphereArray.push(0);
+ sphereArray.push(-1);
+ sphereArray.push(0);
+ sphereArray.push(this.sphereX[0]);
+ sphereArray.push(this.sphereY[0]);
+ sphereArray.push(this.sphereZ[0]);
+ texCoords.push(0);
+ texCoords.push(1);
+ texCoords.push(this.sphereX[0]);
+ texCoords.push(-this.sphereY[0]);
+ var v1, v11, v2;
+ // middle rings
+ var voff = 0;
+ var toff = 0;
+ for (i = 2; i < this.sphereDetailV; i++) {
+ v1 = v11 = voff;
+ voff += this.sphereDetailU;
+ v2 = voff;
+ for (var j = 0; j < this.sphereDetailU; j++) {
+ sphereArray.push(parseFloat(this.sphereX[v1]));
+ sphereArray.push(parseFloat(this.sphereY[v1]));
+ sphereArray.push(parseFloat(this.sphereZ[v1]));
+ sphereArray.push(parseFloat(this.sphereX[v2]));
+ sphereArray.push(parseFloat(this.sphereY[v2]));
+ sphereArray.push(parseFloat(this.sphereZ[v2]));
+ texCoords.push(this.sphereX[v1]);
+ texCoords.push(-this.sphereY[v1++]);
+ texCoords.push(this.sphereX[v2]);
+ texCoords.push(-this.sphereY[v2++]);
+ }
+ // close each ring
+ v1 = v11;
+ v2 = voff;
+ sphereArray.push(parseFloat(this.sphereX[v1]));
+ sphereArray.push(parseFloat(this.sphereY[v1]));
+ sphereArray.push(parseFloat(this.sphereZ[v1]));
+ sphereArray.push(parseFloat(this.sphereX[v2]));
+ sphereArray.push(parseFloat(this.sphereY[v2]));
+ sphereArray.push(parseFloat(this.sphereZ[v2]));
+ texCoords.push(this.sphereX[v1]);
+ texCoords.push(-this.sphereY[v1]);
+ texCoords.push(this.sphereX[v2]);
+ texCoords.push(-this.sphereY[v2]);
+ }
+ // add the northern cap
+ for (i = 0; i < this.sphereDetailU; i++) {
+ v2 = voff + i;
+ sphereArray.push(parseFloat(this.sphereX[v2]));
+ sphereArray.push(parseFloat(this.sphereY[v2]));
+ sphereArray.push(parseFloat(this.sphereZ[v2]));
+ sphereArray.push(0);
+ sphereArray.push(1);
+ sphereArray.push(0);
+ texCoords.push(this.sphereX[v2]);
+ texCoords.push(-this.sphereY[v2]);
+ texCoords.push(0);
+ texCoords.push(-1);
+ }
+ sphereArray.push(parseFloat(this.sphereX[voff]));
+ sphereArray.push(parseFloat(this.sphereY[voff]));
+ sphereArray.push(parseFloat(this.sphereZ[voff]));
+ sphereArray.push(0);
+ sphereArray.push(1);
+ sphereArray.push(0);
+ texCoords.push(this.sphereX[voff]);
+ texCoords.push(-this.sphereY[voff]);
+ texCoords.push(1);
+ texCoords.push(-1);
- sphereArray.push(parseFloat(this.sphereX[voff]));
- sphereArray.push(parseFloat(this.sphereY[voff]));
- sphereArray.push(parseFloat(this.sphereZ[voff]));
- sphereArray.push(0);
- sphereArray.push(1);
- sphereArray.push(0);
+
var vertices = new C3DL_FLOAT_ARRAY(sphereArray);
var normals = new C3DL_FLOAT_ARRAY(sphereArray);
texCoords = new C3DL_FLOAT_ARRAY(texCoords);
this.primitiveSets[0].init(vertices, normals, texCoords);
this.primitiveSets[0].sphere = true;
this.boundingVolume.init(vertices);
- if (arguments.length == 1) {
- this.init(arguments[0])
- }
+ this.scale([0.5,0.5,0.5]);
+ this.init(arguments[0])
});
c3dl.Sphere.prototype.init = function (raduis) {
Please sign in to comment.
Something went wrong with that request. Please try again.