Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (128 sloc) 4.66 KB
<!DOCTYPE html>
<html>
<head>
<title>
CubicVR.js: Test of 4 shadowed spotlights with alpha map transparency
</title>
<script src="../../CubicVR.js" type="text/javascript">
</script>
<script type='text/javascript'>
function webGLStart() {
// generate a default canvas, fit to full browser size with automatic resize
var gl = CubicVR.init();
var canvas = CubicVR.getCanvas();
if (!gl) {
alert("Sorry, no WebGL support.");
return;
};
// Create a material for the mesh
var boxPrimitive = {
primitive: {
type: "box",
size: 1.0,
material: {
textures: {
color: "../images/crate.jpg",
alpha: "../images/crate-alpha.jpg",
}
},
uvmapper: {
projectionMode: "cubic",
scale: [1, 1, 1]
}
}
};
// create an outer box mesh for the outside faces
var boxMeshOuter = new CubicVR.Mesh(boxPrimitive);
// create an inner box mesh for the inside faces
var boxMeshInner = new CubicVR.Mesh(boxPrimitive);
// flip the inner mesh faces so they face inwards
boxMeshInner.flipFaces();
// Create a new target mesh
var boxMesh = new CubicVR.Mesh();
// Add our inner and outer mesh to the target mesh
boxMesh.booleanAdd(boxMeshOuter);
boxMesh.booleanAdd(boxMeshInner);
// triangulate and buffer object to GPU, remove unused data
boxMesh.prepare();
// Create a floor, rotate it so it's facing the right way
var floorMesh = new CubicVR.Mesh({
primitive: {
type: "plane",
size: 20,
transform: {
rotation: [-90,0,0]
},
material: {
textures: {
color: "../images/2282-diffuse.jpg",
}
},
uv: {
projectionMode: "cubic",
scale: [1, 1, 1]
}
},
compile: true
});
// definition for the 4 shadowed spotlights, map resolution 1024, distance (far clip): 200, intensity 0.6, cutoff angle 25
var spotLightShadowed = {
type: "spot_shadow",
intensity: 0.6,
distance: 200,
map_res: 1024,
cutoff: 25
};
// New scene with our canvas dimensions and default camera with FOV 80
var scene = new CubicVR.Scene({
camera: {
width: canvas.width,
height: canvas.height,
fov: 80,
near: 0.1,
far: 50.0,
position: [2, 2, 2],
target: [0, 0, 0]
},
lights: [
spotLightShadowed,
spotLightShadowed,
spotLightShadowed,
spotLightShadowed
],
sceneObject: {
mesh:floorMesh,
position:[0,-2,0]
}
});
// SceneObject container for the box mesh
var boxObject = new CubicVR.SceneObject(boxMesh);
// disable the global ambient by setting to 0's
CubicVR.setGlobalAmbient([0,0,0]);
// Add SceneObject containing the mesh to the scene
scene.bind(boxObject);
// Add our scene to the automatic resize feature
CubicVR.addResizeable(scene);
// Start our main drawing loop, it provides a timer and the gl context as parameters
CubicVR.MainLoop(function(timer, gl) {
var seconds = timer.getSeconds();
// Give the spotlights some movement
scene.lights[0].position = [8.0*Math.sin(seconds/2),10,8.0*Math.cos(1.5*seconds/2)];
scene.lights[1].position = [10.0*Math.sin(seconds/2),10,-10.0*Math.cos(1.9*seconds/2)];
scene.lights[2].position = [12.0*Math.sin(1.5*seconds/2),10,12.0*Math.cos(seconds/2)];
scene.lights[3].position = [-4.0*Math.sin(1.9*seconds/2),10,4.0*Math.cos(seconds/2)];
// target the spotlights to set their direction
for (var i = 0; i < 4; i++) {
scene.lights[i].lookat([0,0,0]);
};
boxObject.rotation = [seconds*60,0,seconds*50];
// render our scene
scene.render();
});
// initialize a mouse view controller
mvc = new CubicVR.MouseViewController(canvas, scene.camera);
}
</script>
</head>
<body onLoad="webGLStart();"></body>
</html>