この投稿はBabylon.js Advent Calendar 2025の記事です。
前回に引き続きBabylon.js Editorを使ってみます。今回はちょっとホラーな風景を作ってみました。
こんな感じです。
使用した環境
- Mac OS Tahoe 26.1
- Babylon.js Editor v5.2.4
1. まずは全体を暗くする
何もしないと、このように全体が明るい状態です。
これではホラーっぽくないので、Sceneオブジェクトを選択 (画像の左側)、InspectorのEnvironment TextureのLevel値を1から0.02のように低くします。
すると、全体が暗くなります。
2. ライトを部分的に設置する
単に暗いだけだと雰囲気が出ないので、ちょっとだけライトをつけてみます。
Babylon.jsには色々なライトがあります。こちらで紹介されていますが、今回はPoint LightとSpot Lightを使います。
https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction
それぞれの違いは下記の通りです。小規模な範囲をぼんやりと照らす (例：外灯とか) はPoint Light、局所的に照らす (例：懐中電灯) の場合はSpot Lightという感じと思います。
The Point Light
A point light is a light defined by a unique point in world space. The light is emitted in every direction from this point. A good example of a point light is a standard light bulb.
The Spot Light
A spot light is defined by a position, a direction, an angle, and an exponent. These values define a cone of light starting from the position, emitting toward the direction.
The angle, in radians, defines the size (field of illumination) of the spotlight's conical beam , and the exponent defines the speed of the decay of the light with distance (reach).
どちらの場合も、Graph Viewで右クリック > Add > Spot Light または Point Light を指定すると、シーン上にライトを表示できます。
ただし、Intensityが小さすぎるため見た目は何も変化しません。Spot Lightの場合は50000、Point Lightの場合は1000くらいにすると光っている感じが見えるようになります。
あとは、Sketch Fabから懐中電灯の3Dモデルを取得し、シーンに入れてみました。
sketchfab.com懐中電灯のそばにSpot Lightを設置し、懐中電灯から光が出ているように設定、懐中電灯自体が暗くて見えないので、そばにPoint Lightを設置しました。
すると、冒頭で紹介した雰囲気ができます。
近づいてみると、１本の懐中電灯が落ちていることが確認できます。
懐中電灯の持ち主はどこに行ったのか、、みたいなシーンになったと思います。
3. おわりに
コードを書かなくても絵作りができるのはよいですね。
