Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
162 lines (134 sloc) 4.86 KB
<!DOCTYPE html>
<html>
<head>
<title>
CubicVR.js: Example of AREA light type
</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: 40,
transform: {
rotation: [-90,0,0]
},
material: {
textures: {
color: "../images/6583-diffuse.jpg",
}
},
uv: {
projectionMode: "cubic",
scale: [1, 1, 1]
}
},
compile: true
});
// 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: 150.0,
position: [6, 6, 6],
target: [0, 0, 0]
},
sceneObject: {
name: "floor",
mesh:floorMesh,
position: [0,-2,0]
}
});
var boxObject = [];
// SceneObject container for the box mesh
for (var i = 0; i < 64; i ++) {
boxObject[i] = new CubicVR.SceneObject({
name: "box_"+i,
mesh: boxMesh,
position: [(Math.random()-0.5)*15.0,(Math.random())*6.0-1.0,(Math.random()-0.5)*15.0]
});
scene.bind(boxObject[i]);
}
// Create a shadowed area light, map resolution 2048
// designed for shadowing larger areas than spotlights can provide
// it represents a directional light with shadows.
var light = new CubicVR.Light({
type: "area",
intensity: 0.9,
mapRes: 2048, // 4096 ? 8192 ? ;)
areaCeiling: 40,
areaFloor: -40,
areaAxis: [25,5] // specified in degrees east/west north/south
});
CubicVR.setSoftShadows(true);
// bind the lights to the scene
scene.bind(light);
// disable the global ambient by setting to 0's
CubicVR.setGlobalAmbient([0.3,0.3,0.3]);
// Add our scene to the automatic resize feature
CubicVR.addResizeable(scene);
// depth buffer preview
// var layout = new CubicVR.Layout({width:canvas.width, height:canvas.height});
// var depthView = new CubicVR.View({x:canvas.width-512,width:512,height:512,texture:light.shadowMapTex.texture});
// layout.addSubview(depthView);
// Start our main drawing loop, it provides a timer and the gl context as parameters
CubicVR.MainLoop(function(timer, gl) {
var seconds = timer.getSeconds();
for (var i = 0; i < boxObject.length; i++) {
boxObject[i].rotation = [5*i+seconds*60,0,5*i+seconds*50];
}
// render our scene
scene.render();
// depth buffer preview
// layout.render();
});
// initialize a mouse view controller
mvc = new CubicVR.MouseViewController(canvas, scene.camera);
}
</script>
</head>
<body onLoad="webGLStart();"></body>
</html>
Something went wrong with that request. Please try again.