社区导航

 

搜索
查看: 1485|回复: 1

[设计过程分享] 体感手套 #5 使用A-frame的手机VR演示和调整

[复制链接]

238

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

发表于 2017-9-21 14:01 | 显示全部楼层 |阅读模式
1. VR设计经过A-frame的封装,可以展现出更精简的表达,就是各种形状如box,封装在这样的标签中。
在H5设计中可以直接引用。其中的参数,可以用数据定义的方式,分别变化调整数值。本例中,就通过对
      
其中position中宽度属性的设置,来改变形状。

这样的命令,设定属性的方法,来改变了形状。
2. 启动程序设定一个盒子为宽度为2的盒子.
                          var defaultposition ='2';
                          el.setAttribute('width', defaultposition);

Screenshot_2017-09-21-12-52-01.png
3. 启动程序设定宽度为0.5的扁盒子。
                          var defaultposition ='0.5';
                          el.setAttribute('width', defaultposition);

Screenshot_2017-09-21-12-53-44.png
4. 这个范例中使用的是静态的截图,实际上随着手机的移动,这个是浮动的图像。再最终的演示用视频会更好地表现。
所用到的范例测试javascript程序如下,
  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width, user-scalable=no,
  6.                 shrink-to-fit=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

  7.         <title>A-Frame Test</title>

  8.         <style>
  9.                 [url=home.php?mod=space&uid=568594]@import[/url] 'ui/css/evothings-app.css';
  10.         </style>

  11.         <style>
  12.                 #connectButton {
  13.                         width: 50%;
  14.                         float: left;
  15.                 }

  16.                 #disconnectButton {
  17.                         width: 50%;
  18.                         float: right;
  19.                 }
  20.         </style>

  21.         <script>

  22.         // Redirect console.log to Evothings Workbench.
  23.         if (window.hyper && window.hyper.log) { console.log = hyper.log }
  24.         </script>

  25.         <script src="cordova.js"></script>
  26.         <script src="libs/jquery/jquery.js"></script>
  27.         <script src="libs/evothings/evothings.js"></script>
  28.         <script src="libs/evothings/ui/ui.js"></script>
  29.         <script src="libs/evothings/easyble/easyble.js"></script>
  30.         <script src="app.js"></script>
  31.        
  32.          <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  33.          
  34.          <script>

  35.                    AFRAME.registerComponent('handle-events', {
  36.                                schema: {
  37.                                              color: {default: 'red'}
  38.                                     },
  39.                        
  40.                     init: function () {

  41.                           var data = this.data;
  42.                           var el = this.el;  // <a-box>
  43.                           var defaultColor = el.getAttribute('material').color;
  44.                           var defaultposition ='0.5';
  45.                           el.setAttribute('width', defaultposition);
  46.                                                     defaultColor ='red';
  47.                           el.setAttribute('color', defaultColor);
  48.                          
  49.                           /****************************            

  50.                                       el.addEventListener('mouseenter', function () {
  51.                                         el.setAttribute('color', data.color);
  52.                                       });
  53.                                       el.addEventListener('mouseleave', function () {
  54.                                         el.setAttribute('color', defaultColor);
  55.                                       });
  56.                                                   ******************************/
  57.                     }
  58.                   });

  59.           </script>

  60. </head>

  61. <body><!-- enables low-delay CSS transitions. -->
  62.         <header>
  63.                 <button class="back">
  64.                         <img src="ui/images/arrow-left.svg" />
  65.                 </button>
  66.                 <img class="logotype" src="ui/images/logo.svg" alt="Evothings" />
  67.         </header>

  68.         <h1>A-Frame Test</h1>

  69.         <p id="status">Not initialized</p>

  70.         <button id="connectButton" class="green">
  71.                 Connect
  72.         </button>

  73.         <button id="disconnectButton" class="red">
  74.                 Disconnect
  75.         </button>
  76.        



  77.         <a-scene>
  78.       <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" handle-events></a-box>
  79.       
  80.       <a-camera><a-cursor></a-cursor></a-camera>
  81.       
  82.       <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  83.       <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  84.       <a-sky color="#ECECEC"></a-sky>
  85.     </a-scene>
  86.    
  87.    
  88.         <canvas id="canvas" width="200" height="150"></canvas>
  89.        
  90. </body>

  91. </html>
复制代码

来源:EEWorld MAX32630FTHR设计大赛专区板块,转载请附上链接


回复

使用道具 举报

9424

TA的帖子

133

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2017-9-21 15:50 | 显示全部楼层
汇总贴在此:
体感手套—by 北方
http://bbs.eeworld.com.cn/thread-564975-1-1.html

玩板看这里:

http://bbs.eeworld.com.cn/elecplay.html

EEWorld测评频道众多好板等你来玩,还可以来频道许愿树许愿说说你想要玩的板子,我们都在努力为大家实现!



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

关闭

站长推荐上一条 /5 下一条

  • 论坛活动 E手掌握

    扫码关注
    EEWORLD 官方微信

  • EE福利  唾手可得

    扫码关注
    EE福利 唾手可得

Archiver|手机版|小黑屋|电子工程世界 ( 京ICP证 060456 )

GMT+8, 2019-9-22 22:40 , Processed in 0.101387 second(s), 17 queries , Gzip On, MemCache On.

快速回复 返回顶部 返回列表