StandardCamera (camera.js)

In XML3D the concept of a camera is divided into two parts: a scene element with a transformation (like a <view> for example) and a JavaScript plugin that changes the transformation of this element, moving the camera around in the scene. We call this the camera controller.

There are many kinds of camera controllers out there. Some might let you fly through the scene and through objects, others might have constraints or collision checking. Some respond to touch input, others only to mouse or keyboard. Some rotate around a specific object to examine it, others might only allow panning in a top-down view. Or you could define a controller that uses any combination of these things.

For this reason we don't consider the camera controller to be part of XML3D. The way the camera behaves is often specific to the application or scene that you're creating and so should be part of your application code.

But! We realize that in a lot of cases a simple controller that moves the camera around based on input is all that's needed, so we provide the XML3D.StandardCamera as a plugin. Simply include it in your page alongside xml3d.js and it will automatically create a camera controller for the first <view> element that it finds, or the <view> referenced in the XML3D element's view attribute:

<script type="text/javascript" src="www.xml3d.org/xml3d/scripts/xml3d.js"></script>
<script type="text/javascript" src="www.xml3d.org/xml3d/scripts/tools/camera.js"></script>

This automatically created camera can be accessed through XML3D.StandardCamera.Instance

You can also create your own instance of XML3D.StandardCamera with some options to configure it. Creating a new instance will destroy the automatically created one. Here is the constructor and the available options:

var element = document.getElementById("mySceneElement"); // Can be a group, mesh, model or view
var camera = new XML3D.StandardCamera(element, opts);

Available configuration options (opts above):

• mode - String. Can be examine, which causes the camera to rotate around a specific point, or fly, which allows the camera to move freely through the scene
• examinePoint - XML3D.Vec3. If the camera is in "examine" mode then this is the point it will rotate around.
• rotateSpeed - Number. Determines how quickly the camera rotates in response to input. Defaults to 3.
• zoomSpeed - Number. Determines how quickly the camera zooms and pans in response to input. Defaults to 20.
• useKeys - Boolean. Toggles WSAD keyboard controls on or off. Defaults to false (off).

In addition the controller provides a few functions:

• translate(XML3D.Vec3) - Translates the camera by the given vector
• rotate(XML3D.Quat) - Rotates the camera with the given quaternion
• examine(HTMLElement) - Moves and rotates the camera to look at the given object. Also sets the examinePoint to the center of the object. The given element can be a group, mesh or model.
• lookAt(XML3D.Vec3) - Rotates the camera to look at the given point in world space.
• detach() - Causes the camera to stop listening for input
• attach() - Re-attaches the input listeners

The camera.js file also includes a TransformInterface. If you want to build your own camera controller this would be a good place to start as it handles a lot of the common tasks involved in setting the transformation of the element that the camera is bound to.

NOTE: Currently the StandardCamera doesn't support CSS transforms. If you want to set the initial position of the camera through the DOM it's best to use a <transform> element referenced from the element you're using as the camera:

<transform translation="0 0 10"></transform>
<view id="myCamera" transform="#cameraTransform"></view>