このプロジェクトの .js ファイルは、ふつうの Web ページに読み込んで使うものではありません。 Babylon.js Playground（バビロン・ジェイエス・プレイグラウンド）という、 ブラウザの中で3Dのプログラムを書いて即座に実行できる公式サイトのための形になっています。

1. Playground を開く

   playground.babylonjs.com をブラウザで開きます。左が入力欄、右が3Dの画面です。 パソコンのほうがやりやすいですが、スマホでも動きます。

2. もとから入っているコードを全部消す

   左側をクリックして、Ctrl+A（Mac は ⌘+A）で全選択 → Delete。 まっさらにしてから貼るのがコツです。混ざると動きません。

3. トースト.js の中身を全部コピーして貼る

   最初の1本は トースト.js がおすすめです。14本のなかでいちばん構造が素直で、 「四角い板の上面に、す（気泡）を彫って、焼き色を塗る」だけでできています。 ソースを読むのページに 「コードをコピー」ボタンがあるので、それを押して Playground の左側に貼り付けます。

4. 実行する

   上の Run ボタン（または Alt+Enter）。 数秒〜十数秒待つと、皿の上にトーストが出てきます。 右下にスライダーが出るので、動かしてみてください。

   うまくいかないとき

   真っ黒のまま／なかなか出てこない — このプロジェクトは模様を画像として読み込まず、 実行するたびに 1ピクセルずつ計算して描いています。1024×1024 を何枚も焼くので、 出るまでに十数秒かかるサンプルがあります（たこ焼きとチョコレートが特に長い）。まず待ってみてください。

   エラーが出る — 貼り付けたときに古いコードが残っていないか確認してください。 物理エンジン（Havok）を使うサンプルは、その読み込みにも数秒かかります。

   動きがカクカクする — 3Dの計算をパソコンが全部やっています。 ブラウザの他のタブを閉じると軽くなります。

5. 数字をひとつ、わざと壊す

   ファイルの上のほうにある PRESETS の中から bake（焼き加減）や thickness（厚み）を探して、思いきり大きな値に書き換えて Run。 どの数字が何に効くかは、壊すといちばん早く分かります。 壊してしまっても、もう一度コピーして貼り直せば元どおりです。

6. 中身を覗いてみる（Inspector）

   Playground の右上にある Inspector を開くと、いま動いているシーンの中身が全部見えます。 左の Scene Explorer がメッシュ・材質・テクスチャの一覧、右がその設定です。 照準のボタン（Picker）を押してから画面の料理をクリックすると、 いま押したものがツリーのどれなのかを教えてくれます。

   ここで値を触ると、コードを書き換えなくてもその場で結果が変わります。 「この茶色はどのテクスチャなのか」「この面はどのメッシュなのか」を確かめるのに、 いちばん手っ取り早い道具です。

7. 次の1本へ

   トーストの次は 花見団子.js（球を潰して串に刺す）、 クッキー.js（皿に落として積む）あたりが読みやすい順です。 たこ焼き.js と ご飯.js は分量が多いので後回しでかまいません。

14本は、こんな料理です

主食（ごはん・トースト）、おかず（唐揚げ・焼き魚・ウィンナー）、粉もの（たこ焼き）、 汁物（お味噌汁）、甘いもの（クッキー・チョコレート・団子）、そして寿司。 わざと種類を散らしてあります。作り方が全部ちがうからです。 一覧は図鑑にあります。