A-Frame基础用法

新时代_打工人

已于 2022-08-02 11:58:22 修改

阅读量997

点赞数 1

分类专栏： A-Frame 文章标签： vr ar

于 2022-08-02 11:51:14 首次发布

本文链接：https://blog.csdn.net/m0_46361270/article/details/126119507

版权

A-Frame 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介

🅰️-Frame 是一个用来构建虚拟现实（VR）应用的网页开发框架。由WebVR的发起人Mozilla VR 团队所开发，是当下用来开发WebVR内容主流技术方案。WebVR是一个完全开源的项目，已成长为领先的VR社区。
A-Frame基于HTML，容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。
A-Frame支持主流VR头显如Vive, Rift, Daydream, GearVR,
Cardboard, 甚至可被用于增强现实（AR）。虽然A-Frame支持全谱，A-Frame的目标是定义具有位置跟踪和操控的完全身临其境和交互式VR体验，超出基本的360° 内容呈现。Mozilla VR团队正在使用A-Frame构建虚拟实境（Metaverse）项目的基础。
Metaverse由meta和verse组成，meta表示超越，verse表示现实世界，合起来就寓意超现实，技术上是VR、AR和移动互联网的融合。
教程

在线实例
在这里插入图片描述

<html>
<head>
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <!-- 资源管理系统
        资产管理系统使浏览器缓存资源更容易（例如，图像，视频，模型），并且A-Frame框架将确保所有的资源都在渲染之前被获取到。
        需要使用在线资源，可能会出现资源跨域
        -->
        <a-assets>
            <img src="./images/ETH.png" id="box-bg">
            <img src="./images/background.webp" id="sky-bg">
            <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
            <audio id="audio" src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay
                preload></audio>
        </a-assets>
        <!-- color="#4CC3D9"  -->
        <a-box src="#sky-bg" position="0 2 -5" rotation="0 45 45" scale="1 1 1"
            animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 1500; loop: true">
        </a-box>
        <!-- 设置地面    （repeat）格子化效果 -->
        <a-plane rotation="-90 0 0" width="30" height="30" src="#groundTexture" repeat="10 10"></a-plane>
        <!-- 背景颜色 -->
        <a-sky src="#sky-bg"></a-sky>
        <!-- 光源 -->
        <a-light type="ambient" color="#445451"></a-light>
        <a-light type="point" intensity="2" position="2 4 4"></a-light>
        <!-- 音频 -->
        <a-sound src="#audio" autoplay="true" position="-3 1 -4"></a-sound>
        <!-- <a-text value="Hello, A-Frame!" color="#BBB"
        position="-0.9 0.2 -3"></a-text> -->
        <a-camera>
            <a-cursor></a-cursor>
        </a-camera>
    </a-scene>
</body>
</html>

新时代_打工人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
A-Frame基础用法

🅰️-Frame是一个用来构建虚拟现实（VR）应用的网页开发框架。由WebVR的发起人MozillaVR团队所开发，是当下用来开发WebVR内容主流技术方案。WebVR是一个完全开源的项目，已成长为领先的VR社区。A-Frame基于HTML，容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。A-Frame支持主流VR头显如Vive,Rift,Daydream,GearVR,教程.........
复制链接

扫一扫