WebGL 3D Window/Viewport

iv.window

This is 3D Viewport object, associated with canvas, it has it's own WebGL context and 3d scene. Handling of mouse and touches is performed automatically.

Constructor

Canvas should be passed to 3d window creation function. In order to support transparency properly, canvas may need special style in css.

All parameters are in object:

canvas	HTML canvas element,
color	Background Color.
callback	Callback function. Same to addRefTarget.

If you want to load 3d file, add parameters described in .load method. 

var info={};
info.canvas=document.getElementById("ivwindow3d");
info.color=0xe5e5e5;
var v=new iv.window(info);

var view3d=new iv.window({canvas:document.getElementById("ivwindow3d"),file:"tree.iv3d",color:0x777777,path:"1/"});

Properties

gl	[readonly] WebGL context
space	3d Space. This property is maintained by 3d window.
cfgBkColor	The background  Color property sets the background color of 3d window. Alpha component is not used. Set property to null for transparent background.
cfgResources	Path to resource files. This folder may contain gizmo objects, 3d fonts, etc. "res/" is default value.
cfgShadows	true if shadows are enabled. Use setShadows to set shadows on/off.
Viewport Navigation
cfgOrbitMode	0 or 1. Defines how rotation around vertical axis is performed. We may rotate around screen space vertical axis or around world space axis. World axis is default choice.
cfgRotateMouseHit	true to rotate viewport around mouse cursor, false - rotate around camera target point.
cfgAutoSpin	&1 - auto rotation on mouse up, &2 - auto rotation after short delay
cfgSpinSpeed	Speed of model spinning after releasing mouse button. Value is related to default speed. 1 is default value, decrease this value to decrease speed.
cfgMouseDelta	Mouse distance to activate mouse move. Movements less than this distance will not cause viewport rotation for instance.
cfgButtons	array or 3 numbers. Each item defines action for left, right and middle mouse button respectively: 0 no action 1 orbit 2 zoom via camera dolly 3 zoom via camera FOV 4 camera pan 0x100, 0x200, 0x400 rotate predefined object in x,y,z axis. These buttons may be configured right after 3d window creation.
cfgMouseWheel	Mouse wheel action. 2 zoom via camera dolly 3 zoom via camera FOV
cfgMinDistance	Minimum distance from camera to scene center. Used by zoom mode.
cfgMaxDistance	Maximum distance from camera to scene center. Used by zoom mode.
cfgMinVAngle	Minimum vertical camera angle in degrees. Shouldn't be less than -90. Useb by orbit mode, undefined is default. Limits work correctly only when .cfgOrbitMode is set to 1.
cfgMaxVAngle	Maximum vertical camera angle in degrees. Shouldn't be more than 90.
Selections
cfgAllowSelection	true - allow selection by mouse click in 3d window. false - disable selection.
cfgSelOnDown	true - Select object on mouse down. false - select object on mouse up if there were no mouse movements. false is default.
clrSelection	Array of selection color and values. All items in array are from 0 to 1. 0,1,2 Highlight RGB color components for selected object. 3 Mixing factor of highlight color and normal colors. 4 Opacity of select object. 1 - is default. 5 Opacity of non selected objects 1 - is default.
cfgXRayAlways	true - always show non selected objects in transparent mode (clrSelection[5] ), false - 5th item of clrSelection will be used only in case if at least one object is selected.
Editor
cfgEditorCrd	Editor coordinate system local Transform objects in Local coordinate system world Transform objects in World coordinate system parent Transform objects in Parent coordinate system
cfgEditorMode	3D Editor mode "" or "select" Selection mode. Default value "move" Object move mode "rotate" Object rotate mode "scale" Object scale mode
cfgEditorAxis	Active axis.
Clipping Planes
cfgClipPlaneColor	RGBA Color of rectangular clipping plane. alpha component is an opacity of plane.
cfgClipBorderColor	RGB Color of clipping plane border.
cfgClipLineColor	RGB Color of clip contour. Used by clipping planes. This contour is produced by intersection of clipping plane with objects. Set to null to disable contour.
cfgClipCapsColor	RGB Color of cross section. Set to null to use color object intersected by clipping plane. null is default value.
cfgClipCapsByObj	Process caps independently for each object. In this case each object should be a solid. This is preferably setting.
Miscellaneous
transitions	list of active animations. For instance camera transition is in this list when viewport smoothly changes camera.

Camera limits:

view3d=new iv.window(info);
view3d.cfgMaxVAngle=80;view3d.cfgMinVAngle=-80;
view3d.cfgMinDistance=1;view3d.cfgMaxDistance=10;

Load 3d Space

URL to 3d data may be passed during window creation or later. 3D data may be loaded multiple times. Old space will be removed on receiving response from server. New file may be merged with existing objects.

.load(file, {})

Optional parameters:

.loadObject(file,{})

Method is used to add frequently used 3d objects to scene. Despite name, object is not a single 3d mesh, it may be a complex 3d model with it's own materials and hierarchy. File is loaded only once. Next call to this function with same name will be executed instantly - meshes are instanced, nodes are duplciated.

Optional parameters:

return value is new node. If object is not ready yet, null is returned.

Notifications

.addRefTarget(f)

Method registers the specified function or object as notification callback.

Function receives one event object as argument with following properties:

If the method succeeds, the return value is true.

Learn more about notification events.

Viewpoint/Camera

.getView(view)

Method retrieves current viewpoint.

Method returns current camera position in the following format:

 This object may be passed to .setView method, may be converted to string and stored in database.

.setView(view,flags)

Method changes current viewpoint.

To switch from orthogonal to perspective, use setOrtho method.

.setStdView(viewId,flags)

Method sets standard view, where standard view is defined by string: “left”, “right”, ”top”, ”bottom”, “front”, “back”.

.getStdView(viewId)

Method returns view definition for for standard view,

Sample

<span onclick="view3d.zoomToFit(view3d.getStdView('front'),iv.VIEW_TRANSITION);">[VIEW All]</span>	  

.setModelView(id,flags)

Method sets predefined model view.

.setOrtho(ortho)

Method switches between orthogonal or perspective view mode.

This method calculates scale or fov based on current view. 

.isOrtho()

Method returns true if current view is in orthogonal mode.  

.zoomToFit(view,flags)

Method fits all objects (or visible objects) into 3d window.

.zoomToFitBox(view,box,flags) 

Method fits area defined by bounding box into 3d window.

.getViewToBox(view,box)

Method computes iv.viewInfo object required to fit box.

Method returns iv.viewInfo object. You may use returned view with .setView method.

.setDefView(flags)

Sets default view, this is the view embedded into 3d file.

.invalidate(flags)

Method marks viewport as invalid and scheduled update for the next frame. This is not an immediate update. Real rendering will be executed on the next drawing cycle.

Resizing

.setViewSize(width,height,bufWidth,bufHeight)

Method resizes canvas and associated WebGL frame buffer.

After changes in HTML layout or when you want to change size of 3d window, you should call view.setViewSize(width,height). This function changes size of video buffer via changing width/height properties of canvas element. Size of canvas is changes via style attribute.

If bufWidth or bufHeight are not specified width or height will be used.

.updateViewSize()

Method updates internal variables after changing canvas size. This function may be used if prefer to change size of canvas on your own.

Animation

.playAnimation({})

Method plays whole scene animation. All parameters are optional.

{from:, to:, type: ,speed:, count: }

Method returns animation controller. You may use it in order to stop animation.

function ivPlayAnimation()
	  {
	  view3d.playAnimation({speed:0.1,type:1,count:2,from:1,to:0});
	  }

In order to reverse animation, swap from and to. In order to stop endless animation use .removeAnimation method.

If you want to animate only sub-tree of whole scene, use the following code:

var r=new iv.anim.node(node,info);
view.addAnimation(r);
	  

where node – node to animate, info – parametes, described few lines above.

.removeAnimation(a)

Method removes already runned animation.

If the method succeeds, the return value is true.

.addAnimation(a)

Method inserts animation object into list of active animations.

Animation object should have .animate method.

.removeAnimationType(type,finish)

Method removes animation by type.

If the method succeeds and animtion was removed, the return value is true.

.getAnimation(type)

Method retrives active animation of specific type.

If animation was not found, the return value is null.

Hit testing

.hitTest(x,y)

Method performs hit testing and retrieves list of nodes  below mouse pointer defined by x, y coordinates. This method is part of extended API.

If at least one node was detected, object with following variables will be returned returned.

Additional information about hit point, like normal, triangle are available in nodes array. Closest item is in first item.

Each item in nodes array:

.getRay(x,y)

Method computes ray for current view and specified mouse coordinates.

Method returns ray as array of 6 numbers. First 3 numebrs is origin of ray, next 3 numbers - normalized direction.

.setLights(light)

Method computes ray for current view and specified mouse coordinates.

Each item is JS object, all parameters are optional.

var l=[
  {"color":[0.5,0.5,0.5],"dir":[-0.57735,-0.57735,-0.57735],"type":1},
  {"color":[0.8,0.8,0.9],"dir":[0.57735,0.57735,-0.57735],"type":1},
  {"color":[0.9,0.9,0.9],"dir":[-0.242536,0,0.970143],"type":1}];
view3d.setLights(l);
	  

Shadows are not supported for standard lights, please create nodes with light object.

.setMaterials(b)

Method sets default material on/off.

.getMaterials()

Method returns true if default material is used.

.setDoubleSided(b)

Method sets double sided rendering on/off.

.getDoubleSided()

Method returns true if double sided rendering is on.

.setShadows(b)

Method sets real-time shadows on/off.

.getShadows()

Method returns true if real-times shadows are enabled. 

.searchNode(name)

Method searches node by name in whole scene tree.

null is returned if such node was not found. If you need to search for node in subtree, use iv.node.search method.

.setRMode(name)

Method sets new render mode.

false is returned if such mode is not found.