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

最新推荐文章于 2024-08-28 09:48:48 发布

小陀螺_Coder

最新推荐文章于 2024-08-28 09:48:48 发布

阅读量649

点赞数

分类专栏： WebGL 文章标签： A-Frame Flask

本文链接：https://blog.csdn.net/Scopperil/article/details/80861313

版权

WebGL 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近一直都在搞这些事，坑太多了一个一个去填，收获也很多。做出了一定成果及时总结养成好习惯。

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>