新无止竞

首页 » PHP » A-Frame 前端WebVR以及后端Flask服务器搭建(一)

A-Frame 前端WebVR以及后端Flask服务器搭建(一)

    A-Frame这个框架基于webGL中three.js模块,目前踩的坑来看,这是一个未完成的框架,我愿意与它共同成长。

    A-Frame继承了很多three.js的很多模块,比如相机、光照、几何模型等等,还有很多新的功能,同时社区也在不断成长,更多模块正在开发。 
一个简单的例子:
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js">
</script>
</head>
<body>
<a-scene>
        <a-assets>
            <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
             <img id="skyTexture"
      src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
       <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg"></a-assets>
       <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
            <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur=2000 repeat="indefinite"></a-animation>
        </a-box>
        <a-sky src="#skyTexture"></a-sky>
        <a-light type="ambient" color="#E3E3E3"></a-light>
          <a-light type="point" intensity="2" position="2 4 4"></a-light>
          <a-text value="Hello" color="#BBB"
        position="-0.9 0.2 -3" scale="1.5 1.5 1.5"></a-text>
 <a-camera>
            <a-cursor></a-cursor>
        </a-camera>
    </a-scene>
</body>
</html>    

    懂前端的大概都懂是什么意思,主要的三维模型内容都在 <a-scene> </a-scene>中,首先是资源<a-assets>,包括纹理贴图,模型等,然后是box模型,其中定义了其位置,大小,角度等属性,还添加纹理,并定义了其动画效果,接下来是天空盒,灯光效果,相机等。

文章如无特别注明均为原创! 作者: 独自狂战, 转载或复制请以 超链接形式 并注明出处 新无止竞博客 - 专注网络技术资源分享的IT博客
原文地址《 A-Frame 前端WebVR以及后端Flask服务器搭建(一)》发布于2018-11-16

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册