来自Javascript的双面a-frame a-panel

时间:2017-09-30 15:06:52

标签: javascript dom aframe

如何为J-frame a-panel设置Javascript材质,使纹理变为双面?

我已经设法从外部Javascript中执行此操作 <a-plane src="image.jpg" material="side: double">但我无法使用Javascript。

这是一个非工作示例,只有正面可见:

<html>
<head>
    <script src="aframe.min.js"></script>
    <script type="text/javascript">
     function setup() {
       scene = document.querySelector('a-scene');

       var entity = document.createElement('a-entity');
       entity.setAttribute('position', '0 1.6 -1');

       var plane = document.createElement('a-plane');
       var planeMaterial = document.createElement('material');
       planeMaterial.setAttribute('side', 'double');
       plane.appendChild(planeMaterial);
       plane.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Jubilee_and_Munin%2C_Ravens%2C_Tower_of_London_2016-04-30.jpg/240px-Jubilee_and_Munin%2C_Ravens%2C_Tower_of_London_2016-04-30.jpg')
       entity.appendChild(plane);

       scene.appendChild(entity);
     }
     window.onload = setup;
    </script>
</head>

<body>
    <a-scene></a-scene>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

按照您提供的html,这就是您所需要的。

plane.setAttribute('material','side:double');

您发布的代码会生成

<a-plane src="image.jpg"><material side="double"></material></a-plane>

&#13;
&#13;
function setup() {
  scene = document.querySelector('a-scene');

  var entity = document.createElement('a-entity');
  entity.setAttribute('position', '0 1.6 -1');

  var plane = document.createElement('a-plane');
  plane.setAttribute('material', 'side: double;');
  plane.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Jubilee_and_Munin%2C_Ravens%2C_Tower_of_London_2016-04-30.jpg/240px-Jubilee_and_Munin%2C_Ravens%2C_Tower_of_London_2016-04-30.jpg')
  entity.appendChild(plane);

  scene.appendChild(entity);
}
window.onload = setup;
&#13;
<html>

<head>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>

<body>
  <a-scene></a-scene>
</body>

</html>
&#13;
&#13;
&#13;