Working with Camera / Blender

This page contains the information on how to setup Blender's cameras to be used with Verge3D.

Setting Up in Blender

Simply add the camera to the scene and assign it as active in the Scene Properties:

Setting active camera in Blender

This camera will be used to render your scene by default, though you can add more cameras and switch between them in runtime using the set active camera puzzle.

Verge3D supports the following camera types:

Camera Settings

Verge3D supports the following camera settings:

Camera settings in Blender
Type
Camera type, either Perspective or Orthographic.
Clip Start / Clip End
Camera visibility range (aka clipping distance). To eliminate z-fighting artifacts set Clip Start value as high as possible and Clip End value as low as possible.
Sensor Fit
How the viewport will react to changing its dimensions (or device orientation). This setting has somewhat different meaning in Verge3D.
Auto
Use Vertical viewport fit for landscape and Horizontal fit for portrait orientation of the viewport. This mode is good for scenes with equal horizontal and vertical dimensions, as it prevents objects from being cut by the camera.
Horizontal
Fit horizontal field of view. This mode is good for wide scenes. By fixing horizontal field of view you will be ensured that your object will fit into the camera in both landscape (desktops/laptops) and portrait (phones) modes.
Vertical
Fit vertical field of view. Contrary to Horizontal, this mode is good for tall scenes.
Controls
Specify what type of controls will be assigned to the camera in Verge3D:
  • Orbit — targeted (aka pivoted, orbited) camera view. See below.
  • Flying — free-flight view.
  • First-Person — first-person view with familiar character controls (WASD).
  • Disable — disable any controls. Specify if you're going to move your camera with animations, Puzzles, or JavaScript.
Allow Panning
Enable/disable camera panning.
Rotation Speed
Camera rotation speed factor.
Movement Speed
Camera movement speed factor.

Orbit Camera Settings

Use Target Object/Point subpanel to adjust the settings for the orbit camera.

Orbit camera settings in Blender
Manual
You can manually set the XYZ coordinates of the pivot point (aka target) using these numerical fields. For your convenience you can use the From Cursor button to copy the current coordinates of Blender's 3D cursor.
From Object
Camera pivot object. If assigned, Verge3D uses coordinates of that object as camera pivot point. Please note, that this assignment happens just upon export, thus any movements of the pivot object (e.g. because of animation) in Verge3D won't affect the camera.
Update View
If you happen to move the camera, use this button to restore the camera's pivot point.
Min Dist, Max Dist

Distance limits for the perspective camera. In Verge3D realm, "zooming" for the perspective orbit camera means "moving forward/backwards", thus distance limits assigned to such a camera indirectly affect the min/max limits of zooming.

If you need to perform zooming by changing the camera field-of-view (FOV), while keeping the camera in place, use the set camera param puzzle.

Min Zoom, Max Zoom
Zoom limits for the orthographic camera. In Verge3D realm, "zooming" for the orthographic orbit camera means "making camera volume larger/smaller". The camera itself don't move.
Vertical Rotation Limits: Min Angle, Max Angle
These values limit the vertical (up-down) camera rotation.
Horizontal Rotation Limits: Min Angle, Max Angle
These values limit the horizontal (left-right) camera rotation.

First-Person Camera Settings

The following settings allow you to setup first-person camera controls without using Puzzles or JavaScript.

Firstperson camera settings in Blender
Collision Material

Collision material which will be used to control the zone the camera can move within. Basically, the zone above this material is walkable, while everything outside is forbidden for movement. If you don't specify this value, the camera will operate in free-flight mode — Flying.

If you don't want the collision object to be visible to the user, just hide it in Blender (use the render switcher with camera icon on it).

Hide firstperson collision object in Blender
Gaze Level
First-person camera "gaze" (or "head"/"eyes") level.
Story Height
Maximum height of the story. Specify if you need multiple floors in your scene, such as two-level cottage or large shopping mall.
Enable PointerLock
Enable the pointer lock feature to capture the mouse pointer upon app start. The user should click somewhere on the screen to lock up the cursor and move in 3D space without the need to click/drag with the mouse buttons.

Check out this basic example. The user moves on the following map where white field (AllowedZone) is allowed and red means the area is forbidden. You can design some walls above the red area if you wish, or stairs to the second floor, considering the next floor would be higher than 3 meters. Distance from the floor to the character eyes is 1.75 meters.

Setting up firstperson camera in Blender

In this example we also use the pointer-lock feature to make navigation easier for the user.

See also a more advanced real estate experience which is called Firstperson Camera.

Fit to Camera Edge

Fit to Camera Edge is a technique to draw screen-space UI elements based on Blender models. This approach to UI design is more “native” to the 3D artist than using HTML/CSS, and does not require external tools. But there is more in it: since the UI elements are genuine 3D objects, you can apply shaders, lighting, animation, morphing – you name it – making them truly interactive and seamlessly integrated into the scene.

When you parent some object to the camera, the following settings appear on the Object Properties panel:

Fit to Camera Edge properties
Horizontal
Horizontal canvas edge to fit object to. None — no horizontal fit, Left — fit to left edge, Right — fit to right edge, Stretch — scale object horizontally to fit on the screen.
Vertical
Vertical canvas edge to fit object to. None — no vertical fit, Top — fit to top edge, Bottom — fit to bottom edge, Stretch — scale object vertically to fit on the screen.
Shape
Canvas fit shape. Box — use object's bounding box, Sphere — use object's bounding, Point — ignore object boundings and use its center to fit the object on the screen.
Fit Offset
Additional offset used to fit object on the screen. Effectively, this value extends object bounding (box or sphere) by the specified absolute value.

To fix possible issues with camera fit, clear the object's Parent Inverse matrix:

Clear parent inverse matrix in Blender

Camera Control with Puzzles

You can use camera puzzles to control your camera in real time.

Got Questions?

Feel free to ask on the forums!