Eye Control

Contents

Introduction

We view the 3D scene from the Eye. When we move the Eye, what the plugin area shows will change. There are 2 important points relevant to Eye control:

Diagram of Eye point and target point

Getting and setting Eye parameters

You can get the Eye parameters using GetPosition(), GetOrientation(), GetTargetPosition(), and GetTargetDistance().

Source: eye control example, function GetEyeParameters()

// Get the Eye
var eye = germ.GetEye();
 
// Get Eye parameters
var eyePos = eye.GetPosition();			// Eye position
var ort = eye.GetOrientation();			// orientation
var targetPos = eye.GetTargetPosition();	// target position
var targetDist = eye.GetTargetDistance();	// distance between Eye & target
 
// Show Eye parameters
alert("Eye position: "    + eyePos.ToString() +
	"\nOrientation: "     + ort.ToString() +
	"\nTarget position: " + targetPos.ToString() +
	"\nTarget distance: " + targetDist);

You can set the Eye parameters in a similar way.

Source: eye control example, function SetEyeParameters()

// Get the Eye
var eye = germ.GetEye();
 
// Set Eye parameters
eye.SetPosition(-47.7, 20.14, 26.11);
eye.SetOrientation(-0.410, -1.255, 0);
eye.SetTargetDistance(50.5, false);	// this line moves the target to appropriate position

GermaniumWeb does not allow you to roll the Eye sideways (i.e. setting the Z-component of Eye orientation). It will automatically re-orient the Eye to upright position in such cases.

Using EyeParams

You can get the current Eye parameters as an EyeParams object. You may want to do this to store typical views often used in your application.

Source: eye control example, function GetAsEyeParams()

var eyeParams = germ.GetEye().GetParams();
alert("EyeParams: " + eyeParams.ToString());

You can set Eye parameters from an EyeParams object as follows.

Source: eye control example, function SetFromEyeParams()

// Create an EyeParams object
var eyeParams = germ.CreateEyeParams();
eyeParams.SetPosition(47.7, 20.14, 26.11);
eyeParams.SetOrientation(-0.410, 1.255, 0);
eyeParams.SetTargetDistance(50.5);	// this line moves the target to appropriate position
 
// Set to Eye
germ.GetEye().SetParams(eyeParams);

Gliding

You can animate the movement of the Eye or the target using a Glide__() function. You can glide to a specific position, a BBL object (a building, a block, or a level), or a placemark.

Note that setting Eye parameters using a Set__() function will move the Eye instantaneously (i.e. without animation). Use a Glide__() function if you want an animated transition.

You can interrupt an ongoing glide animation using FinishGlide() and CancelGlide().

Note: Since API 1.4, you can use convenient glide functions. See the section Convenient gliding below.

To a position

You can glide the Eye to a position.

germ.GetEye().GlideEyeToPos(0, 0, 0); // Move the eye to (0, 0, 0)

You can also glide the target to a position.

germ.GetEye().GlideTargetToPos(0, 0, 0); // Make the eye look at (0, 0, 0)

Alternatively, you can glide to an EyeParams object using GlideEyeToEyeParams() or GlideTargetToEyeParams().

To a BBL object

You can glide the Eye to fit all visible BBL objects into the plugin area. Note that target distance of the Eye may be changed in the process.

Source: eye control example, function GlideEyeToVisibleBBL()

germ.GetEye().GlideEyeToVisibleBBL();

You can also glide the Eye to fit a specific BBL object. For example, you can glide to the block with the BBL Id "OFFICE" within the building with the BBL Id "GM" as follows.

Source: eye control example, function GlideEyeToBlock()

var block = germ.GetBlockByBBLId("GM", "OFFICE");	// get a block
germ.GetEye().GlideEyeToBlock(block);

To a placemark

You can glide the Eye to fit a placemark into the plugin area. Note that target distance of the Eye may be changed in the process.

Source: eye control example, function GlideEyeToPlacemark()

var placemark = germ.GetPlacemarkByIndex(1);
germ.GetEye().GlideEyeToVisualObject(placemark);

If you do not want target distance of the Eye changed, you can glide the target to the placemark position instead.

Source: eye control example, function GlideTargetToPlacemark()

var placemark = germ.GetPlacemarkByIndex(1);
germ.GetEye().GlideTargetToVisualObject(placemark);

Convenient gliding

Since API 1.4, you can use glide functions that are more convenient to use:

GlideEyeTo()

You can glide the Eye to a position using GlideEyeTo() as follows.

Source: eye control example, function UsingGlideEyeTo()

// specify position as a float array
germ.GetEye().GlideEyeTo({
	position: [0, 0, 0]
});

GlideTargetTo()

Similarly, you can glide the target to a position using GlideTargetTo() as follows.

Source: eye control example, function UsingGlideTargetTo()

// specify position as Coordinates object
germ.GetEye().GlideTargetTo({
	position: germ.CreateCoordinates(0, 0, 0)
});

GlideEyeToFit()

You can glide the Eye to fit a BBL object using GlideEyeToFit() as follows.

Source: eye control example, function ConvenientFitBBLObject()

germ.GetEye().GlideEyeToFit({
	block: germ.GetBlockByBBLId("GM", "OFFICE")
});

You can glide the Eye to fit a placemark as follows.

Source: eye control example, function ConvenientFitPlacemark()

germ.GetEye().GlideEyeToFit({
	placemark: germ.GetPlacemarkByIndex(1)
});

Specifying callback

You can also specify a callback function to be executed right after the glide ends. You can use an anonymous function like the following.

Source: eye control example, function SpecifyAnonymousCallback()

germ.GetEye().GlideEyeTo({
	position: [0, 0, 0],
	endCallback: function (bGlideCompleted) {
			alert("[Anonymous function] Glide ends, but was it completed? " + bGlideCompleted);
		}
});

Your callback function should expect a boolean value (bGlideCompleted in the sample code above). If the glide was completed (that is, the Eye reaches glide destination), the value is true; if the glide was interrupted (for example, if the end-user presses Esc key to cancel the glide), it is false.

You can also use a named function.

Source: eye control example

function MyCallback(bGlideCompleted)
{
	alert("[MyCallback function] Glide ends, but was it completed? " + bGlideCompleted);
}
 
function SpecifyNamedCallback()
{
	germ.GetEye().GlideEyeTo({
		position: [0, 0, 0],
		endCallback: MyCallback
	});
}

Specifying animation parameters

You can set the following parameters to customize the glide animation:

Source: eye control example, function GlideWithAnimationParameters()

var theEye = germ.GetEye();
var currPos = theEye.GetPosition();
 
// Set values for animation parameters according to what the user specifies
theEye.GlideEyeTo({
	position         : [currPos.x+20 , currPos.y , currPos.z]
	,useEaseIn       : document.getElementById("chkUseEaseIn").checked	,useEaseOut      : document.getElementById("chkUseEaseOut").checked	,useParabola     : document.getElementById("chkUseParabola").checked	,userCancellable : document.getElementById("chkUserCancellable").checked	,duration        : parseFloat( document.getElementById("txtDuration").value )	,speedMultiplier : parseFloat( document.getElementById("txtSpeedMultiplier").value )});

Advanced features

Enabling orthographic projection

Orthographic projection enabled

Source: eye control example, function ToggleOrthoProjection()

germ.GetEye().SetOrthographicProjection(true);

Hiding the grid

Note: The function Eye.HideGrid() is deprecated in API 1.4. You should instead use the function Options.SetGridVisibility(). This is discussed in the Options article.

Converting between 2D and 3D coordinates

You can use the Eye class to convert between 2D pixel coordinates and 3D scene coordinates. Please read the Coordinate System article for further details.

References

Retrieved from "http://www.germanium3d.com/code/EyeControlConcepts"

This page has been accessed 173,276 times. This page was last modified on 27 April 2010, at 09:00.


Developers


Main

API Key Registration

Developer Guide
- Introduction
- Buildings
- Point Placemarks
- Line & Polygon      PlacemarksUpdated
- Model Placemarks New
- HTMLBoxes New
- Eye Control
- Clip Planes
- Events
- Coordinate System
- Navigation Modes
- Options

API Documentation

Examples
- Applications Gallery
- Hello Germanium
- Interactive samples

More Resources
- API Release Notes
- Developer FAQ
- "A Beginner's Guide" slides
- Training Materials
- Icon Gallery
- Sample Buildings
- BBL Tree

Report Bugs