Javascript jquery加载函数问题
我尝试使用jquery load函数在按下按钮时将转换为.DAE文件的三维模型加载到目标div中。但是,当按下按钮时,屏幕上会出现大量与文件相关的数字,而不是模型 如果不可能做到这一点,我还想知道是否可以使用jquery加载函数来简单地替换点击按钮时页面中心显示的模型,如屏幕截图所示 任何帮助都会受到极大的欢迎。我的代码可以在下面看到Javascript jquery加载函数问题,javascript,jquery,Javascript,Jquery,我尝试使用jquery load函数在按下按钮时将转换为.DAE文件的三维模型加载到目标div中。但是,当按下按钮时,屏幕上会出现大量与文件相关的数字,而不是模型 如果不可能做到这一点,我还想知道是否可以使用jquery加载函数来简单地替换点击按钮时页面中心显示的模型,如屏幕截图所示 任何帮助都会受到极大的欢迎。我的代码可以在下面看到 <!DOCTYPE html> <html> <head> <script type="text/javascr
<!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>
$(文档).ready(函数(){
$('#LBC')。单击(函数(){
$('#target').load('bloodexternalcontent.DAE');
});
});
可视化细胞
var控制装置=新的三个轨道控制装置(摄像机);
控件。addEventListener('change',render);
变量宽度=window.innerWidth;
var height=window.innerHeight;
var scene=new THREE.scene();
var摄像机=新的三透视摄像机(75,window.innerWidth/window.innerHeight,0.01500);
摄像机位置z=0.16;
摄像机位置x=0;
摄像机位置y=0;
场景。添加(摄影机);
var renderer=new THREE.WebGLRenderer();
设置大小(宽度、高度);
document.body.appendChild(renderer.doElement);
渲染器。渲染(场景、摄影机);
渲染器.setClearColor(“rgb(181)”;
灯光=新的三个方向灯光(0xffffff);
光。位置。设置(1,1,1);
场景。添加(灯光);
灯光=新的三个方向灯光(0xffffff);
光位置设置(0,0,0.14);
场景。添加(灯光);
var loader=new THREE.ColladaLoader();
loader.load('egg2.DAE',函数(collada){
对象=collada.scene;
object.position.x=0;
object.position.y=0;
object.position.z=0;
object.updateMatrix();
场景。添加(对象);
}
);
document.addEventListener('keydown',函数(事件){
console.log(“按下向上箭头”);
控制台日志(摄像机位置z);
如果(event.keyCode==38){
如果(摄影机位置z>=0.1){
camera.position.z=camera.position.z-0.01;
}
}
else if(event.keyCode==40){
console.log(“按下向下箭头”)
if(摄像机位置z<0.2){
camera.position.z=camera.position.z+0.01;
}
}
},对);
render=函数(){
请求动画帧(渲染);
object.rotation.x+=0.0;
object.rotation.y+=0.0;
渲染器。渲染(场景、摄影机);
控件更新();
};
render();
红细胞负荷
称重传感器
显微细胞可视化
说明书
放大:向上箭头
缩小:向下箭头
您可以通过将.dae数据加载到可配置的THREE.ColladaLoader()
对象中来替换页面中心显示的模型,方法与原始代码中使用的loader.load方法大致相同
在下面的示例中,单击事件绑定到两个按钮。这些将触发一个删除当前模型的函数。然后加载相关的.dae文件,并将所需模型添加到场景中。(请注意,我没有触及标记中的HTML问题,例如未关闭的div。)
可视化细胞
var myModel;//用于参考最近加载的模型
$(文档).ready(函数(){
//加载页面后,向两个按钮添加单击功能
$(“#LBC”)。单击(函数(){
切换模型(“血液外部内容”);
});
$(“#LEC”)。单击(函数(){
切换模式(“egg2”);
});
});
函数切换模型(modelName){
//从场景中删除现有模型
场景。移除(myModel);
//添加所选模型
loadModel(modelName);
}
函数loadModel(modelName){
//添加指定的模型
loader.load(modelName+'.DAE',函数(collada){
myModel=collada.scene;
myModel.position.x=0;
myModel.position.y=0;
myModel.position.z=0;
myModel.updateMatrix();
scene.add(myModel);
});
}
变量宽度=window.innerWidth;
var height=window.innerHeight;
var scene=new THREE.scene();
var摄像机=新的三透视摄像机(75,window.innerWidth/window.innerHeight,0.01500);
摄像机位置z=0.16;
摄像机位置x=0;
摄像机位置y=0;
场景。添加(摄影机);
var控制装置=新的三个轨道控制装置(摄像机);
var renderer=new THREE.WebGLRenderer();
设置大小(宽度、高度);
document.body.appendChild(renderer.doElement);
渲染器。渲染(场景、摄影机);
渲染器.setClearColor(“rgb(181)”;
灯光=新的三个方向灯光(0xffffff);
光。位置。设置(1,1,1);
场景。添加(灯光);
灯光=新的三个方向灯光(0xffffff);
光位置设置(0,0,0.14);
场景。添加(灯光);
var loader=new THREE.ColladaLoader();
//加载默认模型
负荷模型(“egg2”);
document.addEventListener('keydown',函数(事件){
控制台日志(摄像机位置z);
如果(event.keyCode==38){
//不要滚动窗口
console.log(“按下向上箭头”);
event.preventDefault();
如果(摄影机位置z>=0.1){
camera.position.z=camera.position.z-0.01;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></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 myModel; // used to reference the most recently-loaded model
$(document).ready(function() {
// when the page has loaded, add click functions to the two buttons
$("#LBC").click(function() {
toggleModel("bloodexternalcontent");
});
$("#LEC").click(function() {
toggleModel("egg2");
});
});
function toggleModel(modelName) {
// remove the existing model from the scene
scene.remove(myModel);
// add the chosen model
loadModel(modelName);
}
function loadModel(modelName) {
// add the specified model
loader.load(modelName+'.DAE', function (collada) {
myModel = collada.scene;
myModel.position.x = 0;
myModel.position.y = 0;
myModel.position.z = 0;
myModel.updateMatrix();
scene.add(myModel);
});
}
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 controls = new THREE.OrbitControls( 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();
// load the default model
loadModel("egg2");
document.addEventListener('keydown', function(event) {
console.log(camera.position.z);
if (event.keyCode == 38) {
// don't scroll the window
console.log("Up Arrow Pressed");
event.preventDefault();
if (camera.position.z >= 0.1) {
camera.position.z = camera.position.z - 0.01;
}
}
else if (event.keyCode == 40) {
// don't scroll the window
event.preventDefault();
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();
};
controls.addEventListener('change', render );
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>