カテゴリー: 未分類

注意　カスみたいなまとめ記事です　内容は無いです

以下のURLから SF Symbols をダウンロードしましょう。

https://developer.apple.com/sf-symbols

こんな感じでネイティブアプリとして、systemimage を検索できるのでめっちゃ便利

swiftUI でのコーディング中にアイコン付きのボタンを追加したい時がよくあると思いますが、
SF Symbols のアプリを入れておけば直ぐに参照できます。

                Button {
                    presented.toggle()
                } label: {
                    Label("toggle inspector", systemImage: "info.circle")
                }

よく使う SF Symbols 紹介

よく使うもので言うとこんな感じかな（メモを兼ねて幾つか紹介）

info系
info.circle は頻繁に使う

ヘルプ機能には questionmark.circle

色の変更などの編集系には

paintbrush

通知系の

bell

macOS なら絶対使う
サイドバー関係のsymbol

sidebar.right

Rearity Composer Pro を使って炎のパーティクルを再現したので下記にその際の設定の画像を貼っておきます。

Emmiter

まずはエミッターの設定
公式のDeveloperのビデオの中でも最初にエミッターからいじることをおすすめされていました。
ポイントはサイズとEmitterShapeの選択欄で表現したい形に近いものを選ぶことです。

Loopのチェックが入ってることを確認して、再生ボタンを押して、
右サイドバーにある再生ボタン▶️を押して動作確認をしましょう。

Particle

次にパーティクルの設定です。
炎のエフェクトはデフォルトでプリセットに入っていなかったので自分で設定しました。

こんな感じです。

Birth Rate の設定の数値を1000程度に設定すると、よりリアルな豊かな表現になるのですが、
あまり数値を上げすぎると重くなるようなので低くすることを心がけました。

低い値に設定すると、
PropertiesのSizeを大きめに設定しないとスカスカになるので、
少しチープな感じにもなりますが、逆にポップになっていいかなって感じで実装しました。

炎を再現するときにカラーは中心部を明るくして、
先端の方に少しブラックの入った垢に設定すると、煤けた感じが表現できていい感じでした。

Noiseを設定すると、ランダム性が出るのでおすすめです。

Attract の設定で上下方向（Y軸）の値を正の値にして、他の軸の方向を０にしないと風に靡かれたような表現になるので注意です。

Vortexの設定をすると回転の表現になるので、一応設定しました。

終わりに

今後もVisionOSの開発もしていきます。仕事等の連絡あればフォームからお願いします。

cannnot preview in this file

というエラーが出て全く動画が読み込まれない時があります。

そんな時は動画のファイルをXCodeで開いて、
右のインスペクターからTarget MemberShipに自分のプロジェクトを選択しましょう。

動画を扱うたびにこのことを忘れてパニクるので備忘録がてらです。

SwiftUIを使ったカメラの実装で、フロントカメラとバックカメラの切り替えについての記事です。

他サイトにもいろんな方法は乗っていると思いますが。自分のメモように残しておこうと思います。

トグルボタンの設定

カメラのアイコンのついたボタンです。これを押すとカメラが切り替わるようにしたいと思います。

Button(action: {
    camera.switchCamera()
}) {
    Image(systemName: "arrow.triangle.2.circlepath.camera")
        .font(.largeTitle)
        .padding()
}
.background(Color.white.opacity(0.7))
.clipShape(Circle())

機能

前回の記事に以下コードを追記すればOKです。

func switchCamera() {
        currentCameraPosition = currentCameraPosition == .front ? .back : .front
        updateCameraPosition()
    }

全コード

特に出し惜しみする必要もないので、ここまでのコードを下に全て載せます。

コピペしてこれが動かなかったら、この記事がもう古くなったことでしょう。

import SwiftUI
import AVFoundation

struct CameraView: View {
    @StateObject var camera = CameraViewModel()

    var body: some View {
        ZStack {
            CameraControll(camera: camera)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Spacer()
                Button(action: {
                    camera.switchCamera()
                }) {
                    Image(systemName: "arrow.triangle.2.circlepath.camera")
                        .font(.largeTitle)
                        .padding()
                }
                .background(Color.white.opacity(0.7))
                .clipShape(Circle())
            }
        }
    }
}

struct CameraControll: UIViewRepresentable {
    @ObservedObject var camera: CameraViewModel

    func makeUIView(context: Context) -> UIView { camera }
    func updateUIView(_ uiView: UIViewType, context: Context) {}
}

class CameraViewModel: UIView, ObservableObject {
    var previewLayer: AVCaptureVideoPreviewLayer?
    var currentCameraPosition: AVCaptureDevice.Position = .front
    var session = AVCaptureSession()

    override func layoutSubviews() {
        super.layoutSubviews()
        _ = initCaptureSession
        previewLayer?.frame = bounds
        fixCameraOrientation()
    }

    lazy var initCaptureSession: Void = {
        updateCameraPosition()
    }()

    private func updateCameraPosition() {
        session.inputs.forEach { session.removeInput($0) }

        guard let device = AVCaptureDevice.DiscoverySession(deviceTypes: [.builtInWideAngleCamera],
                                                            mediaType: .video,
                                                            position: .unspecified)
                .devices.first(where: { $0.position == currentCameraPosition }),
              let input = try? AVCaptureDeviceInput(device: device) else { return }

        session.addInput(input)

        if previewLayer == nil {
            let previewLayer = AVCaptureVideoPreviewLayer(session: session)
            layer.insertSublayer(previewLayer, at: 0)
            self.previewLayer = previewLayer
        }

        session.startRunning()
    }

    func switchCamera() {
        currentCameraPosition = currentCameraPosition == .front ? .back : .front
        updateCameraPosition()
    }

    private func fixCameraOrientation() {
        let rotation: CGFloat = CGFloat(getDeviceOrientation().rawValue) * 90
        previewLayer?.transform = CATransform3DMakeRotation(rotation / 180 * CGFloat.pi, 0, 0, 1)
    }

    private func getDeviceOrientation() -> Orientation {
        guard let interfaceOrientation = UIApplication.shared.windows.first(where: { $0.isKeyWindow })?.windowScene?.interfaceOrientation else {
            return .right
        }
        switch interfaceOrientation {
        case .landscapeLeft:
            return .left
        case .landscapeRight:
            return .right
        case .portrait:
            return .down
        case .portraitUpsideDown:
            return .up
        default:
            return .right
        }
    }
}

enum Orientation: Int {
    case right = -1, down = 0, left = 1, up = 2
}

#Preview {
    CameraView()
}

SwiftUIでカメラ機能を実装する方法についてです。

基本機能の実装

import SwiftUI
import AVFoundation

struct CameraContentView: View {
    var body: some View {
        CameraView()
            .edgesIgnoringSafeArea(.all)
    }
}

struct CameraView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView { BaseCameraView() }
    func updateUIView(_ uiView: UIViewType, context: Context) {}
}

class BaseCameraView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        _ = initCaptureSession
        (layer.sublayers?.first as? AVCaptureVideoPreviewLayer)?.frame = bounds
    }

    lazy var initCaptureSession: Void = {
        guard let device = AVCaptureDevice.DiscoverySession(deviceTypes: [.builtInWideAngleCamera],
                                                            mediaType: .video,
                                                            position: .unspecified)
                .devices.first(where: { $0.position == .front }),
              let input = try? AVCaptureDeviceInput(device: device) else { return }

        let session = AVCaptureSession()
        session.addInput(input)
        session.startRunning()

        layer.insertSublayer(AVCaptureVideoPreviewLayer(session: session), at: 0)
    }()
}

このコードを実行すると、フロントカメラが起動し、画面全体に映像が表示されます。

画面の向きに合わせてカメラの向きを変える

このままだと、端末の向きを変えた時に縦：横＝16:9の比率を保ったまま回転してしまうので、画面の向きに応じたカメラの映像が出てこなくなってしました。

そこで下記コードを追記しました。

enum Orientation: Int {
    case right = -1, down = 0, left = 1, up = 2
}

private func getDeviceOrientation() -> Orientation {
    guard let interfaceOrientation = UIApplication.shared.windows.first(where: { $0.isKeyWindow })?.windowScene?.interfaceOrientation else {
        return .right
    }
    switch interfaceOrientation {
    case .landscapeLeft:
        return .left
    case .landscapeRight:
        return .right
    case .portrait:
        return .down
    case .portraitUpsideDown:
        return .up
    default:
        return .right
    }
}

private func fixCameraOrientation() {
    let rotation: CGFloat = CGFloat(getDeviceOrientation().rawValue) * 90
    previewLayer?.transform = CATransform3DMakeRotation(rotation / 180 * CGFloat.pi, 0, 0, 1)
}

これらの関数をlayoutSubviewsに追加することで、デバイスの向きが変わるたびにカメラの向きも適切に調整されます。

参考文献様

以下の記事に助けられました感謝

https://zenn.dev/platina/articles/5b9683f6d50938

MacOS向けのAppを制作しています。

動画を再生する機能をつけたところ横に帯が出てしまいました。
（下記画像：紫のボーダーの内側左右に黒い帯が出てしまっている）

調べたところ、iOS向けにこれを消す記事があったのですがMacOSではこれが使えなかったので、試してみたことを記事に残しておきます。

この記事のことをやるとした画像のようになります。角丸を飛び越えてしまってるので調子が必要そう…。

事前準備　動画の再生まで

まず、動画の準備から始めます。再生したい動画ファイルをプロジェクトに追加し、そのURLをAVPlayerにセットします。

import SwiftUI
import AVKit

struct VideoView: View {
    private let player = AVPlayer(url: Bundle.main.url(forResource: "HowToSetIcon", withExtension: "mov")!)

    var body: some View {
        PlayerView(player: player)
    }
}

黒い帯を消す方法

次に、AppKitの力を借りて、NSViewRepresentableを使用してAVPlayerViewをラップします。これにより、動画がビュー全体にフィットするように調整できます。

struct PlayerView: NSViewRepresentable {
    let player: AVPlayer

    func makeNSView(context: Context) -> NSView {
        let playerView = AVPlayerView()
        playerView.player = player
        return playerView
    }

    func updateNSView(_ nsView: NSView, context: Context) {
        // none
    }
}

class AVPlayerView: NSView {
    var player: AVPlayer? {
        didSet {
            (self.layer as? AVPlayerLayer)?.player = player
        }
    }

    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        self.wantsLayer = true
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.wantsLayer = true
    }

    override var layer: CALayer? {
        didSet {
            guard let layer = self.layer as? AVPlayerLayer else { return }
            layer.videoGravity = .resizeAspectFill
        }
    }

    override func makeBackingLayer() -> CALayer {
        return AVPlayerLayer()
    }
}

これで、動画がフルスクリーンで表示され、再生や停止のUI部品は表示されません。これにより、動画の横に黒い帯が表示される問題を防ぐことができます。

やっぱめんどくさい（追記）

SwiftUI標準のプレイヤーだとホバー時に再生停止ボタンと、シークバーが標準で付いているので、AppKitを使ってしまうとそれを自分で構築しなければならないので大変…。

最初にも書いたけど、CornerRadiusかけたときに切り取れるようにする方法がわからない。

結局動画編集して比率を変更してAspectRatioを指定することにした。コードで切り取っていい感じにするのは諦めた…。

VideoPlayer(player: player)
        .aspectRatio(4 / 3, contentMode: .fit)

まず、必要なライブラリをインポートします。

import SwiftUI
import AVKit

ここでSwiftUIはAppleが提供するUIツールキットで、AVKitはオーディオとビデオの再生をサポートするフレームワークです。

次に、SampleViewという名前のViewを作成します。

struct SampleView: View {

このViewは、動画を再生するためのプレーヤーを持っています。

private let player = AVPlayer(url: Bundle.main.url(forResource: "SampleVideo", withExtension: "mov")!)

ここでAVPlayerは動画を再生するためのオブジェクトで、Bundle.main.url(forResource:withExtension:)メソッドを使ってアプリのメインバンドルから動画ファイルのURLを取得しています。

次に、bodyプロパティを定義します。

var body: some View {

このプロパティは、Viewの内容を定義します。ここでは、VStackを使ってビデオプレーヤーを配置します。

VStack {
    VideoPlayer(player: player)

VideoPlayerはAVKitが提供するビデオプレーヤーのViewで、先ほど作成したplayerを引数に取ります。

そして、onAppear()メソッドを使って、Viewが表示されたときに動画を再生します。

.onAppear() {
    player.play()

さらに、NotificationCenterを使って動画が終了したときに動画を最初から再生するように設定します。

NotificationCenter.default.addObserver(forName: .AVPlayerItemDidPlayToEndTime, object: player.currentItem, queue: .main) { _ in
    player.seek(to: .zero)
    player.play()
}

これにより、動画は無限にループします。

以上が、SwiftUIを使って動画を再生し、ループさせる方法の解説です。

よっしゃ、みんな！今日はSwiftUIでSwiftUIで要素をN個づつ改行する方法を教えてやるぜ！
最終的には以下の画像みたいになったぜ！

まず、こんな感じのコードがあるとするよな

let colors: [Color] = [.red, .blue, .green, .yellow, .orange, .pink, .purple, .gray, .black, .white]

HStack(spacing: 8) {
    ForEach(colors, id: \.self) { color in
        Circle()
            .fill(color)
            .frame(width: 8, height: 8)
            .tag(color)
            .onTapGesture {
                self.selectedColor = color
            }
    }
}
.pickerStyle(.segmented)

このコードで、色を一列に並べてるだけだけど、これを複数行に分けたいとき、どうすればいいかって話だ。

それには、以下のようにすればいいんだよ

let colors: [Color] = [.red, .blue, .green, .yellow, .orange, .pink, .purple, .gray, .black, .white]

let itemsPerRow = 4

VStack {
    ForEach(0..<(colors.count + itemsPerRow - 1) / itemsPerRow, id: \.self) { row in
        HStack(spacing: 8) {
            ForEach(0..<itemsPerRow, id: \.self) { item in
                let index = row * itemsPerRow + item
                if index < colors.count {
                    let color = colors[index]
                    Circle()
                        .fill(color)
                        .frame(width: 8, height: 8)
                        .tag(color)
                        .onTapGesture {
                            self.selectedColor = color
                        }
                }
            }
        }
    }
}
.pickerStyle(.segmented)

このコードで、行ごとの項目数（itemsPerRow）を設定して、それぞれの行と項目に対してForEachループを使って、
各項目のインデックスをrow * itemsPerRow + itemで計算して、そのインデックスが色の配列の範囲内にある場合にだけ、対応する色の円を表示してるんだ。

これで、色の配列を任意の数の項目ごとに分けて表示できるぜ！

ただし、最後の行は他の行よりも項目数が少ない場合があるから、それが問題なら適切に調整してみてくれよな。

また、spacingやframeの値も必要に応じて調整してくれ。このコードはあくまで一例だからな！

以上、SwiftUIでN個の要素を並べる方法の紹介だったぜ！お前らもぜひ試してみてくれよな！

MacOS向けのAppを制作しています。

SliderをFormの中で使うとラベル部分と、スライダー部分で横に２分割されてしまいます。
下の写真が問題の現象。

結局解決策がわからず、Formを使うことを諦め、以下のようになんちゃってFormをVstackで作ることにしました。
結果的に以下のようにSliderを幅いっぱいに表示することができるようになりました。

いかになんちゃってFormのセクションの役割をするVStackを貼っておきます。

struct CustomVStack<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        VStack(alignment: .leading, content: {
            content
        })
        .padding(.vertical, 12)
        .padding(.horizontal, 8)
        .frame(maxWidth: .infinity)
        .overlay(
            RoundedRectangle(cornerRadius: 4)
                .stroke(Color.gray, lineWidth: 0.5)
        )
    }
}

使用するときは以下のように別Viewから呼び出してあげればOKです。

CustomVStack {
    TextField("Text", text: $inputText)
        .font(.body)
    SizeSlider(textSize: $textSize)
    ColorPicker("Color", selection: $textColor)
}

CustomVStack {
    FolderColorPicker(folderColor: $folderColor)
}

みんな、こんにちは！今日はSwiftUIでSliderを使って文字のサイズを変更する方法を紹介するよ。これは特に、UIに数値を表示するときに役立つよ。

どうやるの？

まず、Sliderビューを作成し、そのvalueパラメータに文字のサイズを表す変数（この場合はtextSize）をバインドするんだ。そして、Sliderのinパラメータで文字のサイズの範囲を指定するよ。

Slider(value: $textSize, in: 32...200, step: 1)

このコードでは、textSizeの値が32から200の範囲で変更できるようになっているんだ。

次に、Textビューのfont修飾子を使って文字のサイズを変更するんだ。具体的には、font修飾子の引数に「.system(size:)」を指定し、その引数「size」に文字のサイズを表す変数（この場合はtextSize）を指定するよ。

Text("Hello, SwiftUI")
    .font(.system(size: textSize))

このコードでは、textSizeの値に応じて文字のサイズが変更されるよ。

小数点以下を表示しないようにする

Textビューのspecifierパラメータを使って書式を指定するんだ。具体的には、%0.fを指定することで小数点以下を表示しないようにすることができるんだ。

Text("\(textSize, specifier: "%0.f")")
    .foregroundColor(.blue)

このコードでは、textSizeの値を文字列に変換し、その際に小数点以下を表示しないようにしているんだ。

まとめ

以上の方法で、SwiftUIを使用してSliderを使って文字のサイズを変更することができるよ。

画像の比率を保ったまま追加した画像の拡大縮小をしたかった。ただそれだけだった。

前提条件

この記事では、以下のようなSwiftUIのビューがあると仮定します。

struct CanvasView: View {
    ...
    @State private var image: NSImage? = nil
    ...
}

struct CanvasToSave: View {
    ...
    @Binding var userImage: NSImage?
    ...
}

CanvasViewはユーザーが画像を選択できるビューで、選択した画像はimageに保存されます。CanvasToSaveはキャンバスに画像を描画するビューで、描画する画像はuserImageから取得します。

スケールの追加

まず、CanvasViewとCanvasToSaveの両方に新たなBindingを追加します。これにより、ユーザーが画像のスケールを動的に変更できるようになります。

// CanvasView.swift
struct CanvasView: View {
    ...
    @State private var imageScale: CGFloat = 1.0
    ...
}

// CanvasToSave.swift
struct CanvasToSave: View {
    ...
    @Binding var imageScale: CGFloat
    ...
}

次に、CanvasViewにスライダーを追加して、ユーザーが画像のスケールを調整できるようにします。

// CanvasView.swift
struct CanvasView: View {
    ...
    var body: some View {
        ...
        Form {
            ...
            Section("Image Scale") {
                Slider(value: $imageScale, in: 0.1...2.0, step: 0.1)
            }
            ...
        }
    }
}

最後に、CanvasToSaveで画像を描画する際にスケールを適用します。

// CanvasToSave.swift
struct CanvasToSave: View {
    ...
    var body: some View {
        Canvas { context, size in
            ...
            if let img = userImage {
                let userSelectImage = Image(nsImage: img)
                let scaledSize = CGSize(width: img.size.width * imageScale, height: img.size.height * imageScale)
                context.draw(userSelectImage, in: CGRect(x: midPoint.x - scaledSize.width / 2, y: midPoint.y - scaledSize.height / 2, width: scaledSize.width, height: scaledSize.height))
                context.blendMode = GraphicsContext.BlendMode.softLight
            }
        }
    }
}

以上の変更により、ユーザーがスライダーを使用して画像のスケールを動的に変更できるようになります。画像のスケールは、CanvasToSaveのuserSelectImageに反映されます。

MacOSでViewをPNGで書き出しただけ。

結構大変だったのでここに足跡を残しておこうと思う。試行錯誤もあったけれど、今はただ疲れたので完成したコードだけ載せておく。いろんなサイト様を参考にしたので、少し寝たら参考リンクを貼ろうと思う。

以下コード

//
//  CanvasView.swift
//  FolderCustomizer
//
//  Created by coiai on 2023/12/15.
//

import SwiftUI

struct CanvasView: View {
    @State private var inputText = ""
    @State private var presented = true
    @State private var folderColor: FolderColorPicker.FolderColor = .Blue
    
    var body: some View {
        VStack {
            CanvasToSave(inputText: $inputText, folderColor: $folderColor)
        }
        .inspector(isPresented: $presented) {
            Button("Save Image") {
               
            }

            Form {
                Section("Text") {
                    TextField("Text", text: $inputText)
                        .font(.body)
                        .padding()
                }
                Section("Folder Color") {
                    FolderColorPicker(folderColor: $folderColor)
                }
            }
            .inspectorColumnWidth(min: 200, ideal: 300, max: 400)
            .toolbar {
                Spacer()
                Button {
                    presented.toggle()
                } label: {
                    Label("toggle inspector", systemImage: "info.circle")
                }
            }
            Spacer()
        }
    }
}

struct CanvasToSave: View {
    @Binding var inputText: String
    @Binding var folderColor: FolderColorPicker.FolderColor
    
    var body: some View {
        Canvas { context, size in
            let rect = CGRect(origin: .zero, size: size).insetBy(dx: 5, dy: 5)
            // キャンバスの中心の点
            let midPoint = CGPoint(x: size.width / 2, y: size.height / 2)
            
            
            let text = Text(inputText)
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.white)
            
            context.draw(text, at: midPoint, anchor: .center)
            context.blendMode = GraphicsContext.BlendMode.softLight
            
            let image = Image(folderColor.rawValue)
            context.draw(image, in: rect.insetBy(dx: 0, dy: 0))
        } symbols: {
            RotateObjView()
                .tag(0)
        }
        .frame(width: 512, height: 512)
    }
}

#Preview {
    CanvasView()
}

どうしたの？

自作のモデルをThree.jsで表示させようとした際に、モデルが表示されず困ってしまいました。

対処法としてはオブジェクトを public の下に配置することで解決しました。

完成したもの

実際の作業

ディレクトリ構成

public
  |- object
  |  |- Monkey.mtl
  |  |_ Monkey.obj
  |_ etc...
src
package.json

コード

以下object3d.tsxのコードです。

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';

const Object3D = () => {
  const mount = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mount.current) return;

    const width = mount.current.clientWidth;
    const height = mount.current.clientHeight;

    // scene, camera, and renderer initialization
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });

    // controls for mouse rotation
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    // camera position
    camera.position.z = 2;

    // renderer settings
   const light = new THREE.PointLight(0xffffff, 1, 1000);
   light.position.set(0, 0, 10); // ライトの位置を設定します（x, y, z）

    // ライトをシーンに追加
    scene.add(light);

    // mount the renderer to the DOM
    mount.current.appendChild(renderer.domElement);

    // MTL and OBJ loader
    const mtlLoader = new MTLLoader();
    const objLoader = new OBJLoader();
    const MonkeyMtl = '/Objects/Monkey.mtl';
    const MonkeyObj = '/Objects/Monkey.obj';

    mtlLoader.load(
      MonkeyMtl,
      (materials) => {
        materials.preload();
        objLoader.setMaterials(materials);
        objLoader.load(
          MonkeyObj,
          (object) => {
            object.position.set(0, 0, 0); // set position to center
            object.scale.set(0.5, 0.5, 0.5); // scale down
            scene.add(object);
            console.log('Added object to scene');
          },
          (xhr) => {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
          },
          (error) => {
            console.log('An error happened', error);
          }
        );
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      },
      (error) => {
        console.log('An error happened', error);
      }
    );

    // animation
    const animate = () => {
      requestAnimationFrame(animate);

      // controls update
      controls.update();

      // rendering
      renderer.render(scene, camera);
    };

    // start animation
    animate();

    // handle resize
    const handleResize = () => {
      if (!mount.current) return;

      const width = mount.current.clientWidth;
      const height = mount.current.clientHeight;

      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      <h2>モデルテスト</h2>
    <div
      ref={mount}
      style={{ width: '100%', height: '100vh' }}
    />
    </div>
  );
};

export default Object3D;