Общие поля сложных геометрических узлов

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 – выходное событие.

 

 

Важным свойством использования последователей является возможность реакции на поступление входного сигнала после начала анимации, но до ее завершения.