使用jquery加载函数加载一个div内的.DAE文件

-1

我想要能够点击一个按钮并加载一个div内的.DAE文件，然后点击另一个按钮并加载another.DAE文件div，替换内容。我已经尝试在下面的代码中使用jquery加载函数，但是当我单击按钮时，加载的单词和数字出现（与.DAE文件有关）而不是实际模型。使用jquery加载函数加载一个div内的.DAE文件

任何帮助都是非常混乱的。

HTML

<!DOCTYPE html> 

<html> 

<head> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

$('#LBC').click(function() { 
    $('#target').load('blood.DAE'); 
}); 



}); 
</script> 

<title>Visualising Cells</title> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="style.css"> 
<script src="three.js"></script> 
<script src="ColladaLoader.js"></script> 

</head> 

<body> 


<script> 

var width = window.innerWidth; 
var height = window.innerHeight; 


var scene = new THREE.Scene(); 

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 500); 
camera.position.z = 0.16; 
camera.position.x = 0; 
camera.position.y = 0; 
scene.add(camera); 


var renderer=new THREE.WebGLRenderer(); 
renderer.setSize(width,height); 
document.body.appendChild(renderer.domElement); 
renderer.render(scene,camera); 
renderer.setClearColor("rgb(181,181,181)"); 

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

light = new THREE.DirectionalLight(0xffffff); 
     light.position.set(0, 0, 0.14); 
     scene.add(light); 



var loader = new THREE.ColladaLoader(); 
    loader.load('blood.DAE', function (collada) { 

      object = collada.scene; 
      object.position.x = 0; 
      object.position.y = 0; 
      object.position.z = 0; 
      object.updateMatrix(); 
      scene.add(object); 
      } 
      ); 



document.addEventListener('keydown', function(event) { 
console.log("Up Arrow Pressed"); 
console.log(camera.position.z); 
if (event.keyCode == 38) { 

    if (camera.position.z >= 0.1) { 

     camera.position.z = camera.position.z - 0.01; 

    } 

} 

else if (event.keyCode == 40) { 

    console.log("Down Arrow Pressed") 

    if (camera.position.z < 0.2) { 

     camera.position.z = camera.position.z + 0.01; 
    } 

    } 
}, true); 

render = function() { 
     requestAnimationFrame(render); 

object.rotation.x += 0.01; 
object.rotation.y += 0.01; 

renderer.render(scene, camera); 
     }; 
     render(); 


</script> 

<div class="float-btn"> 
<input type="button" id="LBC">Load Red Blood Cell</input> 
<input type="button" id="LEC">Load Egg Cell</input> 
</div> 

<div class="float-txt"> 
<div style="color:#000000"> 
<div style="font-family: Arial"> 
<div style="font-size: 18px"> 
<div style="text-decoration: underline"> 
<h1>Visualising Microscopic Cells</h1> 
</div> 

<div class="instructions"> 
<div style="color:#000000"> 
<div style="font-family: Arial"> 
<div style="font-size: 16px"> 
<div style="text-decoration: underline"> 
<h2>Instructions</h2> 
</div> 

<div class="instruction-txt"> 
<div style="color:#000000"> 
<div style="font-family: Arial"> 
<div style="font-size: 14px"> 
<p><u>Zoom In:</u> <strong>Up Arrow</strong> <br><u>Zoom Out:</u> <strong>Down Arrow</strong></br></p> 
</div> 

<div class="Model-Location" id="target"> 
</div> 

</body> 

</html>

CSS

canvas { 
position: fixed; 
top: 0; 
left: 0; 
} 

.float-btn{ 
position: fixed; 
bottom: 5px; 
left: 5px; 
} 

.float-txt{ 
position: fixed; 
top: 0px; 
left: 10px; 
} 

.instructions{ 
position: fixed; 
bottom: 100px; 
right: 28px; 
} 

.instruction-txt{ 
position: fixed; 
right: 10px; 
} 

.Model-Location{ 
position: fixed; 
top: 0px; 
height: 500px; 
width: 500px; 

}

来源

2016-02-12 G.Smith

你看DAE文件的内容，为load功能就去拿文件，并追加其内容为一个特定的地方。它不会使它像一个模型。您至少需要有一个插件才能完成此工作，并将其作为object或embed标记包含在您的页面中。

来源

2016-02-12 17:28:44

对不起，即时通讯新的jquery和你的答案有点混淆，是否有可能纠正我的代码？ –

此外，使用jquery在页面上的模型之间切换会更简单，在上面的代码中，一个模型已经在页面上。换句话说，是否有可能使用jquery在显示的模型之间切换，然后将其分配给每个按钮？ –

这是基础知识。当然''jQuery'很简单，但更好学习JavaScript，所以你知道它是如何工作的。 –

使用jquery加载函数加载一个div内的.DAE文件

回答

相关问题