3d Cube color picker in QML

[Etienne PERIANA]

Dear developers

I am currently developing a colour cube for 3D colour selection.

This cube rotates according to the finger movements on the screen.

However, I have some problems with some rotations of the cube. These rotations are the following:

• Rotation with a finger movement from left to right
• Rotation with a finger movement from right to left

For the colour selection I have no idea how to implement it.

I have to develop this project only in QML.

Can someone help me?

I am attaching the code of each object I created in QML and the uv mapping of the cube.

main.qml

Window {
    visible: true
    property alias scene3d: scene3d
    width: 600
    height: 600

    Scene3D
    {
        id : scene3d
        anchors.fill: parent
        focus: false
        aspects: ["render", "logic", "input"]
        hoverEnabled: true
        cameraAspectRatioMode: Scene3D.AutomaticAspectRatio

        RootEntity
        {
            id:root
        }
    }

    Model {
        id: cube
        x: -18.166
        y: 28.564
        source: "#Cube"
        z: -22.62796
        materials: cubeMaterial
        DefaultMaterial {
            id: cubeMaterial
            diffuseColor: "#4aee45"
        }
    }
}

CustomCameraController.qml

Entity{
    id: root
    property Camera camera;
    property real dt: 0.001
    property real linearSpeed: 1
    property real lookSpeed: 500

    MouseDevice {
        id: mouseDevice
        sensitivity: 0.007
    }

    MouseHandler {
        id: mh
        property vector3d upVect: Qt.vector3d(0, 1, 0)
        property point lastPos;
        property real pan;
        property real tilt;
        sourceDevice: mouseDevice

        onPanChanged: {

            if (camera.position.y < 0.5 && camera.position.y > -3.) {


                root.camera.panAboutViewCenter(-pan, upVect);

            }

            if (camera.position.y > 0.5 && camera.position.y < 3.) {

                root.camera.panAboutViewCenter(pan, upVect);

            }

            if (camera.position.y < 6. && camera.position.y > 3.) {

                root.camera.panAboutViewCenter(-pan, upVect);

            }

            if (camera.position.y > -6. && camera.position.y < -3.) {

                root.camera.panAboutViewCenter(pan, upVect);

            }

        }

        onTiltChanged: root.camera.tiltAboutViewCenter(tilt);

        onPressed: {

            lastPos = Qt.point(mouse.x, mouse.y);

        }

        onPositionChanged: {

            if (mouse.buttons === 1){ // Left button for rotation

                pan = -(mouse.x - lastPos.x) * dt * lookSpeed;
                tilt = (mouse.y - lastPos.y) * dt * lookSpeed;

            }

            lastPos = Qt.point(mouse.x, mouse.y)

        }
    }
}

**RootEntity.qml**

Entity {
id: root

Camera {
    id: mainCamera
    projectionType: CameraLens.PerspectiveProjection
    fieldOfView: 45
    aspectRatio: 16/9
    nearPlane : 0.1
    farPlane : 1000.0
    position: Qt.vector3d(0.0, 4.49373, -3.78577)
    upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
    viewCenter: cubeTransform.translation
}

CustomCameraController {
    id: mainCameraController
    camera: mainCamera
}

components: [

    DirectionalLight{
        color: "#e0eef0"
        intensity: 0.4
        enabled: true
        worldDirection: Qt.vector3d(1, 0, 0)

    },

    DirectionalLight{
        color: "#e0eef0"
        intensity: 0.4
        enabled: true
        worldDirection: Qt.vector3d(0, 1, 0)

    },

    DirectionalLight{
        color: "#e0eef0"
        intensity: 0.4
        enabled: true
        worldDirection: Qt.vector3d(-1, 0, 0)

    },

    DirectionalLight{
        color: "#e0eef0"
        intensity: 0.4
        enabled: true
        worldDirection: Qt.vector3d(0, -1, 0)

    },

    DirectionalLight{
        color: "#e0eef0"
        intensity: 0.4
        enabled: true
        worldDirection: Qt.vector3d(0, 0, 1)

    },

    DirectionalLight{
        color: "#e0eef0"
        intensity: 0.4
        enabled: true
        worldDirection: Qt.vector3d(0, 0, -1)

    },


    RenderSettings {


        Viewport {
            normalizedRect: Qt.rect(0.0, 0.0, 1.0, 1.0)

            RenderSurfaceSelector {
                CameraSelector {
                    id: cameraSelector
                    camera: mainCamera

                    FrustumCulling {

                        ClearBuffers {
                            buffers: ClearBuffers.AllBuffers
                            clearColor: "black"
                            NoDraw {}
                        }

                        LayerFilter {
                            filterMode: LayerFilter.DiscardAnyMatchingLayers
                            layers: [topLayer]
                        }

                        LayerFilter {
                            filterMode: LayerFilter.AcceptAnyMatchingLayers
                            layers: [topLayer]

                            ClearBuffers {
                                buffers: ClearBuffers.DepthBuffer
                            }
                        }
                    }
                }

            }

        }
    },

    InputSettings {}
]

Layer {
    id: topLayer
    recursive: true
}

Entity {
        id: cubeEntity


        Texture2D {
            id: cubeTexture

            TextureImage {
                source: "qrc:/texture.png"
            }
        }

        Mesh {
            id: cubeMesh

            source: "qrc:/cube.obj"
        }

        Transform {
            id: cubeTransform
        }

        ObjectPicker {
            id: cubePicker

            onClicked: {

                console.log("x : " + pick.worldIntersection.normalized().x)
                console.log("y : " + pick.worldIntersection.normalized().y)
                console.log("z : " + pick.worldIntersection.normalized().z)
                console.log("position : " + pick.position)

            }
        }

        NormalDiffuseMapMaterial{
            id: cubeMaterial
            diffuse: cubeTexture
            normal: cubeTexture
            specular: "black"
            shininess: 50
        }

        components: [cubeMesh, cubeTransform, cubeMaterial, cubePicker]

}

}

Texture uv mapping

Picture of the application