Question

我使用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();

Answer 1

我更新了你的小提琴并让它发挥作用。由于你没有包含你的collada模型，我使用了来自three.js examples文件夹的两个模型。

我必须说你的错误很奇怪......

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

以下是工作场景：https://jsfiddle.net/wilt/0c4mfo85/4/

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

canvas {
    position: fixed;
}

OrbitControls.js单击旋转时使模型消失

1 个答案: