使用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文件

回答

相關問題