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