实现Web虚拟现实的最轻松方案—A-Frame框架
生活随笔
收集整理的這篇文章主要介紹了
实现Web虚拟现实的最轻松方案—A-Frame框架
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
問(wèn)題
隨著vr的熱度那么web虛擬現(xiàn)實(shí)是否可行-
1. 實(shí)現(xiàn)Web虛擬現(xiàn)實(shí)的最輕松方案 A-Frame
A-Frame是一款開(kāi)源的可通過(guò)定制HTML元素構(gòu)建WebVR方案的框架。有了這個(gè)框架，Web程序員無(wú)需學(xué)習(xí)一門全新的語(yǔ)言或者類似于Unity和Unreal這樣的三維引擎就可以在Web開(kāi)發(fā)中加入虛擬現(xiàn)實(shí)支持。作為一個(gè)入門教程，本文將引導(dǎo)你一步步實(shí)現(xiàn)構(gòu)建一個(gè)加入Web虛擬現(xiàn)實(shí)支持的Web頁(yè)面的全過(guò)程。
1. 實(shí)現(xiàn)Web虛擬現(xiàn)實(shí)的最輕松方案 A-Frame
注意A-Frame（https://aframe.io/）是一個(gè)開(kāi)源框架A-Frame框架的入門級(jí)教程頁(yè)面（https://aframe.io/docs/guide/getting-started.html)
忽略以上介紹,簡(jiǎn)單粗暴 直接下載...找到并打開(kāi)inex.html
A-Frame樣板（https://github.com/aframevr/aframe-boilerplate/archive/master.zip)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>A-Frame Street Demo</title><script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script></head><body><a-scene><a-assets><img id="darktexture" src="blacktexture.png"></a-assets><a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box><a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder><a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder><a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder><a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder><a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere><a-sky src="res.jpg"></a-sky></a-scene></body> </html> 注意如果顯示不了圖片,可能需要在本地服務(wù)器運(yùn)行,例如php的運(yùn)行環(huán)境 效果鏈接https://www.devdiner.com/demos/aframedemo/ 圖片素材:https://flic.kr/p/bCMJ4X小結(jié).本文轉(zhuǎn)自 51cto.com
轉(zhuǎn)載于:https://www.cnblogs.com/lemonphp/p/5395834.html
總結(jié)
以上是生活随笔為你收集整理的实现Web虚拟现实的最轻松方案—A-Frame框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 网格弹簧质点系统模拟（Spring-Ma
- 下一篇： 主码索引、聚集索引、非主码索引（辅助索引