前提・実現したいこと
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> <!-- Look cam. --> <a-entity camera position="1 3 3" multitouch-look-controls></a-entity> </a-scene> <!-- To view this scene on mobile --> <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)
あなたの回答
tips
プレビュー