Hatena Blog Tags
はてなブログ トップ
aframe
このタグでブログを書く

aframe

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
spacelyのブログ•14 日前

VRの部屋に家具を置いてみた

「AI空間設計」とは？ スペースリーは360度VRを活用したサービスを提供しています。2016年のサービスリリース以来、VRを使ったさまざまな機能を開発してきました。そして、今年の3月に「AI空間設計」という機能をリリースしました！！360度パノラマで撮影した部屋のVR空間の中に、実際に販売されている家具などを配置することができるサービスで、本物の家具を置くことなく部屋のレイアウトを自由に試すことができます！残念ながらスペースリーは事業者様向けのサービスなので、実際に操作していただくことはできないのですが、こちらのページの動画でサービスの雰囲気を知っていただければと思います。 「AI空間設計」…

#aframe#VR#Vue.js

関連ブログ

レベルエンター山本大のブログ•4 か月前

クォータニオン(Quaternion)をAframeで基礎から学ぶ

クォータニオン(Quaternion)は３次元空間の回転を表現するものです。 回転軸（3次元のベクトル）と回転角で成り立っているので、４要素があるので四元数(Quaternion)といいます。 A-frameでのrotationはオイラー角という方法で表現されています。これはxyzの3つの軸で回転する方法でわかりやすいのですが、複雑な回転になると使いづらいシーンがあります。 たとえば、すでに傾きのある物体に横回転を加えようと思います。 以下の動画では、左側の直方体をクリックするとオイラー角でY軸を中心に10度づつ回転するようにしました。 右側の直方体をクリックすると、クオータニオンで物体の上下…

Retronum Engineer•4 か月前

a-frameデモ体験コード

下記コードを埋め込むことでウェブサイト上でARを体験することが出来る。 aframe.io <html> <head> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> …

レベルエンター山本大のブログ•5 か月前

a-frame raycasterを使って壁との衝突判定を実装する

a-frame raycasterを使って高低差のある地形に沿って移動する - レベルエンター山本大のブログの続き 目的 a-frameではWASDキーおよび矢印キーでカメラの位置を移動させることができるものの、壁や物体への衝突判定は自分で作り込む必要があります。 以下の動画のように前進、右移動、左移動、後退のどの方向でも障害物に当たったら跳ね返されるようにすることがこの記事の目的です。 障害物に当たったら、その場にストップするという仕様も考えられますが、そうすると壁にめり込んだりというトラブルが発生しがちです。 めりこみを避けるためにぶつかったら、ちょっと跳ね返るという処理にしておきます。 …

レベルエンター山本大のブログ•5 か月前

a-frame raycasterを使って高低差のある地形に沿って移動する

目的 AframeのカメラはデフォルトでWASDキーや矢印キーによる操作ができますが、高低差のある地形に沿って移動はしてくれません。 また、階段のようなモデルも登っていきたいところですね。 Aframeで地面に指定したモデルの地形に添って移動できるようにします。下記の動画では、WASDでカメラを動かしてクレーターを登っていき、最終的に高い位置から見下ろします。これを実現できるようにすることがこの記事の目的です。 シーンの設定 とりあえず、モデルや空や、目印になる赤いボックスを置きます。 モデルはMozilla の Spoke https://hubs.mozilla.com/spoke からダ…

映画に狂って...•6 か月前

ウーピー・ゴールドバーグのオールタイムベスト

全3項目 ●代表作 ●1998年の「AFI's 100 Years 100 Movies」より9本 ●「aframe.oscars.org」の「The Six Movies I Turn To」より6本 「アメイジング・グレイス(Amazing Grace)」より 全3項目 ●代表作 俳優「天使にラブ・ソングを...」シリーズ、 「ゴースト-ニューヨークの幻」、 「チャンス！(アソシエイト)」、 「カラーパープル」、 TVドラマ＆映画〃「新スタートレック(ザ・ネクスト・ジェネレーション/TNG)」シリーズ、 映画監督「ウーピー・ゴールドバーグ・プレゼンツ・ママ・マブリー(Whoopi Gold…

Windows11の教科書•6 か月前

【VR】お手軽VR入門　JS編

お手軽にVRを試したい場合の手順のメモです。今回はJS編。 お手軽VR入門 JS編 A-Frameをセットアップ 箱を表示する 写真を360度張り付ける オキュラスクエスト2で見るには？ お手軽VR入門 JS編 Firefoxなどでおなじみモジラが提供しているVR用のライブラリ「A-Frame」を使います。 こちらの記事で大体紹介されていますので簡単に確認していきます。 HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3Dライブラリ「A-Frame」がすごい - ICS MEDIA A-Frameをセットアップ GitHubからファイルを入手します。 github.com …

みかづきブログ・カスタム•6 か月前

BlenderでつくったglbファイルをA-Frameに読み込んでマテリアルの色を編集する 📦

こちらの記事のA-Frameバージョンです。blog.kimizuka.org ❶ Blenderでモデルをつくる ❷ glbファイルを書き出す ❸ glbを読み込むHTMLをつくる ❹ マテリアルを取得して色を変えてみる ❺ カスタムデータ属性で色を変更可能にする ❶ Blenderでモデルをつくる とりあえずキューブをつくりました。というか、Blenderを起動するとそこにあります。 カメラとライトを消してキューブだけにしてあります。 ❷ glbファイルを書き出す File > Export > glTF 2.0 (.glb/gltf) で書き出せます。 ファイル名はcube.glbと名付…

OPTiM TECH BLOG•7 か月前

【作ってみた】川崎重工製産業用ロボットduAro2をOculus Questで遠隔操作してみた

こんにちは、技術統括本部、DX推進部の横川です。 IoTやロボットが関連したDX案件の開発を主に担当しています。 今回は川崎重工業株式会社様のduAro2をVRで動かすモックアプリケーションを作成したため、その紹介をします。 こちらがデモ動画です duAro2 VR遠隔操作 デモ動画 01 操縦者がVRで遠隔のduAro2と視野を共有しVRのコントローラを操作すると、duAro2が動作するアプリケーションです。 1. duAro2とは 2. 用意したもの 3.構成図 4. WebRTCを利用した通信 a. Oculus Questで360度動画ストリーミング再生を行う b. Oculus Q…

忘れないうちにメモする•7 か月前

A-Frame で WebXR hit-test を利用する方法

A-Frame v1.1.0 でDom-Overlay、hit-testが使えるようになったのは、以前記事にしました。 sgi-don.hatenablog.com Dom-Overlayについては、以下に記載しています。 sgi-don.hatenablog.com 今回は hit-test について書いていきます。 これで現実空間の垂直面/水平面を取得することができます。 WebXR の設定 前回も書きましたが、A-FrameにWebXRを利用することを知らせる必要があります。 そのため、A-Frameにはwebxrコンポーネントが用意されています。 実装は簡単で、a-sceneタグにwe…

映画に狂って...•8 か月前

ヴィゴ・モーテンセンのオールタイムベスト

全4項目 ●代表作 ●「aframe.oscars.org」の「Five Movies That Taught Me How to Build One」より7本 ●「TCM España」の「Entrevistas TCM: Viggo Mortensen」より5本 ●「vulture.com」の「Viggo Mortensen on Captain Fantastic, Being Typecast, and the Long-term Benefit of Being in Lord of the Rings」より4本 「裁かるゝジャンヌ(裁かるるジャンヌ)」より 全4項目 ●代表作 俳優…

映画に狂って...•8 か月前

ジョン・デヴィッド・ワシントンのオールタイムベスト

全4項目 ●代表作 ●「Rotten Tomatoes」の「John David Washington's Five Favorite Films」より5本 ●「aframe.oscars.org」の「John David Washington’s Five Favorite Performances」より5本 ●「variety.com」の「Listen: John David Washington on ‘BlacKkKlansman,’ Blue Lives and NFL Protests」より4本 「グローリー」より 全4項目 ●代表作 俳優「TENET テネット」、 「ブラック・ク…

みかづきブログ・カスタム•8 か月前

aframe-animation-mixerを改造してARオブジェクトのアニメーションを制御可能にする 🎥

アニメーションするARオブジェクトに対してシークバーを付けてみました。aframe-animation-mixerをほんのり改造して、ARで表示したオブジェクトのアニメーションをシークできるようにしてみました。🎥 https://t.co/oFezei9dJu pic.twitter.com/GqaZrlg4IX— 君塚史高 (@ki_230) 2021年1月20日 実装方針としては、以前作ったThree.jsのスクロール連動と同じで、THREE.AnimationMixerのactionのtimeを操作しているだけです。blog.kimizuka.orgA-FrameでTHREE.Anima…

忘れないうちにメモする•8 か月前

そういえば、A-Frame v1.1.0でdom-overlayとhit-testの実装が入りました。

Blogにメモにしようと思っていて忘れていました。 A-Frame v1.1.0 去年の12月ですがA-Frame v1.1.0がリリースされました。 このバージョンから、Dom-overlayとhit-testの実装が入っています。 他にも、hand-trackingもありますが、今の所は動作環境はQuest2限定ぽいです。 aframe.io WebXR Device API自体にはA-Frame v1.0.0から対応していたのですが、 本格的にインタラクション可能となる実装が入るのは今回からとなります。 今回追加された、Dom-overlayとhit-testについて簡単に紹介します。 …