Always Know Where To Look

Node

Description

Three basic shapes for viewing. Select a viewpoint to reposition yourself for a closer look.

VRIGNETTE Notes

Viewpoint is your current spot within a vrignette. By defining a corresponding NavigationInfo node, you are able to move through and interact with the larger world.

Also note there are multiple ways to change a viewpoint. The example below uses Javascript to enable animation. You can also use an Anchor node to reference another spot in much the same way you would use an HTML bookmark link.

Other Nodes

NavigationInfo

Example

Select a shape to view the different geometry within the vrignette.

Code

<x3d>

<scene>

<worldInfo title="X3D Viewpoint Example">
</worldInfo>

<navigationInfo id="nav" headlight="true" transitionType="LINEAR" type="ANY">
</navigationInfo>

<viewpoint DEF="original" position="0.0 0.0 18.0" centerOfRotation="0.0 0.0 0.0">
</viewpoint>
<viewpoint id="boxView" position="0.0 0.0 7.0" centerOfRotation="0.0 0.0 0.0">
</viewpoint>
<viewpoint id="sphereView" position="-5.0 0.0 7.0" centerOfRotation="-5.0 0.0 0.0">
</viewpoint>
<viewpoint id="cylinderView" position="5.0 0.0 7.0" centerOfRotation="5.0 0.0 0.0">
</viewpoint>

<transform rotation="0 1 0 0.385">
<shape>
<appearance>
<material diffuseColor="0.5 0.0 0.0">
</material>
</appearance>
<box>
</box>
</shape>
</transform>

<transform translation="-5.0 0.0 0.0" rotation="0 0 1 0.385">
<shape>
<appearance>
<material diffuseColor="0.0 0.5 0.0">
</material>
</appearance>
<cone>
</cone>
</shape>
</transform>

<transform translation="5.0 0.0 0.0" rotation="1 0 0 0.385">
<shape>
<appearance>
<material diffuseColor="0.0 0.5 0.5">
</material>
</appearance>
<cylinder>
</cylinder>
</shape>
</transform>

<background skyColor="0.20 0.20 0.20" groundColor="0.20 0.20 0.20">
</background>

</scene>

</x3d>

<!----- HTML ----->
<div>
<button type="button" onClick="setViewpoint(0)">
Cone
</button>
<button type="button" onClick="setViewpoint(1)">
Box
</button>
<button type="button" onClick="setViewpoint(2)">
Cylinder
</button>
</div>

<!----- Javascript ----->

<script>
function setViewpoint(ndx) {
	let view;
	let navinfo;
	
	switch(ndx){
	 case 0:
	 view = document.getElementById("sphereView");
	 break;
	
	 case 1:
	 view = document.getElementById("boxView");
	 break;
	
	 case 2:
	 view = document.getElementById("cylinderView");
	 break;
	}
	
	view.setAttribute("set_bind", "true");
	navinfo = document.getElementById("nav");
	navinfo.setAttribute("set_bind","true");
	
}
</script>