1

Is it possible to translate a QML Rectangle on the Z axis similar to how we can do in HTML with CSS transform:translateZ() and transform:translate3d()?

Applying transform: Translate {x: 0; y: 0; z: 100} on a Rectangle throws an error that the z property isn't defined.

I am able to apply transform: Rotation{} to a Rectangle with a z-axis rotation and it looks 3D. I was hoping I could translate things in 3D as well.

Is there a way to do it?

EDIT: I tried setting a Matrix4x4 like this:

        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(
                1,0,0,0,
                0,1,0,0,
                0,0,1,10,
                0,0,0,1
            )
        }

I set the number 10 where I believe the Z translation is, but the Rectangle just disappears instead of getting a little closer to the camera.

trusktr
  • 44,284
  • 53
  • 191
  • 263

1 Answers1

0

Applying transform: Translate {x: 0; y: 0; z: 100} on a Rectangle throws an error as expected as Translate only has only x and y properties (See http://doc.qt.io/qt-5/qml-qtquick-translate.html).

The Transform does not correspond with how you are trying to use it as z is not the position along the z-axis. z is the "stacking order" which is used to control which items are drawn on top or below other items (http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop).

If you wanted to let your Rectangle appear "a little closer to the camera", Scale seems like a possible Transform to use (http://doc.qt.io/qt-5/qml-qtquick-scale.html) or just use the item's scale property (http://doc.qt.io/qt-5/qml-qtquick-item.html#scale-prop).

This answer might also be helpful to you as someone else had a similar question. It illustrates how you can rotate along different axis. For example, You could do something like: transform: Rotation { origin.x: 50; origin.y: 55; axis { x: 0; y: 1; z: 0 } angle: 60}.

Note though that it is not possible to actually translate a QML Rectangle along the "z-axis". So if your goal is to create a 3D scene in QML, two possible options are Qt Canvas3D or the Qt3D module. If you want to use three.js check out this post

Community
  • 1
  • 1
nfranklin
  • 385
  • 1
  • 8
  • Using scale for this is a hack. I want to rotate things and move them around in 3D space, similar to this HTML5 example: http://threejs.org/examples/#css3d_periodictable Click on "SPHERE" and/or rotate the scene to see that it's in 3D. – trusktr Oct 28 '15 at 23:51
  • You could do something like: 'transform: Rotation { origin.x: 50; origin.y: 55; axis { x: 1; y: 1; z: 0 } angle: 60}'. But I don't think that is what you are looking for based on the example you linked to. If you are wanting to use three.js check out [Qt Canvas 3D](http://doc.qt.io/qt-5/qtcanvas3d-index.html) and this post https://blog.qt.io/blog/2015/06/05/porting-three-js-code-to-canvas3d/ – nfranklin Oct 29 '15 at 12:20
  • If you want to create a 3D scene in QML, two options are [Qt Canvas3D](http://doc.qt.io/qt-5/qtcanvas3d-index.html) or the [Qt3D](http://doc.qt.io/qt-5/qt3d-qmlmodule.html) module – nfranklin Oct 29 '15 at 12:51
  • Can I use a Rectangle inside of Qt3D (I think Canvas 3D is out of the picture. I still want the benefit of Item, Rectangle, etc, but simply want to manipulate them in 3D space like we can do with HTML DOM and CSS transforms. – trusktr Oct 29 '15 at 19:33
  • Seems like QML Transform type should support 3D to at least be on the same level as HTML in that regard. – trusktr Oct 29 '15 at 19:33
  • No, AFAIK you can't use |Rectangle](http://doc.qt.io/qt-5/qml-qtquick-rectangle.html) in Qt3D. But Qt 3D rendering can be combined with Qt Quick 2D elements. Check out [this](http://www.kdab.com/overview-qt3d-2-0-part-2/) (see the bit on "Qt Quick 2 Integration"). and see the http://doc.qt.io/qt-5/qt3drenderer-planets-qml-example.html for an example – nfranklin Oct 29 '15 at 21:37
  • Looks like the web is winning! We can mix WebGL with DOM by matching both coordinate spaces together as in this example: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ (which would be equivalent to mixing Rectangles, etc, with a Qt3D scene if/when they add the last Z axis for transforms). – trusktr Oct 29 '15 at 21:41