ccw (counterclockwise, ) (true false)
colorPerVertex , (true) (false). .
convex , (.. , , 180 ). true, , .
creaseAngle ( ) , . , , .
colorIndex, coordIndex, normalIndex , Color, Coordinate Normal . 0.
PointSet
. .
Color Coordinate.
<PointSet>
<Color color='1 0 0, 0 1 0, 0 0 1, 0.8 0.8 0.8'></Color>
<Coordinate point='−2 0 0, 0 0 0, 0 0 2, 0 0 4'></Coordinate>
</PointSet>
Coordinate , Color .
, . Color, emissiveColor Material.
IndexedLineSet
.
Color Coordinate. colorIndex, coordIndex.
coordIndex . 0. , (1).
colorIndex.
colorPerVertex , (false) , .
<IndexedLineSet colordIndex='0 1 2 3 −1'
colorIndex='0 1 2 3 −1'
colorPerVertex='true'>
<Coordinate point='−2 0 0, 0 0 0, 0 0 2, 0 0 4'></Coordinate>
<Color color='1 0 0, 0 1 0, 0 0 1, 0.8 0.8 0.8'></Color>
</IndexedLineSet>
Color, emissiveColor Material.
<IndexedLineSet coordIndex=''0 1 2 3 0 1 2 6 5 1 1'' colorIndex=''0 1 2 3 4 -1 5 6 0 1 -1''>
<Coordinate point=''2 0 2, 2 0 2, 2 0 -2, -2 0 2, -2 4 2, 2 4 2, 2 4 -2, -2 4 -2''></Coordinate>
|
|
<Color color=''0 0 1, 0 1 0, 0 1 1, 1 0 0, 1 0 1, 1 1 0, 1 1 1''>
</IndexedLineSet>
IndexedFaceSet
( ), .
:
IndexedFaceSet: X3DComposedGeometryNode { MFInt32 [in] set_colorIndex MFInt32 [in] set_coordIndex MFInt32 [in] set_normalIndex MFInt32 [in] set_texCoordIndex MFNode [in,out] attrib [] [X3DVertexAttributeNode] SFNode [in,out] color NULL [X3DColorNode] SFNode [in,out] coord NULL [X3DCoordinateNode] SFNode [in,out] fogCoord NULL [FogCoordinate] SFNode [in,out] metadata NULL [X3DMetadataObject] SFNode [in,out] normal NULL [X3DNormalNode] SFNode [in,out] texCoord NULL [X3DTextureCoordinateNode] SFBool [] ccw TRUE MFInt32 [] colorIndex [] [0,∞) or -1 SFBool [] colorPerVertex TRUE SFBool [] convex TRUE MFInt32 [] coordIndex [] [0,∞) or -1 SFFloat [] creaseAngle 0 [0,∞) MFInt32 [] normalIndex [] [0,∞) or -1 SFBool [] normalPerVertex TRUE SFBool [] solid TRUE MFInt32 [] texCoordIndex [] [-1,∞)}
:
normal - ( Normal).
texCoord - (. TextureCoordinate).
ccw - true, , coordIndex , . ccw=false, , (. ).
colorIndex - , IndexedLineSet ( colorPerVertex).
colorPerVertex - ( false) (true) (. ).
convex - (, ) , false ( ) (. ).
coordIndex - (-1) . ( ccw true) solid=true. solid=false (ccw=true), . ( ) , .
creaseAngle Normal, , . . , , . , creaseAngle, , (. ).
normalIndex ( normalPerVertex) , colorIndex.
normalPerVertex - (false) (true).
texCoordIndex - TextureCoordinate (. ).
|
|
<IndexedFaceSet ccw="true" colorPerVertex="true"
convex="true" creaseAngle="0" normalPerVertex="true" solid="false"
coordIndex="0 4 7 3 -1 5 6 2 1 -1 4 5 6 7 -1 6 7 3 2 -1"
colorIndex="0 1 2 3 -1 4 5 6 0 -1 1 2 3 4 -1 5 6 0 1 -1">
<Coordinate
point="-2 0 2, 2 0 2, 2 0 -2, -2 0 -2, -2 4 2, 2 4 2, 2 4 -2, -2 4 -2">
</Coordinate>
<Color color="0 0 1, 0 1 0, 0 1 1, 1 0 0, 1 0 1, 1 1 0, 1 1 1"></Color>
</IndexedFaceSet>
ElevationGrid
, () ( Y=0).
:
ElevationGrid: X3DGeometryNode { MFFloat [in] set_height MFNode [in,out] attrib [] [X3DVertexAttributeNode] SFNode [in,out] color NULL [X3DColorNode] SFNode [in,out] fogCoord NULL [FogCoordinate] SFNode [in,out] metadata NULL [X3DMetadataObject] SFNode [in,out] normal NULL [X3DNormalNode] SFNode [in,out] texCoord NULL [X3DTextureCoordinateNode] SFBool [] ccw TRUE SFBool [] colorPerVertex TRUE SFFloat [] creaseAngle 0 [0,∞) MFFloat [] height [] (-∞,∞) SFBool [] normalPerVertex TRUE SFBool [] solid TRUE SFInt32 [] xDimension 0 [0,∞) SFFloat [] xSpacing 1.0 (0,∞) SFInt32 [] zDimension 0 [0,∞) SFFloat [] zSpacing 1.0 (0,∞)}
:
texCoord - |
ccw - |--------> IndexedFaceSet
colorPerVertex - |
creaseAngle - |
normalPerVertex- |
solid - |
xDimension - | - .
zDimension- height xDimension*zDimension
|
xSpacing- | -
zSpacing- | X Z
height - Y=0. Z, ().
set_height - , ( height) .
<ElevationGrid xDimension="7" zDimension="6"
height="
1.5, 10, 0.5, 0.5, 1, 1.5,0,
1, 0.5, 0.25, 0.25, 0.5, 1,0,
0.5, 0.25, 0, 0, 0.25, 0.5,0,
0.5, 0.25, 0, 0, 0.25, 0.5,0,
1, 0.5, 0.25, 0.25, 0.5, 1,0,
1.5, 1, 0.5, 0.5, 1, 1.5,0"
xSpacing="5.0" zSpacing="5.0" solid="false">
</ElevationGrid>
Extrusion
X3D, X3DOM.
https://github.com/x3dom/x3dom/issues/53
DEF USE
DEF . , .. . , DEF .
, DEF, . . .
<Scene> <Transform DEF='LeftCube' translation='-2 0 0'> <Shape DEF='MyCube'> <Appearance> <Material diffuseColor='1 0 0'></Material> </Appearance> <Box></Box> </Shape> </Transform> <Transform DEF='RightCube' translation='2 0 0'> <Shape USE='MyCube'></Shape> </Transform></Scene>
Shape, Material, Appearance, Group, Transform.
, .
|
|
Anchor. .
:
parameter - . , parameter="target='_self'" , ( ).
url - URL, .
Anchor 2 , .
<Scene>
<Anchor url="http://guap.ru" parameter="target='_self'">
<Shape DEF="Cube">
<Box>
</Box>
<Appearance>
<Material></Material>
</Appearance>
</Shape>
<Transform translation="3 0 0">
<Shape USE="Cube">
</Shape>
</Anchor>
</Scene>
X3DOM X3D -. , .
Inline.
:
url .
<Scene>
<Shape>
<Sphere></Sphere>
<Appearance>
<Material></Material>
</Appearance>
</Shape>
<Transform translation="0 3 0">
<Inline url="cube.x3d">
</Transform>
</Scene>
<Scene>, X3D. cube.x3d :
<Scene>
<Shape
<Box></Box>
<Appearance>
<Material></Material>
</Appearance>
</Shape>
</Scene>
:
Group
Anchor
Transform
. :
<Group DEF="Gr1">
...
<Transform DEF="Tr">
...
<Group DEF="Gr2">
...
</Group>
</Transform>
</Group>
X3D , design-time ( ) ( ), . , (SFFloat, MFString,). .
.
4 :
[] . design-time.
[in] design-time, , . toField.
[out] design-time, , . fromField.
[in,out] design-time , : set__ () __changed (). set__, __changed.
, .
ROUTE :
fromNode DEF- ,
fromField
toNode DEF- ,
|
|
toField
:
<ROUTE fromNode=TimeClock fromField=fraction_changed
toNode=PosInt toField=set_fraction></ROUTE>
TimeSensor
. .
TimeSensor: X3DTimeDependentNode, X3DSensorNode { SFTime [in,out] cycleInterval 1 (0,∞) SFBool [in,out] enabled TRUE SFBool [in,out] loop FALSE SFNode [in,out] metadata NULL [X3DMetadataObject] SFTime [in,out] pauseTime 0 (-∞,∞) SFTime [in,out] resumeTime 0 SFTime [in,out] startTime 0 (-∞,∞) SFTime [in,out] stopTime 0 (-∞,∞) SFTime [out] cycleTime SFTime [out] elapsedTime SFFloat [out] fraction_changed SFBool [out] isActive SFBool [out] isPaused SFTime [out] time}
:
cycleInterval ().
loop true , .
fraction_changed , . , , . 0 1 ( , , fraction_changed = 1).
enabled (true) (false)
ColorInterpolator ( )
( 0..1).
:
keyValue . .
key keyValue 0 1.
set_fraction - , key, keyValue.
value_changed - , keyValue.
<Scene>
<TimeSensor DEF='Time' cycleInterval='5' loop='true'> </TimeSensor>
<ColorInterpolator DEF='ColInt' key='0 0.33 0.66 1' keyValue='1 0 0, 0 1 0, 0 0 1, 1 0 0'></ColorInterpolator>
<Shape>
<Appearance>
<Material DEF='Mat' diffuseColor='1 0 0'></Material>
</Appearance>
<Cylinder></Cylinder>
</Shape>
<ROUTE fromNode='Time' fromField='fraction_changed' toNode='ColInt' toField='set_fraction'></ROUTE>
<ROUTE fromNode='ColInt' fromField='value_changed' toNode='Mat' toField='set_diffuseColor'></ROUTE>
</Scene>
. (value_changed) (keyValue).
ScalarInterpolator ( )
( ).
<Scene>
<TimeSensor DEF='Time' cycleInterval='5' loop='true'> </TimeSensor>
<ScalarInterpolator DEF='ScInt' key='0.5 1' keyValue='.1.9.1'></ScalarInterpolator>
<Shape>
<Appearance>
<Material DEF='Mat' transparency='0'></Material>
</Appearance>
<Box></Box>
</Shape>
<ROUTE fromNode='Time' fromField='fraction_changed' toNode='ScInt' toField='set_fraction'></ROUTE>
<ROUTE fromNode='ScInt' fromField='value_changed' toNode='Mat' toField='set_transparency'></ROUTE>
</Scene>
CoordinateInterpolator ( )
.
.
<Scene>
<TimeSensor DEF='Time' cycleInterval='5' loop='true'></TimeSensor>
<CoordinateInterpolator DEF='CoordInt' key='0 0.2 0.4 0.6 0.8 1'
keyValue=
'0 1 1, 0 1 -1, -1 -1 0, 1 -1 0,
0 2 2, 0 1 -1, -1 -1 0, 1 -1 0,
0 1 1, 0 2 -2, -1 -1 0, 1 -1 0,
0 1 1, 0 1 -1, -2 -2 0, 1 -1 0,
0 1 1, 0 1 -1, -1 -1 0, 2 -2 0,
0 1 1, 0 1 -1, -1 -1 0, 1 -1 0'></CoordinateInterpolator>
<Shape>
<Appearance>
<Material></Material>
</Appearance>
<IndexedFaceSet coordIndex='2 3 0 -1 2 0 1 -1 3 2 1 -1 3 1 0 -1'>
<Coordinate DEF='Coord' point='0 1 1, 0 1 -1, -1 -1 0, 1 -1 0'></Coordinate>
</IndexedFaceSet>
|
|
</Shape>
<ROUTE fromNode='Time' fromField='fraction_changed' toNode='CoordInt' toField='set_fraction'></ROUTE>
<ROUTE fromNode='CoordInt' fromField='value_changed' toNode='Coord' toField='set_point'></ROUTE>
</Scene>
OrientationInterpolator ( )
.
<Scene>
<TimeSensor DEF='TIME' cycleInterval='5' loop='true'></TimeSensor>
<OrientationInterpolator DEF='OrientInt' key='0 0.5 1' keyValue='0 0 1 0, 0 0 1 -3.14, 0 0 1 -6.28'></OrientationInterpolator>
<Shape>
<Appearance>
<Material></Materail>
</Appearance>
<Box></Box>
</Shape>
<Transform DEF='TRANS'>
<Transform DEF='TRANS2' translation='0 -3 0'>
<Shape>
<Appearance>
<Material></Material>
</Appearance>
<Cone></Cone>
</Shape>
</Transform>
</Transform>
<ROUTE fromNode='Time' fromField='fraction_changed' toNode='OrientInt' toField='set_fraction'></ROUTE>
<ROUTE fromNode='OrientInt' fromField='value_changed' toNode='Trans' toField='set_rotation'></ROUTE>
</Scene>
PositionInterpolator ( )
.
<Scene>
<TimeSensor DEF='Time' cycleInterval='5' loop='true' enabled='true'></TimeSensor>
<PositionInterpolator DEF='PosInt' key='0 0.23 0.5 0.75 1' keyValue='-3 -3 0, -3 3 0, 3 3 0, 3 -3 0, -3 -3 0 '></PositionInterpolator>
<Shape>
<Appearance>
<Material></Material>
</Appearance>
<Box></Box>
</Shape>
<Transform DEF='Trans' translation='-3 -3 0'>
<Shape>
<Appearance>
<Material></Material>
</Appearance>
<Sphere radius='0.25'></Sphere>
</Shape>
</Transform>
<ROUTE fromNode='Time' fromField='fraction_changed' toNode='PosInt' toField='set_fraction'></ROUTE>
<ROUTE fromNode='PosInt' fromField='value_changed' toNode='Trans' toField='set_translation'></ROUTE>
</Scene>
1) ,
2) DEF-
3) ,
4) , value_changed . , PositionInterpolator SFVec3f
5) TimeSensor,
6) fraction_changed set_fraction
7) value_changed .
<Scene>
<Background backUrl="realsky_BK.jpg" bottomUrl="realsky_DN.jpg"
frontUrl="realsky_FR.jpg" leftUrl="realsky_LF.jpg"
rightUrl="realsky_RT.jpg" topUrl="realsky_UP.jpg">
</Background>
<Transform DEF="earth" translation="0 0 0" scale="1.25 1.25 1.25">
<Shape>
<Appearance>
<Material diffuseColor="1 1 1" specularColor=".2.2.2">
</Material>
<ImageTexture url="earth.jpg"></ImageTexture>
</Appearance>
<Sphere DEF="geo"></Sphere>
</Shape>
</Transform>
<Transform DEF="moon" translation="11 0 0" center="-11 0 0" scale="0.35 0.35 0.35">
<Shape>
<Appearance>
<Material USE="mat"></Material>
<ImageTexture url="moon.jpg"></ImageTexture>
</Appearance>
<Sphere USE="geo"></Sphere>
</Shape>
</Transform>
<DirectionalLight direction='0 -1 0' intensity="0.3"></DirectionalLight>
<TimeSensor DEF='TS_e' cycleInterval='1' loop='true'></TimeSensor>
<OrientationInterpolator DEF='OI_e' key='0, 0.5, 1'
keyValue='0 1 0 0, 0 1 0 3.14, 0 1 0 6.28'>
</OrientationInterpolator>
<ROUTE fromNode='TS_e' fromField='fraction_changed'
toNode='OI_e' toField='set_fraction'>
</ROUTE>
<ROUTE fromNode='OI_e' fromField='value_changed'
toNode='earth' toField='set_rotation'>
</ROUTE>
<TimeSensor DEF='TS_mond' cycleInterval='27' loop='true'></TimeSensor>
<OrientationInterpolator DEF='OI_m' key='0, 0.5, 1'
keyValue='0 1 0 0, 0 1 0 3.14, 0 1 0 6.28'>
</OrientationInterpolator>
<ROUTE fromNode='TS_m' fromField='fraction_changed'
toNode='OI_m' toField='set_fraction'>
</ROUTE>
<ROUTE fromNode='OI_m' fromField='value_changed'
toNode='moon' toField='set_rotation'>
</ROUTE>
</Scene>
, Javascript , - . , X3DOM DOM, , , .. , .
Javascript. , , http://learn.javascript.ru/
DOM
DOM HTML-. , , .
,
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title> 1</title> <link rel="stylesheet" type="text/css" href="x3dom.css" /> <script type="text/javascript" src="x3dom.js"></script> </head> <body> <h1> 1</h1> <x3d> <scene> <shape> <appearance> <material></material> </appearance> <box size=1 2 3 ></box> </shape> </scene> </x3d> </body></html>
Javascript DOM- document.
, document . document.getElementById, id.
id , ( X3DOM-). ,
<Transform id="Aeroplane" translation="0 100 0">
id . id.
Javascript :
var obj = document.getElementById("Aeroplane");
obj Transform.
id DEF. X3DOM 2 : X3D HTML. DEF , X3D, . id , DOM- HTML .
id DEF :
<Transform id="Aeroplane" DEF="Aeroplane">
DOM , () children. .
<Transform id="Aeroplane" translation="0 100 0">
<Transform id="wing1">... </Transform>
<Transform id="wing2">... </Transform>
<Transform id="pilot">
<Shape id="pilot_head">... </Shape>
<Shape id="pilot_legs">... </Shape>
</Transform>
</Transform>
var obj = document.getElementById("Aeroplane").children[2].children[1];
var obj = document.getElementById("pilot_legs");
parentNode.
, obj.parentNode <Transform id="pilot">
document.createElement. , . , . DOM-, . (, , ), .
setAttribute, . X3DOM , . - , , .
getAttribute.
: 2 .
var oldInterval = parseFloat(document.getElementById("TS_e").getAttribute("cycleInterval"));
document.getElementById("TS_e").setAttribute("cycleInterval", oldInterval*2);
parseFloat .
/
appendChild removeChild , /. .
: .
<x3d>
<scene id='root'>
</scene>
</x3d>
<script>
var s = document.createElement('Shape'); var b = document.createElement('Box'); b.setAttribute('size', '1 2 2'); b.setAttribute('id', 'MyBox'); s.appendChild(b); var a = document.createElement('Appearance'); b.appendChild(a); var m = document.createElement('Material'); a.appendChild(m); document.getElementById('root').appendChild(t);</script>
var rootNode= document.getElementById('root');
rootNode.removeChild(rootNode.children[0]);
, id, , id. :
var delNode= document.getElementById('MyBox');
delNode.parentNode.removeChild(delNode);
, . Javascript. , (mouseover) , (mouseout) (click) .
X3DOM DOM-, DOM-, , , .
, , onClick.
<Shape onClick='alert(" .");'>
<Sphere></Sphere>
</Shape>
DOM- click alert, .
, (/).
.
: , .
<Shape
onMouseover='document.getElementById("Mat").setAttribute("diffuseColor","1 0 0")'
onMouseout='document.getElementById("Mat").setAttribute("diffuseColor", "0 0 1)'>
<Sphere></Sphere>
<Appearance>
<Material id='Mat' diffuseColor='0 0 1'></Material>
</Appearance>
</Shape>
click mouseover - event.hitPnt, -, (/ ). , , PositionChaser.
: .
<Sphere onClick="alert(' \n' + event.hitPnt);">
. , . , , .
, . <script type="text/javascript"> function toggle(what) { var button=(what=="earth")?document.getElementById("but_e"):document.getElementById("but_m"); var TS = (what=="earth")?document.getElementById("TS_e"):document.getElementById("TS_m"); var TS_enabled = TS.getAttribute("enabled"); if (TS_enabled == "true") { TS.setAttribute("enabled", "false"); button.value = (what=="earth")?" ":" "; } else { TS.setAttribute("enabled", "true"); button.value = (what=="earth")?" ":" "; } }</script><input type="button" id="but_e" value=" " onClick='toggle("earth");'><input type="button" id="but_m" value=" " onClick='toggle("moon");'>id, DOM-.
<TimeSensor id='TS_e' DEF='TS_e' cycleInterval='1' loop='true'></TimeSensor>
<TimeSensor id='TS_m' DEF='TS_m' cycleInterval='27' loop='true'></TimeSensor>
(Followers)
:
1) . - , , , . , , , . : , (event.hitPnt ) .
2) . , , , , . ( , ), , , , . , .
3) X3D. . , , . , , , .. , .
X3D , , - (Followers). .
-.
(-) (-). - . - 0, . - X3D - (Chaser), - - (Damper).
, .
.
, X3D, :
1) . , , .
2) 1 t.
(Chaser)
-. :
,
D , ( - ).
, D .
:
isActive , .
duration , ( D).
set_destination , .
value_changed .
(Damper)
-. :
,
- , () ( 0,63).
, . , X3D - , .
X3D 5 -. . , .
. .
:
isActive , .
tau , , 63% ( ).
eps (), set_destination, value_changed .
order ( ).
set_destination , .
value_changed .
, .