Javascript jquery加载函数问题_Javascript_Jquery

Javascript jquery加载函数问题

javascript jquery

Javascript jquery加载函数问题,javascript,jquery,Javascript,Jquery,我尝试使用jquery load函数在按下按钮时将转换为.DAE文件的三维模型加载到目标div中。但是，当按下按钮时，屏幕上会出现大量与文件相关的数字，而不是模型如果不可能做到这一点，我还想知道是否可以使用jquery加载函数来简单地替换点击按钮时页面中心显示的模型，如屏幕截图所示任何帮助都会受到极大的欢迎。我的代码可以在下面看到 <!DOCTYPE html> <html> <head> <script type="text/javascr

我尝试使用jquery load函数在按下按钮时将转换为.DAE文件的三维模型加载到目标div中。但是，当按下按钮时，屏幕上会出现大量与文件相关的数字，而不是模型

如果不可能做到这一点，我还想知道是否可以使用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>


$（文档）.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>