📚
WebXR初心者が「XRift」のワールドを作成してみた

2025/12/10に公開
こちらは 、"WebXR Advent Calendar 2025" の10日目の記事になります。

 自己紹介こんにちは。"とみゅ～"です。

普段は、受託系システム会社でWebシステムのフロントエンド／バックエンドや、スマホアプリ開発に関わっています。

2024年にVRChatを始めて Unity でアバター改変と、簡単なワールド制作をした経験がある程度で、3DやXR系の技術はほとんど触ってきませんでした。

VRChatでは技術・学術系イベントカレンダーに登録されているイベントに良く出没しています。

 この記事について今回の内容は、「WebXRをやってみたいけどなんもわからん！」な人が、12/25公開予定の 「XRift」 用のワールドをゼロから制作してみた、という体験談になります。

本家のドキュメントである、「ワールド開発」 の内容をなぞることになりますが、ワールド作成ってこんなに簡単！と雰囲気がイメージできる助けになればと思います。

 「XRift」について「XRift」 は sawa-zen さんが作成されている、Webブラウザ上で動作するクロスプラットフォームメタバースです。

WebXR Advent Calendar 2025 で、 12/25 に一般公開が予定されています。

 きっかけsawa-zenさんから、「XRiftにワールドアップロード機能実装したから作ってみてよ」と声をかけていただいたことで興味を持ち、ワールド作成を始めてみました。

 前提現在「XRift」はどんどんアップデートされ、機能が追加されています。

2025年12月初旬の内容となりますので、最新情報は「XRift docs」 を確認してください。

Windows11 + WSL(Ubuntu) + VSCodeで作成していますので、キャプチャやコマンドはWindowsで撮影したのものとなります。

 私が作っているワールド
「バーチャルオフィスのような使い方ができないかな～」と よくありそうな会社のオフィス をイメージしたワールドを作成しています。（豆腐建築でもそれなりに形になりそう、って狙いも？）
軽いワールドであることをモットーに作成していますので、スマホからでも動作すると思います。

 事前準備node のインストール
node/npm がインストールされていない人は、インストールしてください。
sudo apt update
sudo apt install -y nodejs
sudo apt install -y npm
「XRift CLI」のインストール
インストールコマンド
npm install -g @xrift/cli
参考：CLIのアップデート方法はこちらになります。
npm upgrade -g @xrift/cli
CLIから「XRift」にログイン
「XRift」にユーザー登録していない場合は、先にユーザー登録してください。
以下のコマンドでログインします。
xrift login
ブラウザが立ち上がるので、ログインを行います。

 XRiftワールド作成
 動作確認初期ワールドの作成
$ xrift create

✨ XRiftワールドを作成します

✔ プロジェクト名を入力してください … hello-world                           ※ 英小文字か数字、または ハイフンのみ可
✔ どこに作成しますか？ › 新しいディレクトリを作成                           ※ （選択）プロジェクト名で新しくフォルダを作成するか
✔ テンプレートを選択してください › デフォルト (WebXR-JP/xrift-test-world)   ※ （選択）テンプレートを作成していなければデフォルトで
✔ 依存関係をインストールしますか？ … yes                                   ※ デフォルトの yes

✨ XRiftワールドを作成します...

✔ テンプレートをダウンロードしました
✔ プロジェクトをカスタマイズしました
✔ 依存関係をインストールしました

✅ プロジェクトが作成されました！

次のステップ:
cd hello-world
npm run dev        # 開発サーバー起動
npm run build      # ビルド
xrift upload world # XRiftにアップロード    
テンプレートの初期状態で「XRift」へのアップロード
変更にとりかる前に、そのままアップロードできるか確認しておきましょう。
npm run build
xrift upload world
途中、ワールド名・ワールド説明が入力できますが、まずはデフォルトのまま進めます。
アップロードしたワールドを確認
「XRift」の マイワールド でアップロードされていることを確認します。


何事も変更する前にうまく動作しているか確認することが大事ですよね。

確認ができたらワールド作成を始めましょう。

 軽量ワールドを作成初期状態でテンプレートワールドのオブジェクトが配置されていますので、床とSkyboxのみにするところから始めてみます。
ワールド情報の修正
プロジェクトルートに、 xrift.json が存在しますので、

title と description を書き換えます。
例）
"title": "軽量ワールド",
"description": "とにかく軽いワールドです。",

thumbnail.png ファイルの名前をここで変更できますが、ワールドが出来あっがったらキャプチャして差し替えでよいです。
最低限のコンポーネントのみにします。
フォルダの状態

変更内容
./public フォルダを thumbnail.png 残して、それ以外削除
./src/components フォルダを空に
./src/world.tsx を書き換え
import { RigidBody } from '@react-three/rapier'
import { useRef } from 'react'
import { Mesh } from 'three'
import { COLORS, WORLD_CONFIG } from './constants'
import { Skybox } from '@xrift/world-components'

export interface WorldProps {
    position?: [number, number, number]
    scale?: number
}

export const World: React.FC<WorldProps> = ({ position = [0, 0, 0], scale = 1 }) => {
    const groundRef = useRef<Mesh>(null)
    const worldSize = WORLD_CONFIG.size * scale

    return (
        <group position={position} scale={scale}>
        <Skybox />


        {/* 照明設定 */}
        <ambientLight intensity={0.3} />
        <directionalLight
            position={[10, 10, 5]}
            intensity={1}
            castShadow
            shadow-mapSize-width={256}      // 軽量化のため、影を低解像度に設定
            shadow-mapSize-height={256}     // 軽量化のため、影を低解像度に設定
            shadow-camera-far={50}
            shadow-camera-left={-15}
            shadow-camera-right={15}
            shadow-camera-top={15}
            shadow-camera-bottom={-15}
            shadow-bias={-0.0005}
        />

        {/* 地面 */}
        <RigidBody type="fixed" colliders="cuboid" restitution={0} friction={0}>
            <mesh ref={groundRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow>
            <planeGeometry args={[worldSize, worldSize]} />
            <meshLambertMaterial color={COLORS.ground} />
            </mesh>
        </RigidBody>
        </group>
    )
}
VSCode拡張機能 triplex を導入していると、ワールドが確認できます。

Gitの初期化、および初回コミット
とりあえずローカルリポジトリで。必要あれば、githubで管理してください。
git init
git add .
git commit -m 'first commit'
Boxを配置
今回はテンプレートにもともと存在する、bloxGeometry をそのまま配置してみます。
追加{/* 箱 */}
<RigidBody type="fixed" colliders="hull" restitution={0} friction={0}>
    <mesh position={[3 * scale, 1 * scale, 3 * scale]} castShadow>
    <boxGeometry args={[2 * scale, 2 * scale, 2 * scale]} />
    <meshLambertMaterial color={COLORS.decorations.box} />
    </mesh>
</RigidBody>
triplexで見た状態



AIエージェントを使ってみる
私は GitHub Copilot をよく利用しているので、カスタム指示設定を行っておきました。

CLAUDE.mdに多くの情報が書かれているので、そのまま利用させてもらいます。
mkdir .github
ln -s ../CLAUDE.md .github/copilot-instructions.md
AIエージェントに円柱を追加させてみます
指示： 箱の隣に円柱を追加して


再度 Build & Uploadすると、円柱を追加したワールドが表示されました。


 まとめここまででなんとなく「XRift」のワールド作成について雰囲気が掴めたのではないかと思います。

以下、私がワールド作成中に感じたことをまとめてみます。
Unityとの比較
VSCodeで開発できるので起動が速い・軽い。
Git管理が簡単。Gitフローを使った変更管理が容易。
React+Three、TypeScript(.ts/.tsx)でサクッと開発できる。Udon/Soba、なにそれ？おいしいの？

.glb や .fbx 形式のオブジェクトが配置できるので、Blenderで自作したものやBoothなどで購入したリッチなモデルも配置できます。
Booth購入の場合、ライセンスや制約事項に注意してください。

AIエージェントが利用できる
「Boxにhoge.pngのテクスチャ張って」「fuga.glbを読み込みたい」など、AIエージェントに命令することで位置から調べなくても追加できます。

最終的にはThree.jsのドキュメントを見る必要はありますが、それっぽいものをAIが提案してくれるので、 なんもわからん！ な人も、何をしたらいいか参考になります。

技術スタックが開発者寄り
先人たちが技術的に再現できるものをサクッと作ってくれるので参考になります。

これからもっと出来ることが広がっていくと思いますので、楽しみに待ちましょう。


 最後に「XRift」は、いつでも・どこでも 気軽にワイワイできる場所になっていくと思いますので、興味ある方は今から一緒に始めてみませんか？
自己紹介

この記事について

「XRift」について

きっかけ

前提

私が作っているワールド

事前準備

XRiftワールド作成

動作確認

軽量ワールドを作成

まとめ

最後に

Discussion
