x3dom изменить цвет класса элементов

Я хочу изменить цвет класса элементов.

Пример:

<transform translation='-2 0 0'> 
      <shape  id="N0_0_0"> 
       <appearance> 
         <material class="L2_0_0_3 L2_0_0_2" diffuseColor='1 0 0'></material> 
       </appearance> 
       <box size='0.5,0.5,0.5'></box> 
    </shape> 
    </transform> 
    <transform translation='2 0 0' > 
      <shape id="N2_0_0"> 
       <appearance> 
         <material class="L2_0_0_3 L2_0_0_1" diffuseColor='1 0 0'></material> 
       </appearance> 
       <box size='0.5,0.5,0.5'></box> 
    </shape> 
    </transform>

Когда происходит определенное событие (в моем случае событие onMouseOver элемента), я хотел бы изменить цвет всех элементов класса «matT1». До сих пор я пытался изменить цвет первого элемента, но это не работает.

document.getElementsByClassName("matT1")[0].prop('diffuseColor', '0 0 1');

javascript css x3dom
person thi gg    schedule 10.11.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы также можете повторно использовать весь материал несколько раз. Изменение диффузного цвета повлияет на все повторные использования.

<material DEF='somename' diffuseColor='1 0 0'></material>

<material USE='somename'></material>
<material USE='somename'></material>
person user2939415    schedule 05.12.2014
comment
Но это не работает для дублирования между группами, но хорошая идея. Спасибо - person thi gg; 05.12.2014

arrow_upward
0
arrow_downward

Я решил это с помощью jquery.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Я просто добавил класс для каждого элемента, цвет которого я хотел изменить.

 <transform 
    onmouseover="$('material.L2_0_0_3').attr('diffuseColor', '1 0.25 0.25');"
    onmouseout ="$('material.L2_0_0_3').attr('diffuseColor', '0.5 0.5 0.5');">

onmouseout снова возвращает цвет к нормальному. $('material.L2_0_0_3') выбирает все элементы, которые являются материалами (сделано это для производительности) и являются членами класса "L2_0_0_3".

person thi gg    schedule 15.11.2014