Question

我想为我网站上显示的3D模型添加旋转。我已多次尝试使用object.rotation.set(x, y, z, order);，但它无法正常工作。非常感谢任何帮助，因为它很可能是我错过的简单修复。

这个问题并不重复，因为我不再使用OrbitControls.js。

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="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>
</body>
</html>

CSS

canvas {
position: fixed;
top: 0;
left: 0;
}

.float-btn{
position: fixed;
bottom: 5px;
left: 5px;
}

.float-txt{
position: fixed;
top: 0px;
left: 10px;
}

.instructions{
position: fixed;
bottom: 35px;
right: 28px;
}

.instruction-txt{
position: fixed;
right: 10px;
bottom: 5px;
}

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 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) {       
                console.log("Up Arrow Pressed");
                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);
            renderer.render(scene, camera);            
        };

        render();

如何为我网站内的两个模型添加旋转？

0 个答案: