Created
May 10, 2018 08:11
-
-
Save TechnoOscuro/25affb2efd63916289c9fbc354ed12c7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.1.0.js"></script> | |
<!-- Latest compiled and minified CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
<!-- jQuery library --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<!-- Latest compiled JavaScript --> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
<script> | |
</script> | |
<body> | |
<!-- Insert an empty iframe --> | |
<iframe src="" id="iframe" | |
width="1080" height="720" allowtransparency="false" allowvr="" allowfullscreen="" mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""> | |
</iframe> | |
<!--MENU--> | |
<div class="container"> | |
<div id="elmenu" class="btn-group"> | |
<button type="button" class="btn btn-ttc" data-toggle="dropdown"> | |
Reja <span class="caret"></span></button> | |
<ul class="dropdown-menu" role="menu"> | |
<button class="secundarios" id="R1"><img src="https://i.imgur.com/rxwVStQ.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="R2"><img src="https://i.imgur.com/pNmbRna.png" width="50px" height="50px" ></img></button> | |
</ul> | |
<div id="elmenu" class="btn-group"> | |
<button type="button" class="btn btn-ttc" data-toggle="dropdown"> | |
Adornos arriba <span class="caret"></span></button> | |
<ul class="dropdown-menu" role="menu"> | |
<button class="secundarios" id="AAR1"><img src="https://i.imgur.com/3ij52Qo.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AAR2"><img src="https://i.imgur.com/ABHPWKx.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AARN"><img src="https://i.imgur.com/Wz2YimL.png" width="50px" height="50px" ></img></button> | |
</ul> | |
<div id="elmenu" class="btn-group"> | |
<button type="button" class="btn btn-ttc" data-toggle="dropdown"> | |
Adornos medio <span class="caret"></span></button> | |
<ul class="dropdown-menu" role="menu"> | |
<button class="secundarios" id="SIN"><img src="https://i.imgur.com/rF60Iar.jpg" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AM"><img src="https://i.imgur.com/9Kzit2d.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AMC"><img src="https://i.imgur.com/g66ylts.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AC"><img src="https://i.imgur.com/416XksG.png" width="50px" height="50px" ></img></button> | |
</ul> | |
<div id="elmenu" class="btn-group"> | |
<button type="button" class="btn btn-ttc" data-toggle="dropdown"> | |
Adornos abajo <span class="caret"></span></button> | |
<ul class="dropdown-menu" role="menu"> | |
<button class="secundarios" id="AAB1"><img src="https://i.imgur.com/3ij52Qo.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AAB2"><img src="https://i.imgur.com/ABHPWKx.png" width="50px" height="50px" ></img></button> | |
<button class="secundarios" id="AABN"><img src="https://i.imgur.com/Wz2YimL.png" width="50px" height="50px" ></img></button> | |
</ul> | |
<div id="elmenu" class="btn-group"> | |
<button type="button" class="btn btn-ttc" data-toggle="dropdown"> | |
Cambiar fondo <span class="caret"></span></button> | |
<ul class="dropdown-menu" role="menu"> | |
<input class="inputfile" id="test" type="file" onchange="loadImageFile(this)" /> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<script> | |
// Model | |
var model = 'e867cbe46ebe41d08b444261979b3037', | |
// Buttons | |
buttonReja1 = document.getElementById( 'R1' ), | |
buttonReja2 = document.getElementById( 'R2' ), | |
buttonAdornoarriba1 = document.getElementById( 'AAR1' ), | |
buttonAdornoarriba2 = document.getElementById( 'AAR2' ), | |
buttonAdornoarribaNo = document.getElementById( 'AARN' ), | |
buttonAdornomedio = document.getElementById( 'AM' ), | |
buttonAdornoabajo1 = document.getElementById( 'AAB1' ), | |
buttonAdornoabajo2 = document.getElementById( 'AAB2' ), | |
buttonAdornoabajoNo = document.getElementById( 'AABN' ), | |
buttonAdornomedio2 = document.getElementById('AMC'), | |
buttonAdornoCirculos = document.getElementById('AC'), | |
buttonSinAdornos = document.getElementById('SIN'), | |
// Nodes | |
nodeReja1, | |
nodeReja2, | |
nodeAdornosArriba1, | |
nodeAdornosArriba2, | |
nodeAdornoMedio, | |
nodeAdornoAbajo1, | |
nodeAdornoAbajo2, | |
nodeAdornoMedio2, | |
nodeCirculos, | |
// Objects | |
objReja1 = 'reja1 pos1', | |
objReja2 = 'reja2 pos1', | |
objAdornoArriba1 = 'adornoarriba1 pos1', | |
objAdornoArriba2 = 'adornoarriba2 pos1', | |
objAdornoMedio = 'adornomedio pos1', | |
objAdornoAbajo1 = 'adornoabajo1 pos1', | |
objAdornoAbajo2 = 'adornoabajo2 pos1', | |
objAdornoMedio2 = 'Torus001', | |
objAdornoCirculos = 'adornoscirculos', | |
// API version | |
version = '1.0.0', | |
// The iframe | |
iframe = document.getElementById( "iframe" ), | |
// The API client object | |
client = new Sketchfab( version, iframe ), | |
// The API object | |
api, | |
// Defining error and success outside initialization, for easy reading | |
error = function () { | |
console.error( 'Sketchfab API Error!' ); | |
}, | |
// If initilization succeeds, start the model immediately | |
success = function( callback ) { | |
api = callback; | |
api.start(); | |
console.log("bien"); | |
// Wait for viewer to be ready | |
api.addEventListener( 'viewerready', function() { | |
// Get the object nodes | |
} ); | |
api.getNodeMap( function ( err, nodes ) { | |
if ( !err ) { | |
console.log( 'got nodes:', nodes ); | |
for ( var prop in nodes ) { | |
if ( nodes.hasOwnProperty( prop ) ) { | |
// Check nodes against object names | |
if ( nodes[ prop ].name === objReja2 ) { | |
nodeReja2 = nodes[prop].instanceID; | |
console.log( nodeReja2 ); | |
} | |
else if ( nodes[ prop ].name === objReja1 ) { | |
nodeReja1 = nodes[prop].instanceID; | |
console.log(nodeReja1); | |
} | |
else if ( nodes[ prop ].name === objAdornoArriba1 ) { | |
nodeAdornosArriba1 = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeAdornosArriba1 ); | |
} | |
else if ( nodes[ prop ].name === objAdornoArriba2 ) { | |
nodeAdornosArriba2 = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeAdornosArriba2); | |
} | |
else if ( nodes[ prop ].name === objAdornoMedio ) { | |
nodeAdornoMedio = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeAdornoMedio); | |
} | |
else if ( nodes[ prop ].name === objAdornoAbajo1 ) { | |
nodeAdornoAbajo1 = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeAdornoAbajo1); | |
} | |
else if ( nodes[ prop ].name === objAdornoAbajo2 ) { | |
nodeAdornoAbajo2 = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeAdornoAbajo2); | |
} | |
else if ( nodes[ prop ].name === objAdornoMedio2 ) { | |
nodeAdornoMedio2 = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeAdornoMedio2); | |
} | |
else if ( nodes[ prop ].name === objAdornoCirculos ) { | |
nodeCirculos = nodes[prop].instanceID; | |
console.log( 'red head node: ' + nodeCirculos); | |
} | |
// Add button event | |
buttonAdornoarriba1.addEventListener( 'click', function() { | |
api.hide(nodeAdornosArriba2); | |
api.show(nodeAdornosArriba1); | |
}); | |
} | |
buttonAdornoarriba2.addEventListener( 'click', function() { | |
api.hide(nodeAdornosArriba1); | |
api.show(nodeAdornosArriba2); | |
}); | |
} | |
buttonAdornoarribaNo.addEventListener( 'click', function() { | |
api.hide(nodeAdornosArriba1); | |
api.hide(nodeAdornosArriba2); | |
}); | |
} | |
buttonAdornoabajo1.addEventListener( 'click', function() { | |
api.hide(nodeAdornoAbajo2); | |
api.show(nodeAdornoAbajo1); | |
}); | |
}) | |
buttonAdornoabajo2.addEventListener( 'click', function() { | |
api.hide(nodeAdornoAbajo1); | |
api.show(nodeAdornoAbajo2); | |
}); | |
} | |
buttonAdornoabajoNo.addEventListener( 'click', function() { | |
api.hide(nodeAdornoAbajo2); | |
api.hide(nodeAdornoAbajo1); | |
}); | |
buttonReja1.addEventListener( 'click', function() { | |
api.hide(nodeReja2); | |
api.show(nodeReja1); | |
}); | |
buttonReja2.addEventListener( 'click', function() { | |
api.hide(nodeReja1); | |
api.show(nodeReja2); | |
}); | |
buttonAdornoCirculos.onclick = function(){ | |
let exterior = true; | |
return () => { | |
if (exterior) api.hide(nodeCirculos); | |
else api.show(nodeCirculos); | |
exterior = !exterior; | |
}; | |
}(); | |
buttonAdornomedio.addEventListener( 'click', function() { | |
api.hide(nodeAdornoMedio2); | |
api.show(nodeAdornoMedio); | |
}); | |
buttonSinAdornos.addEventListener( 'click', function() { | |
api.hide(nodeAdornoMedio2); | |
api.hide(nodeAdornoMedio); | |
api.hide(nodeCirculos); | |
}); | |
buttonAdornomedio2.onclick = function(){ | |
let adorno = true; | |
return () => { | |
if (adorno) api.hide(nodeAdornoMedio2); | |
else api.show(nodeAdornoMedio2); | |
adorno = !adorno; | |
}; | |
}(); | |
buttonAdornomedio.onclick = function(){ | |
let adorno1 = true; | |
return () => { | |
if (adorno1) api.hide(nodeAdornoMedio); | |
else api.show(nodeAdornoMedio); | |
adorno1 = !adorno1; | |
}; | |
}(); | |
// A function to load a model | |
function loadModel( client, model ) { | |
console.log( 'loading a model' ); | |
client.init( model, { | |
success: success, | |
error: error, | |
internal: 1, | |
transparent:1, | |
ui_infos: 0, | |
ui_controls: 0, | |
ui_stop: 1, | |
watermark: 1, | |
continuousRender: 1, | |
supersample: 0 | |
}); | |
} | |
loadModel( client, model ); | |
$(document).ready(function(){ | |
$('.dropdown-submenu a.test').on("click", function(e){ | |
$(this).next('ul').toggle(); | |
e.stopPropagation(); | |
e.preventDefault(); | |
}); | |
}); | |
$(switchBackground); | |
var oFReader = new FileReader(), | |
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; | |
oFReader.onload = function(oFREvent) { | |
localStorage.setItem('b', oFREvent.target.result); | |
switchBackground(); | |
}; | |
function switchBackground() { | |
var backgroundImage = localStorage.getItem('b'); | |
if (backgroundImage) { | |
$('iframe').css('background-image', 'url(' + backgroundImage + ')'); | |
} | |
} | |
function loadImageFile(testEl) { | |
if (! testEl.files.length) { return; } | |
var oFile = testEl.files[0]; | |
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } | |
oFReader.readAsDataURL(oFile); | |
} | |
</script> | |
</body> | |
<style type = text/css> | |
button{ | |
color:white; | |
background:black; | |
max-width:130px; | |
} | |
.secundarios{ | |
border:solid 3px black; | |
background:white; | |
color:black; | |
} | |
.container{ | |
text-align:center; | |
} | |
iframe{ | |
margin-top:30px; | |
display:block; | |
background-size:cover; | |
} | |
</style> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment