【個人開発】マイクラの建築物配布サービスを作ったメモ part2

はじめに

先日投稿した記事からさらに色々追加したのでメモ

作ったサービスは以下です
https://poscra.com/

追加要素

• 記事への埋め込み画面
• 3Dモデルのカメラ設定保存

記事への埋め込み画面

こちらは何かというと3Dモデルをiframeで読み込めるようにした形です。
Figmaとかの埋め込みを参考にデザインしました。
詳細ページに埋め込みタグをコピーできるボタンを設置してます。

やった内容としては画面いっぱいにCanvasを広げて表示することと、
Figmaのように下部にロゴやリンクなどを置きました。

埋め込む際のセキュリティ的な設定の部分では
レスポンスヘッダに X-Frame-Options で SAMEORIGINが設定されていると外部サイトに埋め込めないので
埋め込みページだけ除外してヘッダを設定するように LaravelのMiddlewareを設定しました。

Kernel.php

<?php
// 省略
protected $middlewareAliases = [
                :
                :
                :
    'xframe' => \App\Http\Middleware\XFrameSameOriginMiddleware::class,
];

XFrameSameOriginMiddleware.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class XFrameSameOriginMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'SAMEORIGIN');
        return $response;
    }
}

web.php

Route::group(['middleware' => ['xframe']], function() {
    // 埋め込みページ以外に上記のMiddlewareを設定
});

Route::get('埋め込みページ', function(){});

自分の場合Nginxの設定を見るとデフォルトで上記のヘッダが付くようになっていたので、合わせてチェックしました。

3Dモデルのカメラ設定保存

埋め込みも追加したことで、3Dモデルを表示する際の画角などを設定できるようにしたいということで、
調べてやりました。

結果としては以下の記事を参考にしました。
https://discourse.threejs.org/t/how-to-save-the-exact-position-of-camera/26815/3

やった内容ですが、
まずLivewireのコンポーネントの変更とテーブルのカラム追加で
画角やカメラの位置などをDBに保存するので、それ用のプロパティを追加しました。
中身はJSONです。

投稿時と編集時のサムネイルを設定するボタンを押した際に上記のプロパティに反映されるようにjsを修正

$wire はそのままだと使えなかったんですがスクリプト部分を
@script @endscript で囲めば使えました

document.addEventListener('サムネイル設定イベント', (ev) => {
    // このイベントはコンポーネントで発火してます

    // コンポーネントに　$attachment_options　を追加してます
    $wire.$set(
        'attachment_options',
        {
            position: camera.position,
            rotation: camera.rotation,
            zoom: camera.zoom,
            target: controls.target
        }
    );
});

あとは表示部分でDBから取ってきたJSONをいい感じにして
camera, orbitcontroleに入れる

今後追加したい機能

• 記事投稿機能
  • 埋め込みを使って記事を書けるようにしたい
• ユーザごとのページ作成
  • あわよくばフォローしたりされたりできれば