Question

现在我打开一个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>

javascript代码

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);      
});

}

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

谢谢

Answer 1

我有两个与你描述的问题类似的问题。我想滑动/淡化定位为固定的元素，并且在我打开开发人员工具或以某种方式与DOM交互之前，其中的一些元素没有显示。我还没有找到修复程序，但我可以告诉你根本原因是动画元素。我的解决方法是删除这些动画，只需切换一个类来显示/隐藏元素。

尝试使用两个类：

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

.hide {
    display: none;
}

而不是滑动/淡化只是切换这些类来隐藏和显示元素并检查你的问题是否已经消失。

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

我打开开发人员工具栏时只加载模型

1 个答案: