常連

### 前提・実現したいこと

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)

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

初めて質問を投稿します。
現在unity内でブラウザを表示するためにgree社が提供しているwebviewのパッケージの使用を試みています。
[こちら](https://github.com/gree/unity-webview)webviewのリンクです。
しかし、実際に使用してみると下の画像のように矢印のUIが出るだけでブラウザが表示されません。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-22/2cfda74d-6fdd-426a-87f2-3698c48bbdac.png)
原因と解決策がわからないので教えていただきたいです。
（パッケージの使用方法は[こちら](https://developers.wonderpla.net/entry/2020/06/11/102725)を参考にしました。）


unityでwebviewの実装ができない

### 実現したいこと

黒縁のマーカーのMaker trackingではないImage trackingとAR,jsを利用して、
WebARを実現したいのですが、fse,fes3,isetファイルを用意して、コードを記述して
画像にブラウザカメラをかざしてもなにも表示されません。

映像が再生されるはずなのですが…

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

エラーなどはないのですが、画像のように指定した画像にカメラをかざしても映像は再生されません。

※ここに記述しているソースコードはスクショ画像とは少し見た目が違います。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-21/4eb4a3c6-b051-4319-be1c-5c5907d39cd6.jpeg)

また、スマホ（iPhoneSE2）を横向きにしてかざすとQRコードの所に小さく何か四角い物がガタガタと
揺れながら表示されていて、多分これが表示させたい映像なのでしょうけど、これでは成功とは言えません…画面に大きく再生させたいのに…

### 該当のソースコード

```ここに言語名を入力
<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
        <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
        
        <script>
      alert('【使い方・注意事項】この後カメラが表示されますが、そのカメラを専用画像にかざしてください。\機関車の映像が流れます。\nボリュームマークをタップすると音声が出ます。\n詳しくはカメラ表示後のインフォメーションをタップしてください。');
    </script>
       
    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            vr-mode-ui="enabled: false"
            device-orientation-permission-ui="enabled: false"
            embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
        >

            <a-assets>
                <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>
            </a-assets>

<a-nft
      type="nft"
      url="https://akibashinji.fun/train/assets/train"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
                <a-video
                link="https://jr-central.co.jp/"
         animation-mixer="loop:repeat"
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-nft>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

```

### 試したこと

NFT Creatorで下記の画像のような設定でファイルを作ったり
nmpをアップデートしてみました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-21/e3cc07ff-df0e-44ec-8383-32605710a922.png)


【WebAR】Image trackingを使って指定の画像にブラウザカメラをかざしても映像が再生されない。

### 前提・実現したいこと
ar.jsを使ってマーカーにスマホのカメラを向けるとARで映像が流れるようにしたがAndroid端末では再生されないので
再生したい。

### 発生している問題・エラーメッセージ
iPhoneSE（第二世代）iOS15.3の実機でSafariやChromeのブラウザ上でカメラを立ち上げてマーカーにかざすと
videoタグで指定した映像が再生されるのですが、Android端末（GalaxyのAndroid OS 10 5年ほど前の端末）でChromeで
カメラを立ち上げてやると16:9の画面はでるのですが、真っ黒で何も再生されません。
ちなみに動画をタップすると再生されるしくみなのですが、タップしても再生されません。

### 該当のソースコード

```ここに言語名を入力
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">

<script src="aframe-master.min.js"></script>

<script src="aframe-ar.js"></script>
</head>
<body style='margin:0px; overflow:hidden;'>
        <a-assets>
          <video id="ar-video" poster="img.jpg" crossOrigin="anonymous" type="video/mp4" src="test.mp4" autoplay loop="true" playsinline webkit-playsinline controls />
          <audio src="videopath" autoplay></audio>

</a-assets>
          
        <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
          
          <a-marker type='pattern' url='pattern-test-100.patt'>
              <a-video src="#ar-video" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"></a-video>
          </a-marker>
          <a-entity camera></a-entity>
        </a-scene>
        <script>
          window.addEventListener('click', function () {
            var video = document.querySelector('#ar-video');
            if (video.paused == true) {
              video.play();
              } else {
              video.pause();
            }
          }, false);
         
        </script>
        <script>
          // ビデオ格納用の変数定義を追加
          var video = null;
  
          AFRAME.registerComponent('registerevents', {
              init: function () {
                  var marker = this.el;
  
                  // マーカーを検出したイベントの登録
                  marker.addEventListener('markerFound', function () {
  
                      // マーカー認識したら、ビデオ再生
                      if (video == null) {
                          video = document.querySelector('#ar-video');
                      }
                      video.play();
                  });
  
                  // マーカーを見失ったイベントの登録
                  marker.addEventListener('markerLost', function () {
                      
                      // マーカー認識が外れたら、、ビデオ停止
                      video.pause();
                  });
              }
          });
      </body>
    </html>
```

ar.jsを使ってマーカーにスマホのカメラを向けると映像が流れるようにしたがAndroid端末では再生されない

WebGL(Three.js)、WebVRともに初心者のものです。

以前このような質問をさせて頂きました。

> 3D空間内でWebサイトを表示する方法は？
[https://teratail.com/questions/40572](https://teratail.com/questions/40572)

こちらで頂いた回答を元に、
[CSS3DRenderer.js](https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js)を使って、teratailを3D空間に表現するというのはできた(下記参照)のですが、

※ソースコード：[https://github.com/afroscript/3Dteratail ](https://github.com/afroscript/3Dteratail )
※デモ：[http://usaqwako.sakura.ne.jp/3Dteratail/](http://usaqwako.sakura.ne.jp/3Dteratail/)

これを次はVR空間で表現したい（スマホVRで見れるようにしたいです）と考えています。

そこで、[こちらの記事](https://html5experts.jp/edo_m18/18552/)を参考に、いろいろと書き換えてみたのが下記なのですが、おそらくそもそもCSS3DRenderer.jsがVRに対応してないみたいで実現できず。。。

※ソースコード：[https://github.com/afroscript/teraVR360](https://github.com/afroscript/teraVR360)
※デモ（真っ黒画面で何も表示されません。。。Consoleからエラーメッセージは確認できます）：
 →  [http://usaqwako.sakura.ne.jp/teraVR360/](http://usaqwako.sakura.ne.jp/teraVR360/)
※```Uncaught TypeError: cssRenderer.setPixelRatio is not a function```とのエラーメッセージが出てます

何か実現できる方法はあるのでしょうか？？
あるいは今のCSS3DRenderer.jsを使った方法でも、何か改善すれば実現できるのでしょうか？？

ヒント等でもけっこうです。
どなたかご教示いただけますと幸いでございます…！！

よろしくお願いいたします。

一応、現在書いているJavaScriptを掲載しておきます。([上記のGitHubにあるmain.js](https://github.com/afroscript/teraVR360)と同じものです)

```JavaScript
/*
 * WebGLRendererの生成
 */
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
//CanvasをDOMツリーに追加
document.body.appendChild(renderer.domElement);


/*
 * CSS3DRendererの生成
 */
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
cssRenderer.domElement.style.margin = 0;
cssRenderer.domElement.style.padding = 0;
cssRenderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild( cssRenderer.domElement );


/*
 * シーンの追加
 */
var scene = new THREE.Scene();
var cssScene	= new THREE.Scene();


/*
 * カメラの生成
 */
var fov = 75;
var aspect = window.innerWidth / window.innerHeight;
var near = 0.1;
var far = 10000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
var camera_position_x0 = 0;
var camera_position_y0 = 0;
var camera_position_z0 = 0;
camera.position.set(camera_position_x0,camera_position_y0,camera_position_z0);


/*
 * VR用コントローラを生成（OrbitControlsは一旦//で消してる）
 */
var controls = new THREE.VRControls(camera);
// var controls = new THREE.OrbitControls(camera, renderer.domElement);


/*
 * VREffectの生成(2分割画面を構築する)
 */
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
var cssEffect = new THREE.VREffect(cssRenderer);
cssEffect.setSize(window.innerWidth, window.innerHeight);


/*
 *VRマネージャの生成
 */
var manager = new WebVRManager(renderer, effect);
var cssManager = new WebVRManager(cssRenderer, cssEffect);


//////////////////////////////////////////////////////
/*
 *WebGLSceneにオブジェクトを追加していく
 */
//Object(床をつくってみる)
var pcWidth = 256;
var pcHeight = 256;
var floorGeo = new THREE.PlaneGeometry(pcWidth,pcHeight);
var floorMesh = new THREE.MeshBasicMaterial({color:0xc0c0c0});
// var floorMesh = new THREE.MeshBasicMaterial({wireframe:true});
var floor = new THREE.Mesh( floorGeo, floorMesh );
var objePositionX = 0;
var objePositionY = 0;
var objePositionZ = -500;
floor.position.set(objePositionX, objePositionY, objePositionZ);
// floor.rotation.x = Math.PI/2;
scene.add( floor );


/*
 *cssSceneにオブジェクトを追加していく
 */
var element = document.createElement('iframe');
element.src = 'https://teratail.com/';
element.style.width = pcWidth + 'px';
element.style.height = pcHeight + 'px';
// create the object3d for tjhis element
var cssObject = new THREE.CSS3DObject( element );
// we reference the same position and rotation
cssObject.position.set(objePositionX, objePositionY, objePositionZ);
cssObject.rotation = floor.rotation;
// add it to the css scene
cssScene.add(cssObject);


/*
 * Lightをシーンに追加
 */
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0,30,-50);
scene.add(light);
cssScene.add(light);


/*
 *環境光を追加
 */
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);
cssScene.add(ambient);


/*
 *補助軸の表示(最終的に消す)
 */
// var axis = new THREE.AxisHelper(1000);
// cssScene.add(axis);
// scene.add(axis);



/*
 *アニメーションループ  
 */
var lastRender = 0;
function animate(timestamp) {
  // var delta = Math.min(timestamp - lastRender, 500);
  lastRender = timestamp;

  //VRコントローラのupdate
  controls.update();

  //VRマネージャを通してシーンをレンダリング
  manager.render(scene, camera, timestamp);

  //アニメーションループ
  requestAnimationFrame(animate);
}

// アニメーションの開始
animate(performance ? performance.now() : Date.now());
```

CSS3Dレンダリングで3D空間に生成した要素をWebVRで見るようにはできないのでしょうか？？

###前提・実現したいこと
画面をタップして動画を再生・一時停止を行い，シークバーをつけたい。
端末はiphoneです。

###発生している問題・エラーメッセージ

```
一旦，jsにスクリプトを埋め込んでみましたが，動きません。
シークバーについてはjsの組み込み方及び組み込み場所が分からず，手つかずです。

```

###該当のソースコード
```ここに言語を入力
gitにソースを置いています。
https://github.com/takimegu/ios

```

###補足情報(言語/FW/ツール等のバージョンなど)
iphoneで実現させたいです。

プレイヤーに動画のコントロール機能を埋め込みたい

### 前提・実現したいこと

　A-Frameを用いたWebVRのシステムを作ろうとしています。そのシステムをタブレット端末で
使用した際に、画面をスワイプさせると表示しているオブジェクトを回転させて好きな方向から
観察できるようにしたいと考えております。様々な方の作成されたコードを参考にして、試行錯誤しているのですが、以下のコードをだとオブジェクトが移動してしまいます。オブジェクトは
移動せずに表示された位置で回転する（スワイプした分だけ、その方向に回転する）方法がわからず行き詰まっております。
　知識がある方がいらっしゃいましたら、教えていただきたく質問させていただきました。
　お時間あるときにお答えいただければ幸いです。よろしくお願いいたします。

### 発生している問題・エラーメッセージ

```
オブジェクトが移動してしまう。位置は動かさず好きな方向から観察できるようにしたい。
```

### 該当のソースコード

```ここに言語名を入力
<!DOCTYPE html>
<html>
  <head>
    <title>multitouch-look-controls example</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

    <script src="https://morandd.github.io/aframe-multitouch-look-controls/multitouch-look-controls.js"></script>

    <script src="qrcode.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>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>

      
      <a-entity camera position="1 3 3" multitouch-look-controls></a-entity>
    </a-scene>



    
    <div id="qrcode" style="position:absolute; left:5px; top:5px"></div>
    <script type="text/javascript">
    if (!AFRAME.utils.device.isMobile()){
      new QRCode(document.getElementById("qrcode"), {
        text: "https://morandd.github.io/aframe-multitouch-look-controls/example/",
        width: 100,
        height: 100
      });
    } // Only show QR code if we're not already on mobile
    </script>

  </body>
</html>
```

### 補足情報（FW/ツールのバージョンなど）

使用機器　iPhone X (iOS 14.5.1)

A-Frameで画面をスワイプすることで物体を回転させたい

### 前提・実現したいこと

AframeのARモードでボタンを押すと音が流れるボタンを実装したいのですが
Javascriptの初心者で上手くいきません。
どこが間違ってるかご指摘いただきたいです

ボタンが動作しない
```
エラーメッセージ
```
<script>
      AFRAME.registerComponent('sound-on',{
        init: function () {
          var entity = document.querySelector('sound');
           let musicplay = () => {        
            entity.components.sound.playSound()        
           }     
            this.el.addEventListener('click', musicplay);     
        }
      });
    </script>
```
https://glitch.com/edit/#!/arafrae
```

### 試したこと

https://aframe.io/docs/1.2.0/components/sound.html#example
https://github.com/aframevr/aframe/blob/master/examples/boilerplate/webxr-dom-overlay/index.html
https://learn.framevr.io/project5/part2

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。