Building your first 3D game with the Q3D plugin

2

Index

Attached Files

The following files have been attached to this tutorial:

.capx

q3dsamplegame.capx

Download now 227.95 KB

Stats

19,840 visits, 40,987 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 14 Mar, 2017. Last updated 19 Feb, 2019

Part I – The Layout

You will need to add the following objects to the layout:

A Q3DMaster object. Set the following properties:

Position: 0,0

Size: 5000,5000

Render Mode: Behind (this will allow you to render 2D UI above the 3D game)

Scale/Position: Autofit

Camera: Perspective (if you leave this as orthogonal, you will lose all of the 3D coolness)

Spawn Light: No (By default the master object creates a light so that you can see what you are playing with when you hit “run”. When you create a light of your own, you should turn this one off, because if you leave it on you will have a difficult time getting the lighting right in your scene.)

A Q3Dlight object called “skylight”. Set the following properties:

Position: -341, 651

Z Position: 1000

Debug: Off

Type: Directional

Intensity: 1

Target: 0,0,0 (Directional lights are like the sun – they illuminate everything with parallel rays, and don’t get weaker with distance. To change the direction of the light, adjust the “position” and/or the “target”.)

Cast Shadows: Yes (This is HUGELY GPU-intensive. Shadows can crush your performance if you don’t carefully optimize them. If you turn shadows off, you should see framerate immediately jump to 60 fps.)

Shadow Cam Far: 8000

Shadow Cam Size: 6000,6000

Shadow Map Size: 3000,3000 (This will give a 2-pixel blur. If you increase the size of the shadow map to 6000,6000, you will get a 1-pixel blur, but will probably suffer a huge framerate hit.)

A Q3Dlight object called “carglow”. We will use this for a cool glow effect and to show how point lights work. Set the following properties:

Debug: Off

Type: Point

Color: (any color that looks cool!)

Intensity: 1

Cast Shadows: Yes (This is HUGELY GPU-intensive. Shadows can crush your performance if you don’t carefully optimize them. If you turn shadows off, you should see framerate immediately jump to 60 fps.)

A Q3Dmodel object called “carbody”. Set the following properties:

Size: 100,100

Behaviors: Q3DOimoPhysics

Immovable: No

Physics body: Use Collider Shape or Box (Since we are making a box, these are the same.)

Prevent rotation: No

Density: 0.3

Friction: 0.5 (This doesn’t really matter, as the car body won’t be sliding along other surfaces.)

Elasticity: 0.2 (This doesn’t really matter either, as the car body won’t be bouncing off of things.)

Linear Damping: 0 (This could be used to simulate air drag.)

Angular Damping: 0.01 (This slows down the car’s rotation over time.)

Initial state: Enabled

Debug body: Disabled (If you see funky colors, it is probably because you forgot to disable this!)

Allow Sleep ?: Yes

Allowable penetration: 0.005

Push-out compliance: 0.5

Stickiness: 0

Z Size: 40

B. Box Debug: Off (If you see funky colors, it is probably because you forgot to disable this!)

Collider Debug: Off (If you see funky colors, it is probably because you forgot to disable this!)

Use Model: Yes

Model Filename: Cube.geom (We will be defining what “Cube.geom” means in the event sheet – it is one of the built-in shapes in three.js, as described in the Q3D manual.)

Model Auto Load: Yes

Shadows: Cast & Receive (If you are having performance problems, turn off shadows!)

A Q3Dmodel object called “building”. Set all of the same properties as the “carbody” object, and add the Q3DOimoPhysics behavior. The only change is:

Immovable: Yes

A Q3Dmodel object called “ground”. Set all of the same properties as the “building” object, including “Immovable: Yes”:

Size: 5000,5000

Z Size: 100

A Q3Dmodel object called “wheel”. Add an instance variable called “isrightwheel” = 0.

Size: 60,20

Behaviors: Q3DOimoPhysics

Immovable: No

Physics body: Cylinder

Prevent rotation: No

Density: 0.2

Friction: 1 (This is REALLY important to tweak for wheels.)

Elasticity: 0.2 (This is REALLY important to tweak for wheels.)

Linear Damping: 0

Angular Damping: 0.2 (This is REALLY important to tweak for wheels.)

Initial state: Enabled

Debug body: Disabled (If you see funky colors, it is probably because you forgot to disable this!)

Allow Sleep ?: Yes

Allowable penetration: 0.1 (This is REALLY important to tweak for wheels.)

Push-out compliance: 0.1 (This is REALLY important to tweak for wheels.)

Stickiness: 0

Z Size: 60

B.Box Debug: Off

Collider Debug: Off

Use Model: Yes

Model Filename: Cylinder.geom (We will be defining what “Cylinder.geom” means in the event sheet – it is one of the built-in shapes in three.js, as described in the Q3D manual.)

Shadows: Cast & Receive

A Q3Dpoint object called “cameraposition”. We will move the camera to this point in the event sheet. Its initial properties don’t matter.

  • 7 Comments

  • Order by
Want to leave a comment? Login or Register an account!