🦊

【WebXR】”BLOCKVROCK”でTinkercadの3Dモデルを動かす

2023/02/05に公開

JavaScript

WebXR

3dモデル

tech

【テンプレートテスト】

レベルエンター社の山本さんと協力して、ボランティアで「他の方がBLOCKVROKで作品作りの参考にできそうなシンプルテンプレート」を試作しています。
今回は「Tinkercadから取り込んだ3Dモデルを簡単に動かしてみる」ことができるテンプレートを作ってみました。採用されたら、BLOCKVROKのテンプレートから選択できるかも？

【今回のテンプレート(仮)】

・テンプレ仮 - 水槽でお魚を泳がそう！

【作り方の説明】

アイディアとしては「面白そうな作品がテンプレートにあれば、それを参考に新しい作品が増えるはず！その時に分かりやすい説明があれば、テンプレートだけで学びを深められるはず」という仮説を元に制作しています。そのため、BLOCK部分のコメントに「学べること、作り方」を追加してあります。

1. BLOCK部分

2. CODE部分

もっと分かりやすい書き方はあるかもしれませんが、取り急ぎ見やすいことを意識して書きました。
CODEタブに記載したJavascript

お魚さんの左右移動

/*** 初期設定 ***/
/* 回転軸 */
let _degree_y;  // Y軸(計算用)
let degree_y;   // Y軸
/* フラグ：移動 */
let move_flg_x = "none";    // X軸

/*** Loop 設定 ***/
forever(()=>{
    /* ラジアン(radian)を度(degree)に変換 */
    _degree_y = block.object3D.rotation.y * ( 180 / Math.PI ) ;
    /* 小数点1桁の値に変換(切捨て) */
    degree_y = Math.round(_degree_y);
    // console.log("degree_y", degree_y)

    /* 移動：左右(X軸) */
    if( move_flg_x == "right" ) {   // 右に移動する場合
        if( block.object3D.position.x > 2 ) {  // X軸：3まで右に移動させる
            /* 回転：Y軸/速度 0.02 */
            block.object3D.rotation.y += 0.01;
        } else {
            /* 移動：X軸/速度 0.02 */
            block.object3D.position.x += 0.02;
        }
    } else if( move_flg_x == "left" ) {   // 左に移動する場合
        if( block.object3D.position.x < -2 ) {  // X軸：-3まで左に移動させる
            /* 回転 Y軸 */
            block.object3D.rotation.y += 0.01;
        } else {
            /* 左移動 */
            block.object3D.position.x -= 0.02;
        }
    } else {    // 通常時
        block.object3D.rotation.y += 0.01;
    }

    /* 方向転換を行う角度を指定 */
    if( degree_y == 90 ) {  // 90度の場合
        move_flg_x = "right";
    } else if( degree_y == 270 ) {  // 270度の場合
        move_flg_x = "left";
    } else if( degree_y == 360 ) {  // 回転値リセット(ラジアン(radian)) 
        block.object3D.rotation.y = 0.00;
    }
})