Welcome to the first what we hope will be
a number of tutorials about QML/3d
It's important to remember
that QML/3d is still under development
so what you see in this tutorial
may have changed considerably by the time QML/3d is officially released
That being said however
this tutorial should give you some idea
of the capabilities of QML/3d as they currently stand
and give you a grounding in QML/3d development
as newer versions become available
So now i've done the boring introduction part
let's actually get down to writing some QML code
If you've already dabbled in QML
a lot of what I'm doing will be familiar to you
QML/3d files also import headers
for example the Qt 4.7 import
but in addition to that we add the labs.threed 1.0
this contains all the 3d information we'll need
Now if you're watching this tutorial
I'm sure you're fairly familiar with 3d applications as it stands
however for the newcomers
a 3d application basically needs 3 things
first up we need somewhere to actually draw stuff
in QML/3d this specified as a viewport
a viewport can be the actual window itself
or it can be an area of the window in which we are drawing 3d content
Secondly we need a camera position
The camera position specifies
what angle we're looking at the world from
where we're actually looking in 3d space
In QML/3d we have an actual camera object
here I'm setting the camera's eye position
this will give me a view from slightly above
The final thing we need for a 3d scene is and actual 3d object
and I'll also assign the mesh property of the item3d
Mesh object is an actual thing which supports a variety of file formats
.3ds files, .obj files and bezier patches
It's a monkey. It's flat shaded
but not very exciting
though you can see that I can already manipulate it in 3d space
which is quite useful
So let's do a little bit more
So here I am setting the ForceSmooth parameter
and I'm also going to assign a few more variables to this
we'll set a different scale
and give the monkey a particular position
as you can see here
I'll also move the camera slightly
and most intersetingly, we'll apply an effect
in this case the effect object I'm going to specify is the material for the mokey
Actually create a material object
and assign some properties for that object
in this case
the ambient colours
and the specular colours for the object
So, we'll just specify that in the standard kind of format
and I'll also assign the shinyness of this particular material to 200
that's a value between 0 and 255
so this is quite a shiny object
let's see what that looks like
That's much cooler
It's a shiny monkey idol!
The kind of thing that Indiana Jones would love to have on his mantlepiece
so having added one object
let's add another just for fun
we'll have to assign an ID
this time: penguin
and once again set the mesh property to mesh object
this time a file called penguin.3ds
No prizes for guessing what that is
Oh my God! A monkey has vomitted out a giant penguin!
This is part of the problem with using 3rd party models
very often they're too large
on the wrong axis
off centre
any number of problems
and what we have to do is actually correct those at the code level
Now this is a problem that is being worked on in QML/3d
but for the moment I can demonstrate a simple solution
by rescaling it
and applying a transform
and we apply a rotation 3d
we give it angle
and we apply it to a particular axis
again we do the same thing
this time a different axis
and now the penguin should be in the correct position
Low and behold
our tiny penguin is now worshiping a golden monkey idol
quite inspired really
let's make it a bit more exciting
QML/3d uses exactly the same kind of animations animations as QML
so here I'm setting a sequential animaiton
setting it to be running
and it's a number animation
and what we're going to be animating with this particular one
is the penguin tilt
which as you saw from earlier is a rotation 3d
so we'll set it to go to -45 degrees
that's an easing curve there
it just tells you how fast the animation accelerates and decelerates
gives you an idea of what it's going look loke when it actually animates
and we'll apply another animation
this time directly onto a property of the item itself
it's on the Y property there - of the parent item
and again a number animation
slightly shorter this time
and the same easing curve
It's a dancing penguin
So now our little penguin worshiper is jumping up and down and dancing
what he really needs though is some friends
if I wanted to do that normally
I'd have to cut and paste this entire section time and time and time again
which can get tiresome
so what we can do instead is create a new file
grab the imports there
take that entire Item3d
drop it in there like so
and call it "Penguin.qml"
now it needs to start with a capital P
because it's going to be invoked as a separate object of its own
there we go - I'm invoking it
and we get the same effect
but now we no longer need to have that entire big chunk of text in our main file
one of the advantages of that
is that we can quickly and easily
put multiple penguins in
each of them can be manipulated as if it were its own item
so I'll throw four penguins in
give them slightly separate positions
offset from each other
and behold
a mighty tribe of penguins
well, four ...
one of the other things we can do with QML/3d
which is very similar to QML
is use the inheritance property on animations
which is basically part of the entire structure
of the QML language
here we're encasing all the penguins in an Item3d
and anything we do to that Item3d in terms of transformations
or animations
will automatically be applied to those child items
in this case our family of penguins
so here I'll apply a transformation
rotating them slightly around the axis there
so now you can see the slight offset from the centre
and added to that
we'll add an animation
I've only been using the SequentialNumber animations here
but the full range of QML animations are available
and I could animate such properties as colour and so on
in this case we're going to be animating the transformation we just made
around the vertical axis
so the penguins, all being well
will move backwards and forwards in sync
while they jump up and down
and bow to their mighty monkey God
Behold the mightyMonkey God!
as his followers dance in obescence to his glory
it kind of makes me wish I was a disembodied monkey head really
here's the thing
I have to make a bit of a confession
to make things more interesting I've slipped in a couple of extra items here
just enough to make things just that touch cooler
check it out
monkeys dancing on a pedistal
okay, in my life it doesn't get much better than that
but, I think we can still go one better
we can give it a background image
now this is a classic example of integrating standard QML
with QML/3d
in this case using QML StandardImage
and I'm also going to throw some lights on the penguins there
just to make it a bit more exciting
let's check that out