gistfile1.js

function init() {
    window.Store = {}
    window.Store.pos = [
        [1,1,1,1],
        [1,1,1,1],
        [1,1,1,1],
    ]
    window.Store.rot = [
        [1,1,1,1],
        [1,1,1,1],
        [1,1,1,1],
    ]
}

// Canvasから回転座標を渡されて計算した結果を保存する
function writeCurrentPositionFromCanvas(rot: number[][]) {
    window.Store = // 回転座標を計算した結果を入れる
}

const readCurrentRotationHooks = () => {
    return [window.Store.pos, window.Store.rot]
}

const warpPinPoint = (pinId: string) => {
    // ピンの位置を参照して自分の位置をピンの座標に変更する
    // これをCanvasや全画面に共有する
    // window.Store.pos = // 新しい座標を入れる
    // window.Store.rot = // 新しい角度を入れる
}

function DisplayRotationComponent() {
    const [pos, rot] = readCurrentRotationHooks()
    // 毎フレーム更新したい
    return (
        <div>
            <p>pos: {pos}</p>
            <p>rot: {rot}</p>
        </div>
    )
}



function App() {
    // 
    const [pos, rot] = readCurrentRotationHooks()
    useEffect(
        () => fooFunc(pos, rot) // 初回だけ処理したい, 
        []
    )
    return (
        <div>
            <DisplayRotationComponent />
        </div>
    )
}