QT quick 3D learning: use mouse and keyboard to control node position and direction

（ Be careful , Open source Qt Quick 3D It is not used by dogs GPL agreement ）

Qt Quick 3D The module provides   WasdController Type to control the position and orientation of the nodes , The controlled node is generally Camera.（ The related documents ：https://doc.qt.io/qt-6/qml-qtquick3d-helpers-wasdcontroller.html  ; Document suggestion comparison Qt The latest version documents are read together with your own development version documents , because Qt Quick 3D As a Qt5.14/5.15 The new module just came out , Many places have not given detailed instructions at the beginning , In the later version, the official version is gradually improved ）

The type is located in QtQuick3D.Helpers Subspecies ：

import QtQuick3D.Helpers 1.15

Can pass WASD Or the arrow keys control the node translation , Drag the mouse to change the direction of the node ：

W or up -  Forward 
S or down -  back off 
A or left -  Move left 
D or right -  Move right 
R or page up -  Move upward 
F or page down -  Move down 

But here's the thing , Only  WasdController Only when you have the focus can you respond to the key press event , You can call  forceActiveFocus() Function to make it the current focus object . And that is WasdController The mouse wheel event is not handled , You can be on your own View3D Add a layer MouseArea To handle wheel events for forward and backward .

A simple example ：

import QtQuick 2.15
import QtQuick3D 1.15
import QtQuick3D.Helpers 1.15

View3D {
    id: control

    // background 
    environment: SceneEnvironment {
        clearColor: "darkGreen"
        backgroundMode: SceneEnvironment.Color
    }

    // Observation camera 
    PerspectiveCamera {
        id: camera
        z: 100
    }

    // light 
    DirectionalLight {
        eulerRotation.y: 45
    }

    // Model 
    Model {
        id: cube
        position: Qt.vector3d(0, 0, 0)
        source: "#Cube"
        scale: Qt.vector3d(0.2, 0.1, 0.2)
        materials: [
            DefaultMaterial {
                diffuseColor: "cyan"
            }
        ]
    }

    // Use the keyboard and mouse to control the node orientation 
    //W or up -  Forward 
    //S or down -  back off 
    //A or left -  Move left 
    //D or right -  Move right 
    //R or page up -  Move upward 
    //F or page down -  Move down 
    //shift Press simultaneously with other keys , Movement can accelerate 
    // Be careful ： Key control requires WasdController Only when there is focus 
    // Hold down the left mouse button and drag to change the direction , Unfortunately, the roller has no forward and backward effect 
    WasdController {
        id: wasd_control
        // Specify controlled objects , Usually the controlled node is the camera 
        controlledObject: camera //cube
    }

    // Click make control Focus of attention , To accept key control 
    MouseArea {
        visible: !wasd_control.activeFocus
        anchors.fill: parent
        onClicked: {
            wasd_control.forceActiveFocus()
        }
    }
}

We can also use Keys and MouseArea And other types get mouse and keyboard events by themselves , To set the position and direction of the node . A simple example ：

import QtQuick 2.15
import QtQuick3D 1.15
import QtQuick3D.Helpers 1.15

View3D {
    id: control

    // The controlled node can be set as camera perhaps model
    property var controlNode: camera //cube

    // background 
    environment: SceneEnvironment {
        clearColor: "darkGreen"
        backgroundMode: SceneEnvironment.Color
    }

    // Observation camera 
    PerspectiveCamera {
        id: camera
        z: 100
    }

    // light 
    DirectionalLight {
        eulerRotation.y: 45
    }

    // Model 
    Model {
        id: cube
        position: Qt.vector3d(0, 0, 0)
        source: "#Cube"
        scale: Qt.vector3d(0.2, 0.1, 0.2)
        materials: [
            DefaultMaterial {
                diffuseColor: "cyan"
            }
        ]
    }

    // Mouse operation control node 
    MouseArea {
        anchors.fill: parent
        hoverEnabled: false
        property int xTemp: 0
        property int yTemp: 0
        // Scroll wheel zoom 
        onWheel: {
            if(wheel.angleDelta.y>0){
                camera.z-=5
            }else{
                camera.z+=5
            }
        }
        onPressed: {
            xTemp = mouse.x
            yTemp = mouse.y
        }
        // Press and hold the mouse to move the rotation direction 
        onPositionChanged: {
            // Euler Angle 
            // Around the x pivot  pitch Pitch angle 
            // Around the y pivot  yaw Yaw angle 
            // Around the z pivot  roll Rolling angle 
            // Drag up and down y The value is around x pivot 
            controlNode.eulerRotation.x = controlNode.eulerRotation.x+(yTemp-mouse.y)*0.3
            // Drag left and right x The value is around y pivot 
            controlNode.eulerRotation.y = controlNode.eulerRotation.y+(xTemp-mouse.x)*0.3
            xTemp = mouse.x
            yTemp = mouse.y
        }
    }

    // Shortcut keys control node movement 
    Shortcut {
        sequences: ["W","Up"]
        onActivated: {
            controlNode.y += 3;
        }
    }
    Shortcut {
        sequences: ["A","Left"]
        onActivated: {
            controlNode.x -= 3;
        }
    }
    Shortcut {
        sequences: ["S","Down"]
        onActivated: {
            controlNode.y -= 3;
        }
    }
    Shortcut {
        sequences: ["D","Right"]
        onActivated: {
            controlNode.x += 3;
        }
    }
}

This article code

Github（NodeControl.qml）： https://github.com/gongjianbo/HelloQtQuick3D

In this paper, the reference

Qt file ：https://doc.qt.io/qt-6/qml-qtquick3d-helpers-wasdcontroller.html