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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.