即时通讯使用Sketchfab API，我想更改iframe内的背景。我的代码只能显示3D模型的正确信息或更改背景，但不能同时显示两者。如果有人可以看看我说些什么...... 对不起，我的英语不好，谢谢。 这是jQuery的一部分
<script>
$(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>
这是HTML部分：
<body>
<iframe class="visor" id= "visor" style= "border:0" src="
transparent=1&
"
width="500" height="300" >
</iframe>
<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)" ></input>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById('visor');
urlid = '47e0f04b958748a5880e35090d0775f0';
// By default, the latest version of the viewer API will be used.
//declarar un nodo con el nombre que quieras
var 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',
//lo mismo para el otro objeto
// Alternatively, you can request a specific version.
client = new Sketchfab( '1.0.0', iframe );
client.init( urlid, {
success: function onSuccess( api ){
api.start();
api.addEventListener( 'viewerready', function() {
// API is ready to use
// Insert your code here
console.log( 'Viewer is ready' );
api.getNodeMap( function ( err, nodes ) {
if ( !err ) {
console.log(nodes);
for(var prop in nodes){
if(nodes.hasOwnProperty(prop)){
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);
}
//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;
};
}();
});
}
})
</script>
我也留下了整个代码：https://gist.github.com/TechnoOscuro/cc4556dd484e89b2b03d43a06a8b6254#file-sketchfabapitest-html