Hi all

Joshika_Namani

I am trying to build a panorama viewer using QML. I have tried using View3D, and as far as I know, View3D is used to create and rotate around 3D objects. However, I want to rotate around the screen, like in a panorama viewer. Any help would be appreciated. Thanks in advance.

Bondrusiek

Hi,
I did similar example using Qt and OpenGL. Here is a source code: https://github.com/Przemekkkth/camera-opengl-qt may be helpful.

Joshika_Namani

Hi @Bondrusiek ,
Thank you for your response. I tried to build your project, but I encountered the issue mentioned below. I have installed libqt5opengl5-dev, but I still haven't found a way to resolve the issue. Could you please assist me with this?

CMake Error at /usr/lib/x86_64-linux-gnu/cmake/Qt5/Qt5Config.cmake:28 (find_package):
  Could not find a package configuration file provided by "Qt5OpenGLWidgets"
  with any of the following names:

    Qt5OpenGLWidgetsConfig.cmake
    qt5openglwidgets-config.cmake

  Add the installation prefix of "Qt5OpenGLWidgets" to CMAKE_PREFIX_PATH or
  set "Qt5OpenGLWidgets_DIR" to a directory containing one of the above
  files.  If "Qt5OpenGLWidgets" provides a separate development package or
  SDK, be sure it has been installed.
Call Stack (most recent call first):
  CMakeLists.txt:14 (find_package)


-- Configuring incomplete, errors occurred!
See also "/path/camera-opengl-qt/CMakeFiles/CMakeOutput.log".

8Observer8

Orbit controls in Qt6 and OpenGL: source on GitHub

Demo in the browser using WebAssembly

Use mouse to control:

LMB - to rotate
MMB - to zoom in/out
RMB - to pan

Joshika_Namani

Hi @8Observer8,

Thank you for your response. I tried your example, and it's working well. As I'm new to OpenGL, I'm looking to create a screen that rotates like a Panorama Viewer, similar to this example:

Example

Thanks in advance.

johngod

Hi, you just have to rotate the camera, here is a small example that rotates the camera with the arrows keys:

import QtQuick
import QtQuick3D
import QtQuick3D.Helpers

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    View3D {
        anchors.fill: parent

        environment: SceneEnvironment {
            clearColor: "white"
            backgroundMode: SceneEnvironment.SkyBox
            antialiasingMode: SceneEnvironment.MSAA
            antialiasingQuality: SceneEnvironment.High
            lightProbe: proceduralSky
        }

        Texture {
            id: proceduralSky
            textureData: ProceduralSkyTextureData {
                sunLongitude: -115
            }
        }


        DirectionalLight {//The light will always be emitted in the direction of the light's Z axis
            castsShadow: true
            shadowFactor: 60
        }

        DirectionalLight {//The light will always be emitted in the direction of the light's Z axis
            eulerRotation.x: 180
        }

        camera: mainCamera

        PerspectiveCamera{
            id: mainCamera

        }//OrthographicCamera


        Node {
            id: node1

            Node {
                id: node2


                Model {
                    id: head
                    source: "#Sphere"
                    x: 600
                    scale: Qt.vector3d(0.52, 0.52, 0.52)
                    materials: [ DefaultMaterial {diffuseColor: "yellow"}]
                }


                Model {
                    source: "#Sphere"
                    x: -600
                    scale: Qt.vector3d(0.52, 0.52, 0.52)
                    materials: [ DefaultMaterial {diffuseColor: "red"}]
                }


                Model {
                    source: "#Sphere"
                    z: 400
                    scale: Qt.vector3d(0.52, 0.52, 0.52)
                    materials: [ DefaultMaterial {diffuseColor: "orange"}]
                }

                Model {
                    source: "#Sphere"
                    z: -400
                    scale: Qt.vector3d(0.52, 0.52, 0.52)
                    materials: [ DefaultMaterial {diffuseColor: "cyan"}]
                }

            }

        }

        focus: true

        property int deltaRotation: 3

        Keys.onPressed: function(event) {
            console.log("keys pressed in graph 3D----------------------------");
            //mainCamera


            if (event.key === Qt.Key_3 || event.key === Qt.Key_Right) {
                //entitesManager.eulerRotation.y +=deltaRotation
                mainCamera.rotate(deltaRotation*2, Qt.vector3d(0, 1, 0), Node.LocalSpace)
                event.accepted = true;
            }

            if (event.key === Qt.Key_4 || event.key === Qt.Key_Left) {
                //entitesManager.eulerRotation.y -=deltaRotation
                mainCamera.rotate(-deltaRotation*2, Qt.vector3d(0, 1, 0), Node.LocalSpace)
                //nodeYrot.rotate(-deltaRotation*2, Qt.vector3d(0, 1, 0), Node.LocalSpace)
                event.accepted = true;
            }

            if ( event.key === Qt.Key_Up) {
                //entitesManager.eulerRotation.y +=deltaRotation
                mainCamera.rotate(deltaRotation*2, Qt.vector3d(1, 0, 0), Node.LocalSpace)
                event.accepted = true;
            }

            if ( event.key === Qt.Key_Down) {
                //entitesManager.eulerRotation.y -=deltaRotation
                mainCamera.rotate(-deltaRotation*2, Qt.vector3d(1, 0, 0), Node.LocalSpace)


                //nodeYrot.rotate(-deltaRotation*2, Qt.vector3d(0, 1, 0), Node.LocalSpace)
                event.accepted = true;
            }

        }

    }//View3D

}

To rotate the scene with the mouse, you should add a MouseArea. To add a image to the scene like the example you want, you can add a skybox with a image, or a very big sphere Model centered in the camera and with a image texture. I will leave this for you to figure it out, let me know if you have more questions.

Joshika_Namani

Hi,

Thanks for your response.
I have tried your example, and it's working; I added an image through Texture, and it worked. Is it possible to navigate from one room to another, just like in the example below?

Example

Thanks in advance.

johngod

Hi
The example you posted is 3D model with camera navigating through it. It is doable but you need a bit of work, you will need a house 3D model, and load it using the balsam tool. Then you will place your camera anywhere to start. You will need to use physics to avoid wall collision, quick 3d know has a physics model that you should explore. I also have seem to they have small ground stamps that you can click and move the camera to it, this is also doable, add a Image with the "stamp" and use mouse picking to detect the stamps, then move the camera to that stamp location. Check this example for the mouse picking https://doc.qt.io/qt-6/qtquick3d-picking-example.html . Then you also have the mouse walls collision where you click in the wall and the camera moves to that direction. You can also use the mouse picking to make the camera move to the wall direction, you better check about quaternions to make the camera move to the desired locations, this is also doable but requires a bit of work.

You can have a easier alternative, instead of using the 3D model with navigation, use 3d panorama images in the textures in Model Spheres. You can have several spheres which with is own texture image, but only one should be visible at the time. Then use image stamps, when you click in one stamp, make the camera move to the next panorama image and swap visibility. Hope this helps.

Joshika_Namani

Hi @johngod,

Thank you very much! I’ll try using image stamps for navigation and upload another panorama image. In parallel, I’ll also work on the first process you mentioned.

Bondrusiek

@Joshika_Namani Which version of Qt do you use? I think that using Qt6 is a better option but here is a doc for Qt5 https://doc.qt.io/qt-5/qopenglwidget.html if you want to see.