Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@vikas5914

vikas5914/gist:5c6381d20c7d62fbedd0

Last active August 29, 2015 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vikas5914/5c6381d20c7d62fbedd0 to your computer and use it in GitHub Desktop.
Save vikas5914/5c6381d20c7d62fbedd0 to your computer and use it in GitHub Desktop.
Download ZIP
decode version of originaldimension.com
Raw
gistfile1.html
<!DOCTYPE html>
<html><script src='threeloader/examples/vendor/three.js/build/three.js'></script><script src='threeloader/examples/vendor/three.js/examples/js/loaders/STLLoader.js'></script><script src='threeloader/examples/vendor/three.js/examples/js/loaders/ColladaLoader.js'></script><script src='threeloader/examples/vendor/three.js/examples/js/loaders/OBJLoader.js'></script><script src='threeloader/examples/vendor/three.js/examples/js/loaders/MTLLoader.js'></script><script src='threeloader/examples/vendor/three.js/examples/js/loaders/OBJMTLLoader.js'></script><script src='threeloader/examples/vendor/three.js/examples/js/loaders/BinaryLoader.js'></script><script src='threeloader/threex.universalloader.js'></script>
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cyborg/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css" rel="stylesheet" />
<link href="threeloader/menuplug/dist/tuxedo-menu.css" rel="stylesheet" />
<link href="threeloader/menuplug/demo/demo.css" rel="stylesheet" />
<link href="threeloader/examples/images/od_icon_new.png" rel="Icon" type="image/png" />
</head>
<body style="margin: 0px; background-color: #bbbbbb; overflow: hidden;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container"><!-- <img src="threeloader/examples/images/od_icon_new.png" width="3%" height="3%" > --><button class="navbar-toggle tuxedo-menu-trigger navbar-left" type="button"><img height="20px" src="threeloader/examples/images/od_icon_new.png" width="20px" /> <!-- <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
--></button><!-- <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
<!--<main class="container"> -->
<div class="row">
<div id="menu-container"><!-- <nav id="sidebar" class="tuxedo-menu" style="filter:alpha(opacity=100); opacity:1;" > -->
<nav class="tuxedo-menu" id="sidebar" style="background-color: rgba(0, 0, 0, 0.8)"><br />
<br />
&nbsp;
<ul>
<li><img height="100%" src="threeloader/examples/images/od_logo.png" width="100%" /></li>
</ul>
<!-- <ul>
<li>
<h1>Heading 1</h1>
</li>
<li><a href="#">Item 1</a></li>
<li>
<h1>Heading 2</h1>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a>
<ul>
<li><h1>Heading 2.2.1</h1></li>
<li><a href="#">Item 2.2.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li>
<h1>Heading 4</h1>
</li>
<li><a href="#">Item 4</a>
<ul>
<li>
<h1>Heading 4.1</h1>
</li>
<li><a href="#">Item 4.1</a></li>
</ul>
</li>
</ul>
--><br />
<br />
<br />
<br />
<br />
<style type="text/css">#contactus ui li
{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
</style>
<div id="contactus" style="height:100px;width:100px;">
<ul>
<li><img height="50%" src="threeloader/examples/images/contactus.png" width="50%" /></li>
<li>
<h5>Virtual Office under construction...</h5>
<h5></h5>
</li>
<li>Till the time</li>
<li>reach@originaldimension.com
<p></p>
</li>
</ul>
</div>
<!--<p style="font-size:200%"> reach@originaldimension.com
</p>--><br />
<br />
<br />
<br />
<br />
<br />
developed by <a href="https://twitter.com/frankyupd">funfrank</a></nav>
</div>
</div>
</div>
<!--</main> --><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="threeloader/menuplug/dist/tuxedo-menu.min.js"></script><script>
(function ($) {
var isFixed = true;
$('#sidebar').tuxedoMenu({isFixed: isFixed});
$('#toggle-is-fixed').on('click', function () {
$('#sidebar').tuxedoMenu({isFixed: isFixed = !isFixed});
$('#menu-container').toggleClass('col-sm-3');
$('.tuxedo-menu-trigger').toggleClass('hidden');
$(this).html(isFixed ? 'Drawer' : 'Sidebar');
});
})(jQuery);
</script><script>
/* <div id="overlaytext" style="position: absolute; top: 10px; left: 10px">
'F': Loop through the three texture filters (only for WebGL renderer)<br/>
'L': Toggle light (only for WebGL renderer)<br/>
'B': Toggle blending<br/>
Cursor left / right: Control y rotation speed<br/>
Cursor up / down: Control x rotation speed<br/>
Page up / down: Move along z axis<br/>
Renderer:
<img src = 'http://www.planet-aye.co.uk/seasonal05/snow.png'>
</div>
*/
var renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var onRenderFcts= [];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 0.22;
// camera.position.z = 1;
//////////////////////////////////////////////////////////////////////////////////
// set 3 point lighting //
//////////////////////////////////////////////////////////////////////////////////
;(function(){
// add a ambient light
var light = new THREE.AmbientLight( 0xffffff )
scene.add( light )
// add a light in front
var light = new THREE.DirectionalLight('white', 2)
light.position.set(0.5, -0.5, 1)
scene.add( light )
//add area light
var areaLight1 = new THREE.AreaLight( 0xff0000, 0.8 )
areaLight1.position.set(0,0,0 )
areaLight1.rotation.set( 1, 0,0)
areaLight1.width = 10
areaLight1.height = 10
scene.add( areaLight1 )
// add a light behind
var light = new THREE.DirectionalLight('white', 0.75)
light.position.set(-0.5, -0.5, -2)
scene.add( light )
//add spotlight
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 0, 1, 0);
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 0;
spotLight.shadowCameraFar = 100;
spotLight.shadowCameraFov = 50;
scene.add( spotLight )
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -2.5, 1, 0);
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 0;
spotLight.shadowCameraFar = 100;
spotLight.shadowCameraFov = 30;
scene.add( spotLight )
//add helper to visualize
/* var lighthelper = new DirectionalLightHelper(light, 10*10)
scene.add(lighthelper)
*/
})()
//////////////////////////////////////////////////////////////////////////////////
// Comment //
//////////////////////////////////////////////////////////////////////////////////
var urls = []
// var urls = 'models/stl/ascii/pr2_head_pan.stl'
// var urls = 'models/collada/monster/monster.dae'
// var urls = 'models/Suzanne.js'
// var urls = 'obj/tree/tree.js'
// var urls = 'obj/tree/tree.obj'
// var urls = 'obj/female02/female02.obj'
// var urls = ['obj/female02/female02.mtl', 'obj/female02/female02.obj']
// var urls = ['obj/female02/female02.obj', 'obj/female02/female02.mtl']
// var urls = ['obj/office/office_space.mtl', 'obj/office/office_space.obj']
// var urls = ['obj/office/office_space.obj', 'obj/office/office_space.mtl']
// var urls = ['AllFormat/office_t.obj', 'AllFormat/office_t.mtl']
var urls = ['threeloader/examples/AllFormat/officeV02.obj', 'threeloader/examples/AllFormat/officeV02.mtl']
// var urls = 'AllFormat/office_t.dae'
// var urls = 'obj/female02/Female02_slim.js'
var loader = new THREEx.UniversalLoader()
loader.load(urls, function(object3d){
// normalize the scale
var boundingBox = new THREE.Box3().setFromObject(object3d)
var size = boundingBox.size()
var scaleScalar = Math.max(size.x, Math.max(size.y, size.z))
object3d.scale.divideScalar(scaleScalar)
// normalize the position
var boundingBox = new THREE.Box3().setFromObject(object3d)
object3d.position.copy( boundingBox.center().negate() )
//helper bounding box
/* var bbox = new THREE.BoundingBoxHelper( object3d, 0xff0000 );
bbox.update();
scene.add( bbox )
*/
// add the object to the scene
scene.add(object3d)
})
//////////////////////////////////////////////////////////////////////////////////
// Camera Controls //
//////////////////////////////////////////////////////////////////////////////////
var mouse = {x : 0, y : 0}
document.addEventListener('mousemove', function(event){
mouse.x = (event.clientX / window.innerWidth ) -0.5;
mouse.y = (event.clientY / window.innerHeight) -0.5 ;
}, false)
onRenderFcts.push(function(delta, now){
camera.position.x += (mouse.x*0.5 - camera.position.x) * (delta*3)
camera.position.y += (mouse.y*0.1 - camera.position.y) * (delta)
// camera.position.z = 0.3;
camera.lookAt( scene.position )
})
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
onRenderFcts.push(function(){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner //
//////////////////////////////////////////////////////////////////////////////////
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
onRenderFcts.forEach(function(onRenderFct){
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
</script></nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment