DIR : /home/kozerus/public_html/pn/koh5_onj.html
/home/kozerus/public_html/pn
<!DOCTYPE html>
<html>
<head>
<title>HTML5 ObjViewer</title>
<h1> 30,000 Vertex Full Resolution Face Scan Example</h1>
<p>This may take a short while to load<br>Note: Texture renders a second or two after mesh is displayed.</p>
<STYLE type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/hover_drop_1.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#outer {width:490px; height:35px; position:absolute;}
.topline {width:490px; height:3px; border:1px solid #000; background:#cdc; font-size:1px;}
#menu {list-style-type:none; padding:0; margin:0 0 0 3px;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#cdc; margin:3px 3px 0 0; border:1px solid #000; width:123px; height:25px;}
#menu li.sub {background:#aba;}
/* for IE5.5 and IE6 only */
#menu li a {display:block; color:#000; height:25px; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:123px; text-decoration:none; text-align:center;}
#menu li a table {position:absolute; left:0; top:-1px; border-collapse:collapse; width:0; height:0;}
#menu :hover {color:#fff; position:relative;}
#menu :hover > a {color:#fff;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul ul.right {visibility:hidden; width:0; height:0; overflow:hidden;}
#menu :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:128px; left:-1px;top:26px; background:url(transparent.gif);}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {visibility:visible; overflow:visible; height:auto; width:128px; padding:9px 3px; left:100px; top:0;}
#menu :hover ul :hover ul.right,
#menu :hover ul :hover ul :hover ul.right {visibility:visible; overflow:visible; height:auto; width:128px; padding:9px 3px; left:-106px; top:0;}
</STYLE>
</head>
<body>
<center>
<table border="0" width="600">
<tr align="left">
<td>
<div style="width:600px; margin:auto; position:relative; font-size: 9pt; color: #777777; cursor: default;">
<canvas id="cv" width=640 height=480>
It seems you are using an outdated browser that does not support HTML5 canvas :-(
</canvas>
<div id="outer" style="top:0px;">
<div class="topline"></div>
<ul id="menu">
<li class="sub">
<a href="javascript:void(0);">Mesh Display</a>
<ul>
<li><a href="javascript:void(0);" onclick="changeRendermode('point');">Vertices</a></li>
<li><a href="javascript:void(0);" onclick="changeRendermode('wireframe');">WireFrame</a></li>
<li><a href="javascript:void(0);" onclick="changeRendermode('smooth');">Surface</a></li>
<li><a href="javascript:void(0);" onclick="changeRendermode('texturesmooth');">Texture</a></li>
</ul>
</li>
</ul>
</div>
<div id="tip" style="display:block; color:#ffffff; padding:5px; position:absolute; left:5px; top:430px; background-color:#000000; height:32px; width:240px; border-radius:5px; border:1px solid #777777; font-family:Arial,sans-serif; opacity:0.5;">
Drag mouse to rotate <br> Drag mouse with shift pressed to zoom
</div>
</div>
</tr>
</table>
</center>
<script type="text/javascript" src="jsc3d.js"></script>
<script type="text/javascript" src="jsc3d.touch.js"></script>
<script type="text/javascript" src="../jsc3d.webgl.js"></script>
<script type="text/javascript">
var viewer = new JSC3D.Viewer(document.getElementById('cv'));
viewer.setParameter('SceneUrl','Dave & Charlotte/77/desktop-001.obj');
viewer.setParameter('ModelColor', '#00FF00');
viewer.setParameter('InitRotationX', 0);
viewer.setParameter('InitRotationY', 0);
viewer.setParameter('InitRotationZ', 0);
viewer.setParameter('BackgroundColor1', '#FFFFFF');
viewer.setParameter('BackgroundColor2', '#FFFFFF');
viewer.setParameter('RenderMode', 'texture');
//viewer.setParameter('SphereMapUrl', 'Dave & Charlotte/77/desktop-001.obj');
viewer.setParameter('Renderer', 'webgl');
//var init_scene = viewer.getscene();
viewer.init();
viewer.update();
/**
* Change Mesh Rendermode definition.
*/
function changeRendermode(mode) {
var color = 0x0000ff;
var scene = viewer.getScene();
if(scene) {
var parts = scene.getChildren();
for(var i=0; i<parts.length; i++)
{
//if(parts[i].hasTexture() && parts[i].texture.srcUrl.indexOf('chrome.jpg') >= 0)
{ if (mode == "point" || mode == "wireframe")
{
// change diffuse color of the bodywork to the given one
color = 0x0000ff;
parts[i].setMaterial(new JSC3D.Material('', color, color, 0, true));
}
else if (mode == "smooth")
{
//else {
color = 0x3A3658;
parts[i].setMaterial(new JSC3D.Material('', color, color, 0, true));
}
else
{
color = 0xFFFFFF;
parts[i].setMaterial(new JSC3D.Material('', color, color, 0, true));
}
// enable environment mapping on car body
// enable environment mapping on the bodywork
parts[i].isEnvironmentCast = true;
}
}
}
//object = scene.getChildren();
//object.material.diffuseColor = #0000FF;
//object.material.simulateSpecular = true;
// object.material.generatePalette();
// enable environment mapping on car body
// object.isEnvironmentCast = true;
viewer.setRenderMode(mode);
viewer.update();
}
</script>
<hr>
For the low resolution model (which loads quicker but looks a little worse) click <a href = http://www.cs.cf.ac.uk/Dave/ObjViewer/ObjViewer2.html>here</a>.
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer