抱歉我的英语不好。 我使用加载器加载带有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>