-
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
