Javascript 仅在打开“开发人员”工具栏时加载模型_Javascript_Html_Three.js

Javascript 仅在打开“开发人员”工具栏时加载模型

javascript html three.js

Javascript 仅在打开“开发人员”工具栏时加载模型,javascript,html,three.js,Javascript,Html,Three.js,现在，当我打开一个three.js网格时，我遇到了一个小问题。当我用chrome或firefox（没有尝试IE）打开网页时，一切正常，但画布不会出现我必须激活开发者工具栏才能看到three.js网格网页代码 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

现在，当我打开一个three.js网格时，我遇到了一个小问题。当我用chrome或firefox（没有尝试IE）打开网页时，一切正常，但画布不会出现

我必须激活开发者工具栏才能看到three.js网格

网页代码

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TFG: Pagina web con webGL sobre brazos roboticos</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="libs/jquery-2.1.4.min.js"></script>
<script src="//use.edgefonts.net/cabin;source-sans-pro:n2,i2,n3,n4,n6,n7,n9.js"></script>

<!--Slipry-->
<script src="libs/slippry/dist/slippry.min.js"></script>
<link rel="stylesheet" href="libs/slippry/dist/slippry.css">
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<!--Bibliotecas-->
<script src="libs/ThreeJSV71/build/three.min.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/Coordinates.js"></script>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>   
<script src="libs/ColladaLoader.js"></script>   



<script>
    $(document).ready(function() {
        $.getScript("js/json.js", function(){
            $( "#go" ).click(function() {           
        })});           

        <!--Slipry-->
        var slide = $('#slider2').slippry();
    });     
</script>   





<font size="+6"><b>TFG</b></font><br>
<a href="../index.html">Volver a atrás</a>

<form name="framecombo">
<select name="framecombo2" size=1>
    <option value='blender/json/camara'>camara</option>
    <option value='blender/json/avenger'>Avenger</option>
  </select>
  <input type="button" id="go" value="Go!" onclick="setURL(framecombo2.value)"></p>
</form>
<hr></hr>
<section class="wrapper">
    <ul id="slider2">
        <li><img src="images/1.png" />  </li>
        <li><img src="images/2.png" />  </li>
        <li><img src="images/3.png" />  </li>
        <li><img src="images/4.png" />  </li>
        <li><img src="images/KL250-3.png"/> </li>
        <li><img src="images/KL250-3claw.png" />    </li>
    </ul>
</section>

<hr>
<div id='container' width=800, height=600>  
</div>
<br>

var width = window.innerWitdh,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
ambientLight,
directionalLight,
loader,
modelo = new THREE.Object3D(),
cameraConmtrols,
URL;

init();
animate();  


function init()
{
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width,height); 
renderer.setClearColor(new THREE.Color(0x0000AA),1.0);
document.getElementById('container').appendChild(renderer.domElement);

scene =new THREE.Scene();
var aspectRatio = window.innerWidth/window.innerHeight;

camera = new THREE.PerspectiveCamera(45, aspectRatio,0.1,100);
camera.position.set(0,5,30);
camera.lookAt(new THREE.Vector3(0,0,0));

ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);

directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0,1,0);
scene.add(directionalLight);

scene.add(new THREE.GridHelper(10,1));
loader = new THREE.JSONLoader();    

cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.target.set(0,0,0);
window.addEventListener('resize',updateAspectRatio);


}

function updateAspectRatio()
{
//Renovar las dimensiones del renderer
renderer.setSize(window.innerWidth, window.innerHeight);
//Renovar la relacion de aspecto de frutum
camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();
}
function animate() {

requestAnimationFrame( animate );   

renderer.render( scene, camera );
}

function setURL(url)
{
//window.stop()
URL = url+'/model.json';    

loader.load(URL, function(geometry,materials)
{
    //Cargamos el modelo
    modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));


    //Cargamos el archivo de configuracion del modelo
    //------------------------------------

    $.get(url+'/config.cfg', function(result) 
    {
        var txt=result.split('\n');
        var pos=txt[2].split(':')[1].split(',');
        var rot=txt[3].split(':')[1].split(',');            
        var sca=txt[4].split(':')[1].split(',');

        modelo.position.set(parseInt(pos[0]),parseInt(pos[1]),parseInt(pos[2]));
        modelo.scale.set(parseInt(sca[0]),parseInt(sca[1]),parseInt(sca[2]));
    });

    //------------------------------------

    scene.add(modelo);      
});

}

代码效率很低。这项工程是他的第一步。我做错了什么？我不想打开开发工具来查看网格

谢谢

我有两个与您描述的问题类似的问题。我想滑动/淡入一个定位为固定的元素，其中的一些元素直到我打开开发人员工具或与DOM进行交互时才显示出来。我还没有找到修复方法，但我可以告诉你根本原因是元素的动画化。我的解决方法是删除那些动画，然后简单地切换一个类来显示/隐藏元素

尝试使用两个类：

.show {
    display: block; //Or fixed or absolute or whatever you need here.
}

.hide {
    display: none;
}

而不是滑动/淡入，只需切换这些类以隐藏和显示元素，并检查您的问题是否消失

希望这有助于解决您的问题。

尝试使用两个类：

.show {
    display: block; //Or fixed or absolute or whatever you need here.
}

.hide {
    display: none;
}

而不是滑动/淡入，只需切换这些类以隐藏和显示元素，并检查您的问题是否消失

希望这有助于解决您的问题。

抱歉，没有任何更改。您是否删除了var slide=$（“#slider2”）。slippy（）？我相信它也使用了一些css转换。是的，它使用css转换，但是如果我删除它，它不会有任何改变。抱歉，没有任何更改您是否删除了var slide=$（“#slider2”）.slippy（）？我相信它也使用了一些css转换。是的，它使用css转换，但是如果我删除它，它不会有任何改变。很抱歉