ブログ
開発とデザイン、あとは雑記。
Three.js の浮島を静的サイトに載せる
浮島ページは自分のスクリプトだけを読み込みます。シーンは実行時に生成し、Three.js はこのページのチャンクにだけ入り、最初の HTML には空の舞台しかありません。
モールス符号 — 表が一つ、曖昧さが二つ、細部が三つ
モールス自体は簡単で、難しいのは細部です。空白は誰のものか、全角の点をどう正規化するか、そして「1 単位」がどれだけか。
落下点を計算するが、少しだけ外す相手
遊べるポン AI に必要なのは二つ。ボールの落下点を正確に求めること、そして毎回わざと少し外すこと。前者は三角波一回、後者はラリーごとに引き直します。
モデリングなしで立体感を出す — 手で三角形を組む浮島
島の岩はモデリングツールから書き出したものではありません。五層の不規則なリングを実行時に組み上げ、頂点色とフラットシェーディングだけで石らしく見せています。
千二百インスタンス — 庭を数回の描画に収める
草六百、花百二十、苔石八十五、低木四十二。庭の密度は数を減らすのではなく、InstancedMesh で同じ種類を一描画にまとめて作ります。
シーンの光 — 三つの灯りと一度だけ計算する影
半球光が環境色、キーライトが向きと影、リムライトが島を背景から引き剥がし、残る七つの点光源は灯りを足すだけです。