Question

我希望能够单击一个按钮并在div中加载.DAE文件，然后单击另一个按钮并在同一div中加载另一个.DAE文件，替换内容。我尝试在下面的代码中使用jquery load函数，但是当我单击按钮时，会出现大量的单词和数字（与.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;

}

Answer 1

您会看到DAE文件的内容，因为load函数只需获取文件并将其内容附加到特定位置。它不会像模型一样呈现它。您至少需要有一个插件才能执行此操作，并在页面中包含object或embed标记。

使用jquery load函数在div

1 个答案: