質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

AR.jsでボタンを用いたARの物体の切り替え表示ができません。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 108

n.k

score 1

前提・実現したいこと

AR.jsとA-Frameを用いたWebARのシステムを作ろうとしています。様々な方の作成されたコードを参考にボタンをクリックすることでARで表示しているオブジェクトを表示させたり、非表示にさせたりする機能を追加したいと考えております。しかし、ボタンをクリックしても表示されているARには何も変化が起きず、困っております。
周りに、この問題を解決できる人がおらず、自分一人では解決ができません。そこで、知識のある方にご教授おねがいしたく、質問させていただきました。よろしくお願いいたします。

発生している問題・エラーメッセージ

ボタンの機能とARが関連付けできていない。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>AnimationTest</title>
<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="js/aframe-extras.js"></script>
<script src="js/aframe-text-geometry-component.min.js"></script>
<script src="./js/aframe-ar.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>

</head>
<body style="margin:0px; overflow:hidden;">
<a-scene embedded arjs="debugUIEnabled:false;"  renderer="gammaOutput: true;" vr-mode-ui="enabled: false">

<a-assets>
<a-asset-item id="model" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fscene1.glb?v=1594279817621"></a-asset-item>
<a-asset-item id="model2" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fen.glb?v=1602566579902"></a-asset-item> 

</a-assets>

<a-marker preset="hiro">
<a-entity gltf-model="#model" scale="0.0001 0.0001 0.0001" rotation="0 0 0" position="0 0.5 0" animation-mixer="clip:*" ></a-entity>
</a-marker>

<a-entity camera></a-entity>
</a-scene>
<div style="position: fixed; bottom: 150px;">
<input type="button" id="b1" value="change" onclick="click1">
</div>
<script>
//初期表示は非表示
document.getElementById("model2").style.visibility ="hidden";

function click1(){
const model2 = document.getElementById("model2");

if(model2.style.visibility=="visible"){
// hiddenで非表示
model2.style.visibility ="hidden";
}else{
// visibleで表示
model2.style.visibility ="visible";
}
}
</script>

</body>

</html>

補足情報(FW/ツールのバージョンなど)

使用機器 iPhone X (iOS 14.0.1)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

以下の様に書き直したところ動作しましたので共有いたします。大まかな修正箇所は概要をご確認願います。
※手持ちのiPhone8(iOS13)では動作確認済み。コンソールには細かいエラーが出力されていたが、一旦無視しました。

修正箇所概要
・ボタン押下時の、「onclick」指定が誤っていたので修正
・モデルの取得方法を変更(Entityを取得するように変更)
・モデルの表示・非表示処理を変更

参考リンク
aframeドキュメント / visible
aframeドキュメント / entity

サンプルソース
修正・追記箇所にコメントを入れております。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>AnimationTest</title>
<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="js/aframe-extras.js"></script>
<script src="js/aframe-text-geometry-component.min.js"></script>
<script src="./js/aframe-ar.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>

</head>
<body style="margin:0px; overflow:hidden;">
<a-scene embedded arjs="debugUIEnabled:false;"  renderer="gammaOutput: true;" vr-mode-ui="enabled: false">

    <a-assets>
        <a-asset-item id="model" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fscene1.glb?v=1594279817621"></a-asset-item>
        <a-asset-item id="model2" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fen.glb?v=1602566579902"></a-asset-item> 
    </a-assets>

    <a-marker preset="hiro">
        <!-- id、visible 要素を追加 -->
        <a-entity id="armodel" visible="false" gltf-model="#model" scale="0.0001 0.0001 0.0001" rotation="0 0 0" position="0 0.5 0" animation-mixer="clip:*" ></a-entity>
    </a-marker>

    <a-entity camera></a-entity>
</a-scene>

<div style="position: fixed; bottom: 150px;">
    <!-- onclickの指定が誤っているので書き直し -->
    <!-- <input type="button" id="b1" value="change" onclick="click1"> -->
    <input type="button" id="b1" value="change" onclick="click1();">
</div>

<script>
    // 不要と思われたのでコメントアウト。初期表示状態は、「a-entity」の要素で指定する様に変更済み
    // //初期表示は非表示
    // document.getElementById("model2").style.visibility ="hidden";

    function click1(){

        console.log("click1");

        // Entityを取得
        var el = document.querySelector('#armodel');
        console.log(el.getAttribute('visible'));

        // 表示中の場合
        if (el.getAttribute('visible')) {
            // 非表示に切り替え
            el.setAttribute('visible', false);
        } else {
            // 表示に切り替え
            el.setAttribute('visible', true);
        }
    }
</script>

</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/10/18 08:56

    tsuki01 様

     丁寧なご回答ありがとうございます。修正箇所の概要、サンプルソースを参考にさせていただいたら、うまくいきました。これで先に進むことができます。本当にありがとうございました。
     サンプルソースも丁寧にコメントもつけていただいて感謝です。参考リンク等でさらに学習を進めていきたいと思います。本当に、今回は回答していただきありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る