2
Я пытаюсь использовать функцию загрузки jquery для загрузки 3D-модели, преобразованной в файл .DAE, в целевой div при нажатии кнопки. Однако, когда кнопка нажата нагрузка чисел появляется на экране, относящийся к файлу, а не модель ...jquery load function issue
Here is a screen shot of the problem
Если это не по возможности сделать это, я также интересна, если это можно использовать функцию загрузки jquery, чтобы просто заменить модель, показанную в центре страницы при нажатии кнопок, как показано на скриншоте?
Любая помощь очень проста. Код, который я есть, можно увидеть ниже.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#LBC').click(function() {
$('#target').load('bloodexternalcontent.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 src="js/controls/OrbitControls.js"></script>
<script>
var controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', render);
</script>
<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('egg2.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.0;
object.rotation.y += 0.0;
renderer.render(scene, camera);
controls.update();
};
render();
</script>
<div class="float-btn">
<button type="button" id="LBC">Load Red Blood Cell</button>
<button type="button" id="LEC">Load Egg Cell</button>
</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>
ли он нормально работать, если вы взяли содержимое этого файла .dae и просто воткнул его в DIV, без AJAX? – adeneo
@adeneo У меня есть одна из моделей на странице, как показано на скриншоте, я попытался использовать jquery, чтобы позволить мне переключаться между двумя моделями при нажатии кнопок в нижнем левом углу страницы. Если это альтернативный способ достижения этого, то я открываю его, но в отношении вашего предложения я не уверен, как его попробовать. –
@adeneo Это единственный способ загрузить модель (.DAE-файл) через jquery, чтобы поместить ее в div? Если да, есть ли альтернативный метод загрузки модели в центр страницы, как и скриншот, и переключаться между ними с помощью кнопок? –