学校の教室

https://scrapbox.io/files/69bd12dfb9e150750aec72fa.png

https://scrapbox.io/files/69bd2bccb9e150750aec8b5a.png

Babylon.js Playground で日本の学校教室を再現するプロンプト

概要

Babylon.js Playground v1形式（単一ファイル、createScene関数）で、日本の中学校・高校の典型的な教室を基本メッシュのみで再現してください。外部テクスチャは使用せず、色指定のみで構成してください。

code:教室のレイアウト（カメラから見た配置）

正面壁（黒板）

Z = -D/2

┌─────────────────────────┐

│ │

窓│ 机 机 机 机 机 │ドア

(+X)│ 机 机 机 机 机 │(-X)

側│ 机 机 机 机 机 │側

│ 机 机 机 机 机 │

│ 机 机 机 机 机 │

│ 机 机 机 机 机 │

│ │

└─────────────────────────┘

背面壁

Z = +D/2

↑ カメラ位置（後方上空）

カメラ: 教室後方（+Z側）から正面壁（-Z方向）を見る

画面左 = 窓側（+X）: 大きな4連窓、外の景色が見える

画面右 = 廊下側（-X）: ドア（引き戸）2枚

天井・背面壁: 非表示（教室内部が見えるように）

table:教室の寸法

要素 寸法

教室 幅9m(X) × 奥行8m(Z) × 高さ3m(Y)

机 幅60cm × 奥行42cm × 高さ70cm

椅子 幅36cm × 奥行34cm × 座面高42cm

黒板 幅3.6m × 高さ1.2m、床から85cm

窓 幅1.4m × 高さ1.6m、腰壁高0.9m

ドア 幅0.9m × 高さ2.1m

カメラ設定

code:javascript

var camera = new BABYLON.ArcRotateCamera("cam",

Math.PI, // alpha: +Z側から-Z方向を見る（後方から正面へ）

Math.PI / 3.5, // beta: やや上から見下ろす

14, // radius

new BABYLON.Vector3(0, 1.2, 0), scene);

⚠️ 注意: alpha の値が左右配置を決定する

カメラの alpha を先に決め、それに合わせて窓(+X)・ドア(-X)を配置すること

code:ライティング

窓側(+X)から差し込む自然光:

DirectionalLight 方向 = (-1, -0.7, 0.2) ← +Xから-X方向へ

position = (W/2+2, 5, 0)

環境光:

HemisphericLight 上方向

蛍光灯（天井3組）:

PointLight × 3（各蛍光灯メッシュ位置）

GlowLayerで発光演出

構成要素の詳細

1. 教室構造体

table:構造

要素 メッシュ 備考

床 CreateGround receiveShadows = true

天井 なし 非表示（内部を見せるため）

正面壁 CreatePlane (DOUBLESIDE) 黒板のある壁

背面壁 なし 非表示

窓側壁(+X) CreatePlane × 2 上下パネルのみ（窓部分は開口）

ドア側壁(-X) CreatePlane (DOUBLESIDE) 全面壁

⚠️ 注意: Planeは必ず DOUBLESIDE にする

code:javascript

{ sideOrientation: BABYLON.Mesh.DOUBLESIDE }

片面描画だとカメラの向きによって壁や黒板が透明に見えてしまう。

⚠️ 注意: マテリアルにも backFaceCulling = false を設定

code:javascript

mat.backFaceCulling = false;

2. 黒板まわり

黒板本体: CreatePlane (DOUBLESIDE)、濃い緑色

黒板枠: CreateBox × 4本（上下左右）、アルミ色

チョーク受け: CreateBox（黒板下部に突き出し）

掲示物: CreatePlane × 4枚（黒板右側に2×2配置）

時計: CreateCylinder（文字盤）+ CreateTorus（枠）、黒板上部

3. 机（テンプレート → clone で 5列×6行 = 30セット配置）

code:構造

構造:

- 天板: CreateBox (幅0.60, 高0.025, 奥行0.42) → Y=0.70

- 脚: CreateCylinder × 4本 (径0.022, 高0.70) → Y=0.35

- 横バー: CreateBox × 2本（左右の脚を前後に接続）→ Y=0.18

- 物入れ: CreateBox (天板下) → Y=0.63

配置:

5列 × 6行、間隔 横1.2m × 縦1.05m

startX = -(cols-1) * spX / 2 ← 教室中央揃え

startZ = -D/2 + 2.4 ← 黒板から離す

4. 椅子（テンプレート → clone で配置）

code:構造

構造（実際の学校椅子を模した前脚/後脚分離型）:

- 座面: CreateBox (幅0.36, 高0.022, 奥行0.34) → Y=0.42

- 背もたれ板: CreateBox (幅0.32, 高0.20, 厚0.016) → Y=0.63, Z=+0.15

- 前脚: CreateCylinder × 2本 (径0.020, 高0.42) → Y=0.21, Z=-0.14

- 後脚: CreateCylinder × 2本 (径0.020, 高0.74) → Y=0.37, Z=+0.14

- 補強バー: CreateBox × 4本（前後左右の脚を矩形に接続）→ Y=0.22

配置:

各机の +Z方向（後ろ側）に 0.42m オフセット

わずかなランダム回転 (±0.05rad) でリアリティ付与

⚠️ 注意: 椅子の脚構造

前脚2本は短い（床〜座面高さ = 0.42m）

後脚2本は長い（床〜背もたれ上端 = 0.74m、背もたれ支柱と一体）

前脚4本 + 別途背もたれ支柱2本にすると、後脚と支柱が重複して浮いて見えるので NG

⚠️ 注意: 椅子の向き

生徒は -Z方向（黒板方向）を向いて座る

背もたれは +Z 側（生徒の背中側）に配置

背もたれが -Z側にあると後ろ向きになるので注意

5. 窓（+X側の壁、4連窓）

code:構造

構造（1窓あたり）:

- ガラス: CreatePlane (DOUBLESIDE, alpha=0.12)

- 上枠: CreateBox { width: fT, height: fT, depth: winW+fT }

- 下枠: 同上

- 左縦枠: CreateBox { width: fT, height: winH, depth: fT }

- 右縦枠: 同上

- 中央横桟: CreateBox { width: fT*0.7, height: fT*0.7, depth: winW }

- 中央縦桟: CreateBox { width: fT*0.7, height: winH, depth: fT*0.7 }

配置:

X = W/2 - 0.01（右壁面）

Z = -D/2+1.5 から 1.7m間隔で4枚

⚠️ 注意: 窓枠は回転させずに寸法で方向を制御する

窓が YZ平面上にある場合:

6. ドア（-X側の壁、引き戸2枚）

code:構造

構造:

- ドア本体: CreateBox (幅0.04, 高2.1, 奥行0.9)

- ドアガラス: CreatePlane (DOUBLESIDE, alpha=0.25)

配置:

X = -W/2 + 0.03（左壁面）

前方ドア: Z = -D/2 + 1.5

後方ドア: Z = D/2 - 1.5

7. 本棚（窓際）

code:構造

構造（オープン型: 背板+側板+天板+底板+棚板）:

- 背板: CreateBox (薄い板、+X側 = 壁に密着)

- 左側板: CreateBox

- 右側板: CreateBox

- 天板: CreateBox

- 底板: CreateBox

- 棚板: CreateBox × 3段（等間隔）

- 本: CreateBox × 各段5〜7冊（色違い、ランダムサイズ）

本の配置:

各棚板の上面に接するように Y = shelfY + bookH/2

背板の手前に並べる X = backX - bookDepth/2

Z方向に厚さ分ずつオフセットして横並び

⚠️ 注意: 本棚を中身の詰まった単一 Box にしない

単一Boxだと本が外面に貼り付いて浮いて見える。背板・側板・棚板を個別に作り、本を棚の中に正しく配置すること。

8. 教卓

code:構造

構造:

- 天板: CreateBox (幅1.05, 高0.04, 奥行0.6) → Y=0.75

- 前面パネル: CreateBox (生徒側に向く面)

- 左側板: CreateBox

- 右側板: CreateBox (clone)

配置: 黒板前 (0, 0, -D/2+1.1)

9. 蛍光灯（天井3組）

code:構造

構造（1組あたり）:

- 蛍光管: CreateBox × 2本（細長い白色 + emissiveColor）

- 取付台: CreateBox（やや大きめ）

- PointLight（直下を照らす）

配置: X = -1.8, 0, +1.8、Y = H-0.06

GlowLayer intensity = 0.3 で発光演出

10. 窓の外の背景

code:構造

- 緑（樹木/校庭イメージ）: CreatePlane → emissiveColor で発光

- 空: CreatePlane → 青色 + emissiveColor

- 配置: X = W/2 + 0.8（窓の外側）

11. 光の演出

code:構造

- 窓からの光の帯: CreatePlane × 4枚（各窓に対応）

床面に水平配置 (rotation.x = PI/2)

alpha = 0.18、暖色系 emissiveColor

窓から教室内側へ斜めに広がるイメージ

- ShadowGenerator:

useBlurExponentialShadowMap = true

blurKernel = 16

机の天板・物入れ・椅子の座面を addShadowCaster

マテリアル一覧

table:構造

名前 diffuseColor 用途

木目（明） (0.76, 0.60, 0.42) 机天板、椅子座面・背もたれ、棚板

木目（暗） (0.55, 0.40, 0.26) 物入れ、教卓、本棚フレーム

金属 (0.72, 0.72, 0.72) 脚パイプ、時計枠。specular高め

黒板 (0.15, 0.30, 0.15) 黒板本体。backFaceCulling=false

壁 (0.95, 0.93, 0.88) 側壁。backFaceCulling=false

正面壁 (0.88, 0.90, 0.85) 黒板周辺の壁

床 (0.72, 0.56, 0.38) フローリング

ガラス (0.85, 0.92, 1.0) alpha=0.12

窓枠 (0.92, 0.92, 0.92) 白色

黒板枠 (0.68, 0.68, 0.66) アルミ色

蛍光灯 emissive(0.95,0.95,0.88) 発光体

clone による大量配置のパターン

code:javascript

// テンプレート作成（非表示）

var template = new BABYLON.TransformNode("template", scene);

template.setEnabled(false);

// ... テンプレートの子メッシュを作成 ...

// clone で配置

for (var r = 0; r < rows; r++) {

for (var c = 0; c < cols; c++) {

var node = new BABYLON.TransformNode("inst_" + r + "_" + c, scene);

var children = template.getChildMeshes();

for (var i = 0; i < children.length; i++) {

m.setEnabled(true);

m.parent = node;

}

node.position = new BABYLON.Vector3(px, 0, pz);

}

}

出力形式

Babylon.js Playground v1形式（createScene 関数）

外部テクスチャ不使用

日本語コメント付き

よくある失敗と対策まとめ

table:まとめ

失敗 原因 対策

壁・黒板が透明 Planeの片面描画 DOUBLESIDE + backFaceCulling=false

窓とドアの左右が逆 カメラalphaと配置の不整合 alphaを先に決め、+X=窓、-X=ドアを統一

窓枠が飛び出す rotationで回転させた 回転不使用、Box寸法で方向制御

椅子の脚が浮く 短脚4本+別支柱2本が重複 前脚2本(短)+後脚2本(長・一体)に

本が本棚の外に浮く 本棚が中身詰まったBox 背板+側板+棚板のオープン構造に

椅子が後ろ向き 背もたれの Z座標が逆 背もたれ=+Z側（生徒の背中側）を徹底