Skip to content

Instantly share code, notes, and snippets.

@TechnoOscuro

TechnoOscuro/Funcionafotoynodos.html

Last active January 24, 2023 04:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TechnoOscuro/003aad9824884d94c0cb4c9ac8100faf to your computer and use it in GitHub Desktop.
Save TechnoOscuro/003aad9824884d94c0cb4c9ac8100faf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Funcionafotoynodos.html
<!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>
//Autoincrustado desde github
wp_embed_register_handler( 'gist', '/https:\/\/gist\.github\.com\/(\d+)(\?file=.*)?/i', 'wp_embed_handler_gist' );
function wp_embed_handler_gist( $matches, $attr, $url, $rawattr ) {
$embed = sprintf(
'<script src="https://gist.github.com/%1$s.js%2$s"></script>',
esc_attr($matches[1]),
esc_attr($matches[2])
);
return apply_filters( 'embed_gist', $embed, $matches, $attr, $url, $rawattr );
}
</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="" 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="" 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="" 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="" 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="" 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 = '47e0f04b958748a5880e35090d0775f0',
// 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();
// 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,
supersample: 0,
graph_optimizer: 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