来自THREE.js WebGL框架的“无效对象ID”

时间:2016-03-30 10:12:25

标签: javascript three.js xtk

抱歉我的英语不好。 我使用加载器加载带有MTL文件的OBJ文件。 一切似乎都有效,但当我尝试将我的网格添加到场景时,我收到此错误:“xtk.js:260 Uncaught Error:Invalid object id”

你有什么想法吗?

我的代码:

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8>
<link rel="stylesheet" media="screen" type="text/css" title="index.html" href="index.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.js"></script>
<script type="text/javascript" src="http://get.goXTK.com/xtk.js"></script>
<script type="text/javascript" src="script/date.gui.js"></script>
<script src="script/DDSLoader.js"></script>
<script src="script/MTLLoader.js"></script>
<script src="script/ObjLoader.js"></script>




</head>

<body>

<script>


window.onload = function() {



  ///Initialisation Scene 3D
  var r = new X.renderer3D();
  r.init();

  /// Chargement des Meshs avec Fichiers associés + visibilté à l'écran ( Non affiché par défaut dans ce cas )

    var PlanCou1  = new X.mesh();


  // model
                var onProgress = function ( xhr ) {
                    if ( xhr.lengthComputable ) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log( Math.round(percentComplete, 2) + '% downloaded' );
                    }
                };
                var onError = function ( xhr ) { };
                THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setBaseUrl( 'planOriginal/' );
                mtlLoader.setPath( 'planOriginal/' );
                mtlLoader.load( 'Plan_01_Textures.clean.reg.obj.mtl', function( materials ) {
                    materials.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( materials );
                    objLoader.setPath( 'planOriginal/' );
                    objLoader.load('Plan_01_Textures.clean.reg.obj', function(PlanCou1){
                       r.add(PlanCou1);///ERROR
                    }, onProgress, onError );

                }); 


  var PlanCou2  = new X.mesh();
  PlanCou2.file = 'planOriginal/Plan_02_Textures.clean.obj';
  PlanCou2.visible = false;


  var PlanCou3  = new X.mesh();
  PlanCou3.file = 'planModif/Plan_03_Textures.obj';
  PlanCou3.visible = false;


  var PlanCou4  = new X.mesh();
  PlanCou4.file = 'planModif/Plan_04_Textures.obj';
  PlanCou4.visible = false;


  var PlanCou5  = new X.mesh();
  PlanCou5.file = 'planModif/Plan_05_Textures.obj';
  PlanCou5.visible = false;

  ///Ajout des Meshs à la scène
  r.add(PlanCou2); 
  r.add(PlanCou3);
  r.add(PlanCou4);
  r.add(PlanCou5);


 ///Interface GUI 

 r.onShowtime = function()
 {

    var gui = new dat.GUI();
    var couGui = gui.addFolder('Modèle 3D');

    var rep1 = gui.addFolder('1er Plan');
    rep1.add(PlanCou1, 'visible').listen()
    rep1.add(PlanCou1, 'opacity', 0, 1)
    rep1.open();


    var rep2 = gui.addFolder('2nd Plan');
    rep2.add(PlanCou2, 'visible').listen()
    rep2.add(PlanCou2, 'opacity', 0, 1)
    rep2.open();


    var rep3 = gui.addFolder('3eme Plan');
    rep3.add(PlanCou3, 'visible').listen()
    rep3.add(PlanCou3, 'opacity', 0, 1)
    rep3.open();


    var rep4 = gui.addFolder('4eme Plan');
    rep4.add(PlanCou4, 'visible').listen()
    rep4.add(PlanCou4, 'opacity', 0, 1)
    rep4.open();

    var rep5 = gui.addFolder('5eme Plan');
    rep5.add(PlanCou5, 'visible').listen()
    rep5.add(PlanCou5, 'opacity', 0, 1)
    rep5.open();

 };

 ///Position de la camera 

 r.camera.position = [-10, 400, 0];

 ///Changement des couches de l'image au clavier

 r.interactor.onKey = function () {

   if(window.event.keyCode == 81) ///Lorsqu'on appuie sur la lettre q.
   {
        if(PlanCou1.visible == 1)
        {
            PlanCou1.visible = false;
            PlanCou2.visible = true;
        }

            else if(PlanCou1.visible == 0 && PlanCou2.visible == 1)
          {
              PlanCou2.visible = false;
              PlanCou3.visible = true;
          }


            else if(PlanCou1.visible == 0 && PlanCou2.visible == 0 &&PlanCou3.visible == 1 )
          {
              PlanCou3.visible = false;
              PlanCou4.visible = true;
          }



            else if(PlanCou1.visible == 0 && PlanCou2.visible == 0 && PlanCou3.visible == 0 && PlanCou4.visible == 1)
          {
              PlanCou4.visible = false;
              PlanCou5.visible = true;
          }

           else if(PlanCou1.visible == 0 && PlanCou2.visible == 0 && PlanCou3.visible == 0 && PlanCou4.visible == 0 && PlanCou5.visible == 1)
          {
              PlanCou5.visible = false;
              PlanCou1.visible = true;
          }
    }

    /// Partie de la fonction réservée au Zoom

    if(window.event.keyCode == 38) /// Lorqu'on appuie sur la flèche du haut du clavier
    {
        r.camera.zoomIn(true); /// Zoom Avant
    }

    if(window.event.keyCode == 40) /// Lorsqu'on appuie sur la flèche du bas du clavier
    {
        r.camera.zoomOut(true); /// Zoom Arrière
    }


};


 r.interactor.onMouseDown = function()
 {
    if(r.interactor.rightButtonDown == 1)
     {
        var pos = r.interactor.mousePosition;
        alert(pos);

      /// Structures à identifier dans le Plan01

      if(PlanCou1.visible == 1 && PlanCou2.visible == 0 && PlanCou3.visible == 0 && PlanCou4.visible == 0 && PlanCou5.visible == 0)
       {
        if((pos[0]>595 && pos[0]<670) && (pos[1]> 240 && pos[1]< 300))
        {
           var questionGmand = prompt("Quelle est cette structure ?","");
           if(questionGmand == "glande mandibulaire")
           {
                alert("Bonne Réponse !");
           }
           else
           {
                alert("Mauvaise Réponse ! Veuillez réessayer");
           }
         }
       }
    }
 }


 r.render();

};


</script>

</body>

</html>

0 个答案:

没有答案