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

前提・実現したいこと

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)

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>AnimationTest</title>
7<script src="https://aframe.io/releases/1.0.2/aframe.min.js"></script>
8<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
9<script src="js/aframe-extras.js"></script>
10<script src="js/aframe-text-geometry-component.min.js"></script>
11<script src="./js/aframe-ar.js"></script>
12<script src="./js/jquery-3.2.1.min.js"></script>
13
14</head>
15<body style="margin:0px; overflow:hidden;">
16<a-scene embedded arjs="debugUIEnabled:false;"  renderer="gammaOutput: true;" vr-mode-ui="enabled: false">
17
18    <a-assets>
19        <a-asset-item id="model" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fscene1.glb?v=1594279817621"></a-asset-item>
20        <a-asset-item id="model2" src="https://cdn.glitch.com/e982bdcd-1785-4dcf-bd6b-20276b594293%2Fen.glb?v=1602566579902"></a-asset-item> 
21    </a-assets>
22
23    <a-marker preset="hiro">
24        <!-- id、visible 要素を追加 -->
25        <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>
26    </a-marker>
27
28    <a-entity camera></a-entity>
29</a-scene>
30
31<div style="position: fixed; bottom: 150px;">
32    <!-- onclickの指定が誤っているので書き直し -->
33    <!-- <input type="button" id="b1" value="change" onclick="click1"> -->
34    <input type="button" id="b1" value="change" onclick="click1();">
35</div>
36
37<script>
38    // 不要と思われたのでコメントアウト。初期表示状態は、「a-entity」の要素で指定する様に変更済み
39    // //初期表示は非表示
40    // document.getElementById("model2").style.visibility ="hidden";
41
42    function click1(){
43
44        console.log("click1");
45
46        // Entityを取得
47        var el = document.querySelector('#armodel');
48        console.log(el.getAttribute('visible'));
49        
50        // 表示中の場合
51        if (el.getAttribute('visible')) {
52            // 非表示に切り替え
53            el.setAttribute('visible', false);
54        } else {
55            // 表示に切り替え
56            el.setAttribute('visible', true);
57        }
58    }
59</script>
60
61</body>
62</html>

投稿2020/10/16 16:00

編集2020/10/17 03:15

tsuki01

総合スコア1751

n.k

2020/10/17 23:56

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

行動規範の内容に同意します