1

我正在创建一个类似于鸟瞰游戏的页面。我正在尝试根据鼠标移动事件在 x 和 z 轴上移动 x3dom 元素。它可以工作，除非它没有正确旋转。称为占位符的元素是我根据鼠标坐标移动的元素。在函数 squaremousemove() 下，您会注意到 rot[1] 的旋转。我尝试用 rotateIncrement 替换它，这是我旋转所有其他元素的方式，但这不起作用。占位符假设与正方形具有相同的旋转。有任何想法吗？

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style/x3dom.css">

<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/x3dom.js"></script>

<style>
    body        {margin: 0; padding: 0;}
    #debugtext  {position: absolute; top: 30px; left: 15px;}
</style>

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){
        var screenW = $(document).width();
        var screenH = $(document).height();
        var rotateIncrement = 0.78;
        var groundlevel = 0.1;
        var isMouseDown = false;
        var isShiftPressed = false;
        var isCtrlPressed = false;
        var lastrotatevalueX = 0;
        var lastpanvalueX = 0;
        var lastpanvalueZ = 0;
        var panincrementX = 0;
        var panincrementZ = 200;

        var x3d = document.getElementById('x3darea');

        // set the height and width of the x3d area
        $("#x3darea").css({width: screenW + "px", height: screenH + "px", border: "0"});

        // set viewpoint attributes
        viewpoint.setAttribute("position", "0 65 200");
        viewpoint.setAttribute("orientation", "1 0 0 -0.5");

        // set initial rotation
        rotateshapes();

        // disable selection for all elements
        $(document).disableSelection();

        $(document).keydown(function(e) {
            if (e.shiftKey)
                isShiftPressed = true;

            if (e.ctrlKey)
                isCtrlPressed = true;
        });

        $(document).keyup(function(e) {
            isShiftPressed = false;
            isCtrlPressed = false;
        });

        x3d.addEventListener("mousedown", function() { 
            isMouseDown = true; 
        }, false);

        x3d.addEventListener("mouseup", function() {
            isMouseDown = false;
        }, false);

        x3d.addEventListener("mousemove", function(e) {
            if (isMouseDown) {

                if (isShiftPressed)
                    rotatesetup(e);

                if (isCtrlPressed) {
                    panviewbox(e);
                }

                // not sure what these two lines do except that they disable the built-in rotation and panning
                e.cancelBubble = true;
                e.stopPropagation();
            }
        }, true);

        function panviewbox(e) {
            var increment = 0.4;

            if (lastpanvalueX > e.layerX)
                panincrementX += increment;
            else
                panincrementX -= increment;

            if (lastpanvalueZ > e.layerY)
                panincrementZ += increment;
            else
                panincrementZ -= increment;

            lastpanvalueX = e.layerX;
            lastpanvalueZ = e.layerY;

            viewpoint.setAttribute("position", panincrementX + " 65 " + panincrementZ);
        }

        function rotatesetup(e) {
            var increment = 0.06;

            if (lastrotatevalueX > e.layerX)
                rotateIncrement += increment;
            else
                rotateIncrement -= increment;

            lastrotatevalueX = e.layerX;

            rotateshapes(e);
        }

        function rotateshapes() {

            $(".rotatable").each(function() {
                gridline = document.getElementById($(this).attr('id'));

                gridline.setAttribute('rotation', '0 1 0 ' + rotateIncrement);
            });
        }
    });

    function squaremousemove(event) {
        var posX = event.worldX;
        var posZ = event.worldZ;
        var placeholder = document.getElementById('placeholder');

        var norm = new x3dom.fields.SFVec3f(event.normalX, event.normalY, event.normalZ);
        var qDir = x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(0, 1, 0), norm);
        var rot = qDir.toAxisAngle();

        $("#debugtext").html(rot[1]);
        // $("#debugtext").html(posX.toFixed(4) + ", " + posZ.toFixed(4));

        placeholder.setAttribute('rotation', rot[0].x + ' 1 ' + rot[0].z + ' ' + rot[1]);
        placeholder.setAttribute('translation', event.worldX + ' 0.1 ' + event.worldZ);
        placeholder.setAttribute('center', (event.worldX*-1) + ' 0 ' + (event.worldZ*-1));

        // placeholder.setAttribute('translation', posX + ' 1 ' + posZ);
        // placeholder.setAttribute('rotation', '0 1 0 ' + rotateIncrement);
    }
</script>
</head>
<body>
    <div id="devcontent">
        <span id="debugtext"></span>


<x3d id="x3darea">
            <scene>
                <transform id="square" class="rotatable" onmousemove="squaremousemove(event);" translation="0 0 0">
                    <shape>
                        <appearance>
                            <material diffuseColor='green'></material>
                        </appearance>
                        <box size="200 0.01 200" />
                    </shape>
                </transform>
                <transform id="placeholder" class="rotatable" translation="-95 0.1 91" center="95 0 -91">
                    <shape>
                        <appearance>
                            <material diffuseColor='#ff8787'></material>
                        </appearance>
                        <box size="6 0.1 6" />
                    </shape>
                </transform>
                <transform id="building1" class="rotatable" translation="-40 2 20" center="40 0 -20">
                    <shape>
                        <appearance>
                            <material diffuseColor='blue'></material>
                        </appearance>
                        <box size="2 4 2" />
                    </shape>
                </transform>
                <transform id="building2" class="rotatable" translation="5 2.5 18" center="-5 0 -18">
                    <shape>
                        <appearance>
                            <material diffuseColor='yellow'></material>
                        </appearance>
                        <box size="4 5 4" />
                    </shape>
                </transform>
                <transform id="road1" class="rotatable" translation="0 0.1 0" center="0 0 0">
                    <shape>
                        <appearance>
                            <material diffuseColor='gray'></material>
                        </appearance>
                        <box size="200 0.001 2" />
                    </shape>
                <Viewpoint id="viewpoint" />
            </scene>
        </x3d>
</div>
</body>
</html>
4

0 回答 0