Created
May 18, 2012 23:51
-
-
Save cjcliffe/2728215 to your computer and use it in GitHub Desktop.
Basic test with cube, light and no scene
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
| <html> | |
| <head> | |
| <title> | |
| CubicVR.js: Basic Textured Cube | |
| </title> | |
| <script src="../../CubicVR.js" type="text/javascript"> | |
| </script> | |
| <script type='text/javascript'> | |
| function webGLStart(gl,canvas) { | |
| // Create a camera, position at 1,1,1 and target at 0,0,0 | |
| var camera = new CubicVR.Camera({ | |
| width: canvas.width, | |
| height: canvas.height, | |
| position: [2,2,2], | |
| targeted: false | |
| }); | |
| camera.lookat([0,0,0]); | |
| // Create a material for the mesh | |
| var boxMaterial = new CubicVR.Material({ color: [0.9,0.1,0.3] }); | |
| var light = new CubicVR.Light({ | |
| type: "point", | |
| method: "dynamic", | |
| diffuse:[1,1,1], | |
| specular:[1,1,1], | |
| distance:10 | |
| }); | |
| // Add a box to mesh, size 1.0, apply material and UV parameters | |
| var boxMesh = new CubicVR.Mesh({ | |
| primitive: { | |
| type: "box", | |
| size: 1.0, | |
| material: boxMaterial, | |
| uvmapper: { | |
| projectionMode: "cubic", | |
| scale: [1, 1, 1] | |
| } | |
| }, | |
| compile: true | |
| }); | |
| // create a simple box to represent a point light | |
| var light_obj = new CubicVR.Mesh(); | |
| var lightMaterial = new CubicVR.Material({ color: light.diffuse }); | |
| var light_obj = new CubicVR.Mesh({ | |
| primitive: { | |
| type: "box", | |
| size: 0.15, | |
| material: lightMaterial | |
| }, | |
| compile: true | |
| }) | |
| // Add our camera to the window resize list | |
| CubicVR.addResizeable(camera); | |
| // Start our main drawing loop, it provides a timer and the gl context as parameters | |
| CubicVR.MainLoop(function(timer, gl) { | |
| var t = timer.getSeconds(); | |
| light.position = [Math.sin(t)*3,1,Math.cos(t)*3]; | |
| light.prepare(camera); | |
| // Render our object using the camera, pass identity matrix to represent no transform | |
| CubicVR.renderObject(boxMesh, camera, CubicVR.IdentityMatrix, [light]); | |
| var lightTransform = CubicVR.mat4.transform(light.position,[0,0,0],[1,1,1]); | |
| CubicVR.renderObject(light_obj, camera, lightTransform); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onLoad="CubicVR.start('auto',webGLStart);"></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
| <html> | |
| <head> | |
| <title> | |
| CubicVR.js: Basic Textured Cube | |
| </title> | |
| <script src="../../CubicVR.js" type="text/javascript"> | |
| </script> | |
| <script type='text/javascript'> | |
| function webGLStart(gl,canvas) { | |
| // Create a camera, position at 1,1,1 and target at 0,0,0 | |
| var camera = new CubicVR.Camera({ | |
| width: canvas.width, | |
| height: canvas.height, | |
| position: [2,2,2], | |
| targeted: false | |
| }); | |
| camera.lookat([0,0,0]); | |
| // Create a material for the mesh | |
| var boxMaterial = new CubicVR.Material({ color: [0.9,0.1,0.3] }); | |
| var light = new CubicVR.Light({ | |
| type: "point", | |
| method: "dynamic", | |
| diffuse:[1,1,1], | |
| specular:[1,1,1], | |
| distance:10, | |
| position: [0,0,0] | |
| }); | |
| // Add a box to mesh, size 1.0, apply material and UV parameters | |
| var boxMesh = new CubicVR.Mesh({ | |
| primitive: { | |
| type: "box", | |
| size: 1.0, | |
| material: boxMaterial, | |
| uvmapper: { | |
| projectionMode: "cubic", | |
| scale: [1, 1, 1] | |
| } | |
| }, | |
| compile: true | |
| }); | |
| // create a simple box to represent a point light | |
| var light_obj = new CubicVR.Mesh(); | |
| var lightMaterial = new CubicVR.Material({ color: light.diffuse }); | |
| var light_obj = new CubicVR.Mesh({ | |
| primitive: { | |
| type: "box", | |
| size: 0.15, | |
| material: lightMaterial | |
| }, | |
| compile: true | |
| }); | |
| // dummy parent for light transform | |
| var dummyParent = { tMatrix: null } | |
| light.setParent(dummyParent); | |
| // Add our camera to the window resize list | |
| CubicVR.addResizeable(camera); | |
| // Start our main drawing loop, it provides a timer and the gl context as parameters | |
| CubicVR.MainLoop(function(timer, gl) { | |
| var t = timer.getSeconds(); | |
| var lightPosition = [Math.sin(t)*3,1,Math.cos(t)*3]; | |
| var lightTransform = CubicVR.mat4.transform(lightPosition,[0,0,0],[1,1,1]); | |
| // assign new transform to dummy parent | |
| dummyParent.tMatrix = lightTransform; | |
| // prepare and apply any transforms, calculate lighting matrix and uniforms | |
| light.prepare(camera); | |
| // Render our object using the camera, pass identity matrix to represent no transform | |
| CubicVR.renderObject(boxMesh, camera, CubicVR.IdentityMatrix, [light]); | |
| // Render box representing light | |
| CubicVR.renderObject(light_obj, camera, lightTransform); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onLoad="CubicVR.start('auto',webGLStart);"></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment