1. チュートリアルの概要

3Dクリスマスツリーは、molecularmmeng020425が2025年11月に立ち上げた革新的なプロジェクトです。没入感のある映画のような視覚体験を提供します。ReactとThree.js（R3F）をベースに構築されたこのプロジェクトは、高度なAIジェスチャー認識技術を活用し、ユーザーはジェスチャーでクリスマスツリーの形状（集合と分散）を簡単に制御し、視点を自由に回転させることができます。単なるクリスマスツリーではなく、思い出が詰まったインタラクティブなデジタルアートギャラリーです。数千もの精巧なパーティクルエフェクト、まばゆいばかりのライトショー、そして吊り下げられた貴重なポラロイド写真が織りなす、豪華で鮮やかなバーチャルクリスマスツリーは、ユーザーにこれまでにない感覚体験を提供します。

このチュートリアルでは、リソースとして CPU を使用します。

2. プロジェクト例

3. 操作手順

1. コンテナを起動した後、API アドレスをクリックして Web インターフェイスに入ります

2. 使用手順

1. 写真を用意する

プロジェクトディレクトリ内のフォルダ「/openbayes/home/christmas-tree/public/photos/」を見つけます。トップ/カバー画像の名前は「top.jpg」とします（ツリーの頂上にある3Dの五芒星に表示されます）。幹の写真の名前は「1.jpg」、「2.jpg」、「3.jpg」などとします。推奨事項：正方形または4:3のアスペクト比の画像を使用し、ファイルサイズを小さく抑えてください（スムーズな再生を確保するため、1枚あたり500KB未満が理想的です）。

2.写真を置き換える

ご自身の写真を/openbayes/home/christmas-tree/public/photosフォルダにコピーし、既存の画像を上書きしてください。ファイル名の形式は変更しないでください（1.jpg、2.jpgなど）。 

3. 写真の数を変更する（増減）

写真を追加する場合（例えば、デフォルトの31枚から100枚に増やす場合）、dependencies.shファイルを開いてください。export VITE_TOTAL_PHOTOS=31と表示されます。「31」の数字を、追加する写真の数に変更し、コンテナを閉じて再起動してください。 

4. ジェスチャーコントロールの説明

このプロジェクトにはAIジェスチャー認識システムが組み込まれています。操作するにはカメラの前に立ってください（画面右下にカメラ映像を確認するためのDEBUGボタンがあります）。

🖐 手のひらを広げて分散: クリスマスツリーが爆発して粒子と写真のシャワーを降らせます。

✊ 握りこぶし（クローズドフィスト）で組み立てましょう。すべてのパーツが瞬時に組み合わさり、完璧なクリスマスツリーが完成します。

👋 手のひらを左右に動かすと、視点が回転します。手を左に動かすと木は左に向き、右に動かすと木は右に向きます。