超簡単な360画像ビューアでフレーム未満の20行
9147 ワード
浩二コウジ 高治
小次郎
午前4時45分
アフラビル / アフレム
🅰️ バーチャルリアリティ体験のためのWebフレームワーク
フレーム
バーチャルリアリティ体験を構築するためのWebフレームワーク
Site
—
Docs
—
School
—
Slack
—
Blog
—
Newsletter
スペシャルスポンサー
例
より多くの例を見つけてくださいthe homepage , A Week of A-Frame , and WebVR Directory .
機能
👓 バーチャルリアリティがシンプルになった:Aフレームは3 DとWebVRを扱う
Boilerplateは、モバイル、デスクトップ、Vive、および<a-scene> .
❤️ 宣言HTML:HTMLは読みやすくコピーして貼り付けます.以来
A -フレームはHTMLから使用できます、A -フレームは皆にアクセス可能です
開発者、VR愛好家、教育者、アーティスト、メーカー、子供たち.
🔌 エンティティ・コンポーネント・アーキテクチャ
フレームワークの3つの上に.宣言的で、構成可能で、再利用できる
つのエンティティコンポーネントの構造.jsAフレームはHTMLから使用できますが、
開発者はJavaScript、DOM API、3つに無制限にアクセスできます.Webvr、そして
WebGL
⚡ パフォーマンス:Aフレームは薄いです.
View on GitHub
1 .インデックスを作成します。HTML
<!DOCTYPE html>
<html>
<head>
<title>360View</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="img" src="texture.jpg" />
</a-assets>
<a-sky id="img-360" radius="10" src="#img"> </a-sky>
</a-scene>
</body>
</html>
2 . 360イメージを取得する
インデックスで.ファイル名はtexture.jpg . あなたは360イメージまたは変更タグの名前を変更することができますsrc 属性.
あなたは素敵な360画像を見つけることができます↓
http://texturify.com/
3 .ローカルサーバーの実行
私はライブサーバーを使用しました
$ npm i -g live-server
$ live-server
次に、オープンlocalhost : 8080
タピオ
/
ライブサーバー
ライブリロード機能を備えたシンプルなHTTPサーバ。
ライブサーバー
これは、ライブリロード機能を持つ小さな開発サーバーです.HTML/JavaScript/CSSファイルをハッキングするために使用しますが、最終的なサイトを展開するためのものではありません.
これを使う理由は二つあります.
<!DOCTYPE html>
<html>
<head>
<title>360View</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="img" src="texture.jpg" />
</a-assets>
<a-sky id="img-360" radius="10" src="#img"> </a-sky>
</a-scene>
</body>
</html>
$ npm i -g live-server
$ live-server
これは、ライブリロード機能を持つ小さな開発サーバーです.HTML/JavaScript/CSSファイルをハッキングするために使用しますが、最終的なサイトを展開するためのものではありません.
これを使う理由は二つあります.
file:// あなたのサイトがJavaScriptを通して内容をフェッチするならば、セキュリティ規制のため、プロトコルはサーバーを必要とします.python -m SimpleHTTPServer
インストール
ノードが必要です.JSとNPM.おそらくこれをグローバルにインストールするべきでしょう.
NPMウェイ
npm install -g live-server
git clone https://github.com/tapio/live-server
cd live-server
npm install #View on GitHub
Reference
この問題について(超簡単な360画像ビューアでフレーム未満の20行), 我々は、より多くの情報をここで見つけました https://dev.to/0xkoji/super-easy-360-image-viewer-with-a-frame-less-20-lines-4884テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol