Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

189 lines (158 sloc) 6.446 kB
<!DOCTYPE html>
<html>
<head>
<title>
CubicVR.js: CubicVR Three.js Mesh loader + vbo morphing test
</title>
<script src="../../CubicVR.js" type="text/javascript">
</script>
<script src="rome_fox_model.js" type="text/javascript">
</script>
<script type='text/javascript'>
function loadThreeMesh(model) {
var mesh = new CubicVR.Mesh();
var mat = new CubicVR.Material({morph:true,colorMap:true,specular:[0.1,0.1,0.1]});
mat.max_smooth = 80;
mesh.setFaceMaterial(mat);
mesh.addPoint(CubicVR.util.repackArray(model.vertices,3,model.vertices.length/3));
for (var i = 0, iMax=mesh.points.length; i<iMax; i++) { mesh.points[i] = CubicVR.vec3.multiply(mesh.points[i],1.0/100.0); }
var faces = CubicVR.util.repackArray(model.faces,8,model.faces.length/8);
for (var i = 0, iMax = faces.length; i<iMax; i++) {
var face = faces[i];
mesh.addFace([face[1],face[2],face[3]]);
}
if (model.morphColors)
{
if (model.morphColors[0]) {
var colors = CubicVR.util.repackArray(model.morphColors[0].colors,3,model.morphColors[0].colors.length/3);
for (var i = 0, iMax = colors.length; i<iMax; i++) {
mesh.faces[i].setColor(colors[i],0);
mesh.faces[i].setColor(colors[i],1);
mesh.faces[i].setColor(colors[i],2);
}
}
}
var srcNormals = {};
mesh.calcNormals(srcNormals);
// tolerance param allows the compiler to blend colors/verticies via proximity that might otherwise be split
var cmap = mesh.compileMap(0.2);
mesh.bindBuffer(mesh.bufferVBO(mesh.compileVBO(cmap)));
if (model.morphTargets) {
var normalMap = {};
for (var i = 0, iMax = model.morphTargets.length; i<iMax; i++) {
mesh.points = [];
mesh.addPoint(CubicVR.util.repackArray(model.morphTargets[i].vertices,3,model.morphTargets[i].vertices.length/3));
for (var j = 0, jMax = mesh.points.length; j<jMax; j++) { mesh.points[j] = CubicVR.vec3.multiply(mesh.points[j],1.0/100.0); }
if (i===0) { // calculate base normal smoothing sequence for this morph since original mesh is different
mesh.calcNormals(normalMap);
}
else { // if base already calculated, reuse the smoothing sequence for 1-1 match
mesh.recalcNormals(normalMap);
}
mesh.addMorphTarget(mesh.bufferVBO(mesh.compileVBO(cmap)));
}
}
return mesh;
}
function webGLStart() {
// by default generate a full screen canvas with automatic resize
var gl = CubicVR.init();
var canvas = CubicVR.getCanvas();
if (!gl) {
alert("Sorry, no WebGL support.");
return;
};
var threeModel = loadThreeMesh(rome_fox_model);
CubicVR.setSoftShadows(true);
// New scene with our canvas dimensions and default camera with FOV 70
var scene = new CubicVR.Scene({
camera: {
width: canvas.width,
height: canvas.height,
fov: 70,
position: [5, 5, 5],
target: [0, 2, 0]
},
light: {
type:"area",
intensity:0.9,
mapRes:1024, // 4096 ? 8192 ? ;)
areaCeiling:40,
areaFloor:-40,
distance: 20,
areaAxis: [-15,35] // specified in degrees east/west north/south
}
});
// SceneObject container for the mesh
var threeObject = new CubicVR.SceneObject({mesh: threeModel});
// Add SceneObject containing the mesh to the scene
scene.bind(threeObject);
// set initial camera position and target
CubicVR.setGlobalAmbient([0.3,0.3,0.3]);
gl.clearColor(135/255,206/255,250/255,1.0);
// initialize a mouse view controller
mvc = new CubicVR.MouseViewController(canvas, scene.camera);
// Add our scene to the window resize list
CubicVR.addResizeable(scene);
var morphSource = 0;
var morphTarget = 1;
threeObject.setMorphSource(morphSource);
threeObject.setMorphTarget(morphTarget);
var numFrames = threeObject.morphTargetCount();
var tps = 0.1;
var ftimer = 0;
var ground = new CubicVR.SceneObject({
mesh:{
primitive: {
type: "plane",
size: 1000.0,
material: {
color: [80/255, 200/255, 120/255],
specular:[0,0,0],
shininess: 0.9,
env_amount: 1.0,
textures: {
color: "../images/grass.jpg"
}
},
uv: {
projectionMode: "planar",
projectionAxis: "z",
scale: [10,10,10]
}
},
compile: true
},
rotation:[90,0,0],
shadowCast:false
});
scene.bind(ground);
// Start our main drawing loop, it provides a timer and the gl context as parameters
CubicVR.MainLoop(function(timer, gl) {
var lus = timer.getLastUpdateSeconds();
ftimer += lus;
if (ftimer > tps) {
while (ftimer > tps) ftimer -= tps;
morphSource++;
morphTarget++;
if (morphSource>numFrames-1) {
morphSource = 0;
}
if (morphTarget>numFrames-1) {
morphTarget = 0;
}
threeObject.setMorphSource(morphSource);
threeObject.setMorphTarget(morphTarget);
}
threeObject.setMorphWeight(ftimer/tps);
ground.position[2]-=15.0*lus;
while (ground.position[2]<-10.0) {
ground.position[2] += 10.0;
}
scene.render();
});
}
</script>
</head>
<body onLoad="webGLStart();"></body>
</html>
Jump to Line
Something went wrong with that request. Please try again.