个人中心
gpt4 book ai didi

javascript - OrbitControls.js 导致模型在点击旋转时消失

转载 作者：行者123 更新时间：2023-11-29 18:00:21 25 4
gpt4 key购买 nike

我使用 OrbitControls.js 允许用户放大/缩小和旋转我网站上显示的 3D 模型。但是，当我单击页面上的任意位置时，模型会消失，并且用于在模型之间切换的两个按钮不再起作用。事先，它允许我放大和缩小但不能旋转。

非常感谢任何帮助。

HTML

<!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="OrbitControls.js"></script>
    <script src="main.js"></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>

.js

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("blood");
            });

            $("#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();

最佳答案

我更新了你的 fiddle 并让它开始工作。由于您没有包含 collada 模型，因此我使用了 three.js 示例文件夹中的两个模型。

我不得不说你的错误很奇怪......

这是一个不工作的场景:https://jsfiddle.net/wilt/0c4mfo85/3/

这里是工作场景:https://jsfiddle.net/wilt/0c4mfo85/4/

工作场景和非工作场景之间的唯一区别是 css 声明。我从您的 Canvas 样式中删除了 position: fixed 。我不知道为什么这会有所不同......

canvas {
    position: fixed;
}

关于javascript - OrbitControls.js 导致模型在点击旋转时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35413950/

25 4 0
文章推荐： javascript - 期待这个或那个，如何在单元测试中包含一个 OR
文章推荐： Javascript函数存储在数组中与变量中
文章推荐： javascript - 为什么要解析多个加号运算符？
文章推荐： android - 找不到 ActivityNotFoundException 的原因
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com