是否可以使用 jquery load 函数在单击按钮时打开页面中心的模型

Is it possible to use the jquery load function to open a model in the centre of the page when a button is clicked?

本文关键字：模型 按钮 jquery 可以使 load 函数 单击 是否      更新时间：2023-09-26

我尝试在下面的代码中使用jquery load函数来加载模型（.DAE 文件）放入div 中，但它不起作用并显示大量数字和单词，如下面的屏幕截图所示。

单击按钮时出现问题的屏幕截图

我想知道是否可以使用加载函数来显示模型（.DAE 文件），与屏幕截图非常相似，但在单击任一按钮时，在页面中心显示的两个模型之间切换。（换句话说，是否有一个选择器在页面中心而不是div加载模型？

<!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 src="js/controls/OrbitControls.js"></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('blood.DAE', function (collada) {
                var 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">
            <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; font-family: Arial; font-size: 18px; text-decoration: underline;">
                <h1>Visualising Microscopic Cells</h1>
            </div>
        </div>
        <div class="instructions">
            <div style="color: #000000; font-family: Arial; font-size: 16px; text-decoration: underline;">
                <h2>Instructions</h2>
            </div>
        </div>
        <div class="instruction-txt">
            <div style="color: #000000; font-family: Arial; font-size: 14px">
                <p>
                    <u>Zoom In:</u> <strong>Up Arrow</strong> <br />
                    <u>Zoom Out:</u> <strong>Down Arrow</strong>
                </p>
            </div>
        </div>
        <div class="Model-Location" id="target"></div>
    </body>
</html>

我从未使用过 .dae 文件，但我假设页面正在从中加载 xml，而不是实际将其转换为您想要的内容。您需要找出一些将数据转换为所需的GUI格式的方法，然后调用它以加载jquery。

假设 ajax 调用blood.dae返回 HTML...

如果要缓存内容，还有更复杂的方案，但对于两个不同的按钮，可以只使用两个不同的处理程序，每个按钮将内容加载到目标中：

$('#LBC1').click(function() {
    $('#target').load('blood.DAE');
});
$('#LBC2').click(function() {
    $('#target').load('somethingelse.DAE');
});

如果您希望用户来回切换并且想要确保快速切换，则可以将内容加载到两个不同的目标中，然后在单击时隐藏/显示相应的目标（如果已加载）。

相关文章：