Blockchain code Metaverse VR

Unity×VR×Blockchain(240)

スポンサーリンク

//tips

//unity/webview連動

Unity側にてスクロールができないか再度確認を行う。

確認したところ非常にもっさりしていたが固定画面内でのスクロールを行うことができた。google画面を一度クリックしていなかったことが昨日スクロールできなかった要因のよう。

そういえばwordpressなどのフレームワークを使用しているためスクロールのスクリプトを記述したことはなかったが、ドラッグイベント感知と画像の移動処理を組み合わせる仕組みになっていそう。3Dモデルを動かすのとイメージは同じかもしれない。

先のunity画面にカプセルと表示したい領域を設定し、そこにgoogleを表示させられないか検証してみる。

カプセル前にpanelを配置し、その中にgoogleなどのサイトの情報を表示させる方法を考える。

Panelのrecttransformを取得し、スクリーンの表示領域に対応させる。

https://qiita.com/fukaken5050/items/b0d0183c3c61630d9473

https://github.com/baba-s/UniWebViewMarginsFromRectTransform

先の参考ページにてWorldCornersToScreenCornersにてエラーが生じているので、WebViewSample2スクリプトにて反映オブジェクト取得部分から模索していく。

まずはrecttransformでの例があったのでそちらを参考にcanvas上の2d imageのrecttransfromを取得して、そこにページを反映できるようにしていく。

まずは位置情報の取得とデバッグ確認から行う。

上記参考ページのTestRectTransformToScreenSpaceRectスクリプトを参考に進めていく。こちらの[SerializeField] RectTransform _rectTrans;部分にcanvasに作成したimageを代入。

下記スクリプトを順次理解していく。

public class TestRectTransformToScreenSpaceRect : MonoBehaviour
{
[SerializeField] RectTransform _rectTrans;

private Rect _screenRect;

private void Update()
{
_screenRect = CalcurateScreenSpaceRect(_rectTrans);
}

反映したい2dオブジェクトのrecttransformを取得してCalcurateScreenSpaceRectを実行する。計算結果はRectという四角形のx,y,width,height情報となる。

private static Rect CalcurateScreenSpaceRect(RectTransform rectTrans)
{
var canvas = rectTrans.GetComponentInParent<Canvas>();

GetComponentInParentで親オブジェクトのcanvasコンポーネントを取得。

var camera = canvas.worldCamera;

新たに4点の座標をvector3で作成し、imageの4隅の情報を取得していく。

var corners = new Vector3[4];

GetWorldCorners (Vector3[] fourCornersArray);を利用することにより、arrayの形で4隅の情報を一度に入手できるので、取得した情報を

rectTrans.GetWorldCorners(corners);

ワールド座標をスクリーン座標に変換するにはRectTransformUtility.WorldToScreenPointを使う。ここでカメラが必要になっているのは、どのカメラにとってのスクリーン座標に変換するのかを定義しなければならないため。

var screenCorner1 = RectTransformUtility.WorldToScreenPoint(camera, corners[1]);
var screenCorner3 = RectTransformUtility.WorldToScreenPoint(camera, corners[3]);

ここからweb表示するscreenRect情報について整理していく。

//左下基準
var screenRect = new Rect();
screenRect.x = screenCorner1.x;
screenRect.width = screenCorner3.x - screenRect.x;
screenRect.y = screenCorner3.y;
screenRect.height = screenCorner1.y - screenRect.y;

Debug.Log(screenRect);

対角の点をとっているのでrectの4情報は入手できた。

#if false
//左、上、右、下
var margin = new Vector4( screenCorner1.x, Screen.height - screenCorner1.y, Screen.width - screenCorner3.x, screenCorner3.y );
Debug.Log("margin x:" + margin.x + "y:" + margin.y + "z:" + margin.z + "w:" + margin.w );
_WebView.SetMargins( (int)margin.x, (int)margin.y, (int)margin.z, (int)margin.w );
#endif
return screenRect;
}

ここまでで実行してやるときちんとCanvas上のimageをスクリーン座標に変換した値を入手できた。

(x:313.00, y:330.00, width:100.00, height:100.00)

これらの情報をもとに新たにTexture2Dで色付けしたものを生成することができる。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.