const frames = [
    {
        name: 'frame0',  // フレーム名（一意な識別子）
        data: [/* この時点でのtraceデータ */]
    },
    {
        name: 'frame1',
        data: [/* 次の時点でのtraceデータ */]
    },
    // ...
];

// シミュレーションデータ（時系列）
const time = [0.0, 0.1, 0.2, 0.3, 0.4];
const xs = [0, 1.5, 3.2, 5.1, 7.3];
const ys = [0, 0.5, 1.1, 1.8, 2.6];
const zs = [100, 101, 102, 103, 104];

// Trace 0: 軌道全体（静的 - 常に表示）
const trace3dStatic = {
    x: xs,  // 全データ
    y: ys,
    z: zs,
    type: 'scatter3d',
    mode: 'lines',  // 線のみ
    name: '軌道',
    line: {
        color: 'lightgray',
        width: 2
    }
};

// Trace 1: 現在位置マーカー（動的 - フレームで更新）
const trace3dMarker = {
    x: [xs[0]],  // 初期位置（1点のみ）
    y: [ys[0]],
    z: [zs[0]],
    type: 'scatter3d',
    mode: 'markers',  // マーカーのみ
    name: '現在位置',
    marker: {
        size: 10,
        color: 'red'
    }
};

// frames配列を作成
const frames = [];
for (let i = 0; i < time.length; i++) {
    frames.push({
        name: `frame${i}`,  // ユニークな名前
        data: [
            // Trace 0は静的なので省略（変化しない）

            // Trace 1: 現在位置マーカーのみ更新
            {
                x: [xs[i]],  // この時点の位置
                y: [ys[i]],
                z: [zs[i]]
            }
        ]
    });
}

const layout = {
    title: '3D軌道アニメーション',
    scene: {
        xaxis: { title: 'X (m)' },
        yaxis: { title: 'Y (m)' },
        zaxis: { title: 'Z (m)' }
    },
    height: 700
};

// Plotly.newPlot()でグラフとframesを渡す
Plotly.newPlot(
    'plot3d',  // div要素のID
    [trace3dStatic, trace3dMarker],  // traceデータ配列
    layout,  // layout
    { frames: frames }  // configオブジェクト内にframesを指定
);

// データポイント数
const totalPoints = xs.length;  // 例: 3000点

// 目標フレーム数
const targetFrames = 300;

// スキップ間隔を計算
const skipInterval = Math.max(1, Math.floor(totalPoints / targetFrames));
// 例: 3000 / 300 = 10 → 10点ごとに1フレーム作成

const frames = [];
for (let i = 0; i < totalPoints; i += skipInterval) {
    frames.push({
        name: `frame${i}`,
        data: [
            {
                x: [xs[i]],
                y: [ys[i]],
                z: [zs[i]]
            }
        ]
    });
}

// 軌道全体（静的）
const trace3dStatic = {
    x: xs,  // 全データ
    y: ys,
    z: zs,
    type: 'scatter3d',
    mode: 'lines',
    name: '軌道'
};

// 現在位置マーカー（動的）
const trace3dMarker = {
    x: [xs[0]],  // 初期位置
    y: [ys[0]],
    z: [zs[0]],
    type: 'scatter3d',
    mode: 'markers',
    name: '現在位置'
};

// グラフ描画
Plotly.newPlot('plot3d', [trace3dStatic, trace3dMarker], layout, { frames: frames });

// 自動再生開始
Plotly.animate('plot3d', null, {
    frame: {
        duration: 50  // 各フレームの表示時間（ミリ秒）
    },
    transition: {
        duration: 0  // フレーム間の遷移時間（0で即切り替え）
    },
    mode: 'afterall'  // 全フレームを順次再生
});

// Trace 0: 軌道（静的）
// Trace 1: 現在位置マーカー（動的）
// Trace 2: 速度ベクトル（動的）

const frames = [];
for (let i = 0; i < totalPoints; i += skipInterval) {
    frames.push({
        name: `frame${i}`,
        data: [
            // Trace 0（静的）は省略

            // Trace 1: 現在位置
            {
                x: [xs[i]],
                y: [ys[i]],
                z: [zs[i]]
            },
            // Trace 2: 速度ベクトル
            {
                x: [xs[i], xs[i] + vx[i]],
                y: [ys[i], ys[i] + vy[i]],
                z: [zs[i], zs[i] + vz[i]]
            }
        ]
    });
}

// ❌ 悪い例: 静的トレースも毎回更新
frames.push({
    name: `frame${i}`,
    data: [
        { x: xs, y: ys, z: zs },  // 軌道全体（不要な更新）
        { x: [xs[i]], y: [ys[i]], z: [zs[i]] }  // 現在位置
    ]
});

// ❌ 悪い例: 全データポイントをフレーム化（3000フレーム）
for (let i = 0; i < xs.length; i++) {
    frames.push({...});
}