X3D перемещает объект в двух измерениях с помощью мыши - PullRequest
Новая
       50

X3D перемещает объект в двух измерениях с помощью мыши

0 голосов
/ 02 апреля 2020

Я думаю, это вопросы для начинающих, но я не могу понять это и уже искал inte rnet.

Речь идет о X3D - Szene, куда я хочу переместить объект (здесь коробка) над плоскостью в двух измерениях. Я придумал, чтобы переместить его с помощью перетаскивания мышью по одному измерению, но я хочу, чтобы мой объект делал это в двух измерениях на плоскости, как в двухмерном квадрате или в прямоугольнике на заданной плоскости (в примере также очень плоский box).

Вот мой код для движения с одним измерением: 

<html> 
        <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>My first X3DOM page</title>          
            <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 
            <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link> 
        </head> 
<script>
    var currentGizmoRotation       = new x3dom.fields.SFMatrix4f();
    var currentGizmoRotationOffset = new x3dom.fields.SFMatrix4f();

    /*
     * Callback function, invoked on translation gizmo output.
     */
    function processTranslationGizmoEvent(event)
    {
        var sensorToWorldMatrix, translationValue;

        if (event.fieldName === 'translation_changed')
        {
            //convert the sensor's output from sensor coordinates to world coordinates (i.e., include its 'axisRotation')
            sensorToWorldMatrix = x3dom.fields.SFMatrix4f.parseRotation(event.target.getAttribute("axisRotation")); 

            translationValue = sensorToWorldMatrix.multMatrixVec(event.value);

            //transform the affected sensor geometry
            document.getElementById('translationHandleTransform').setFieldValue('translation', translationValue);
            document.getElementById('rotationHandleTransform').setFieldValue('translation', translationValue);

            //transform the affected element
            document.getElementById('teapotTranslation').setFieldValue('translation', translationValue);            
        }
    }   

    /*
     * Callback function, invoked on rotation gizmo output.
     */
    function processRotationGizmoEvent(event)
    {       
        var sensorToWorldMatrix, rotationMatrixWorld;

        if (event.fieldName === 'rotation_changed')
        {
            //convert the sensor's output from sensor coordinates to world coordinates (i.e., include its 'axisRotation')
            sensorToWorldMatrix = x3dom.fields.SFMatrix4f.parseRotation(event.target.getAttribute("axisRotation"));         
            rotationMatrixWorld = sensorToWorldMatrix.mult(event.value.toMatrix());

            //create an offset that applies the current rotation in world coordinates,
            //but doesn't change the orientation of the coordinate system
            currentGizmoRotationOffset = rotationMatrixWorld.mult(sensorToWorldMatrix.inverse());           

            applyRotationGizmoTransformations();
        }

        if (event.fieldName === 'isActive' && event.value === false)
        {
            //incorporate the current rotation offset, interpreted globally, into the stored rotation value
            currentGizmoRotation = currentGizmoRotationOffset.mult(currentGizmoRotation);

            //reset current rotation offset to zero rotation
            currentGizmoRotationOffset = new x3dom.fields.SFMatrix4f();

            applyRotationGizmoTransformations();
        }
    }

    /*
     * Applies the current transformations, computed from the rotation gizmo output, to the scene
     */
    function applyRotationGizmoTransformations()
    {
        var teapotRotationNode = document.getElementById('teapotRotation');

        //incorporate the current rotation offset, interpreted globally, into the stored rotation value
        var transformMatrix = currentGizmoRotationOffset.mult(currentGizmoRotation);

        //set matrix value in column major format, as required by the MatrixTransform node
        teapotRotationNode.setFieldValue("matrix", transformMatrix.transpose());
    }
  </script>
        <body> 

<x3d width='1000px' height='800px'> 
        <scene> 
        <navigationInfo id="head" headlight='true' type='"EXAMINE"'></navigationInfo>
        <background  skyColor="0.7 0.7 0.7"></background>
        <directionalLight id="directional" direction='0 -1 0' on ="TRUE" intensity='2.0' shadowIntensity='0.0'>
        </directionalLight>
    <Transform translation='0 0 -0.02'>
      <Shape>
        <!-- A box -->
          <box size='5 5 0.03'/></box>
        <Appearance>
          <Material diffuseColor='1 1 1'/>
        </Appearance>
      </Shape>
    </Transform>
    <Transform translation='0 0 0'>
      <Shape>
        <!-- A box -->
          <box size='4 4 0.03'></box>
        <Appearance>
          <Material diffuseColor='0.24 0.20 0.03'/>
            <!--<ImageTexture url="./texture/dunkles_holz.jpg"></imagetexture>-->
        </Appearance>
      </Shape>
    </Transform>
    <transform id='translationHandleTransform'>
    <Transform translation='2.2 1.8 0.29'>
    <planeSensor autoOffset='true' axisRotation='1 0 0 -1.57' minPosition='-5 0' maxPosition='0 0' onoutputchange='processTranslationGizmoEvent(event)'>
                </planeSensor>
      <Shape>
        <!-- A box -->
          <box size='0.2 0.2 0.6'/></box>
        <Appearance>
          <Material diffuseColor='0.24 0.20 0.03'/>
        </Appearance>
      </Shape>
    </transform>
    </transform>
        </scene> 
    </x3d> 
        </body> 
    </html>

Я чувствую, что что-то упустил, думаю, вы, ребята, могли бы сказать.

Спасибо заблаговременно!

...