ビジュアル

JS（WebGL）で作る立体的な六角形を照らすリアルな光

投稿日 2026/01/28

更新日 2026/1/28

立体的な形状を「それらしく」見せるうえで、最も重要なのは光の扱いです。
色や模様だけでは、奥行きや存在感は生まれません。

本デモでは、WebGLによるライティングを使い、六角形という規則的な立体構造を、光によってリアルに浮かび上がらせることを目的としています。
単なる装飾ではなく、形状と光の関係性そのものを体験できる表現です。

Preview プレビュー

Code コード

HTML

<div id="app">
  <canvas id="webgl-canvas"></canvas>

  <div class="hero">
    <h1>HEXAGONAL</h1>
    <h2>LIGHT</h2>
  </div>
</div>

CSS

body, html, #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}
#app {
    position: relative;
    font-family: "Montserrat", sans-serif;
}
#webgl-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hero {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 0 20px;
    /* スマホ時の端の余白 */
    text-align: center;
}
h1, h2 {
    margin: 0;
    color: white;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(177, 19, 19, 0.5);
    line-height: 0.95;
    user-select: none;
}
/* clamp(最小値, 推奨値, 最大値) */
h1 {
    font-size: clamp(40px, 10vw, 70px);
    font-weight: 900;
}
h2 {
    font-size: clamp(20px, 6vw, 40px);
    font-weight: 700;
    opacity: 0.9;
    margin-top: 10px;
}

JavaScript

import Grid1Background from 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.16/build/backgrounds/grid1.cdn.min.js'
const canvasElement = document.getElementById('webgl-canvas');
const bg = Grid1Background(canvasElement);
bg.grid.setColors([
    0xB11313, 0xB11313, 0xB11313,
    0x000000,
    0x2B3784, 0x2B3784,
    0x000000
]);
bg.grid.light1.color.set(0xFFFFFF);
bg.grid.light1.intensity = 1800;
bg.grid.light2.color.set(0xFFFFFF);
bg.grid.light2.intensity = 600;
window.addEventListener('resize', () => {
    if (bg.resize) bg.resize();
});

Explanation 詳しい説明

仕様

本デモは、フルスクリーンの canvas 要素上で WebGL を使用して描画されています。
JavaScript 側からグリッド構造とライティングを制御し、六角形の立体形状が光に反応して見えるよう設計しています。

描画には Three.js ベースのコンポーネントを使用し、シーン、カメラ、ライトを最小構成で組み立てています。
CSS はレイアウトとテキスト表示のみに使用し、光や立体表現には関与していません。

光と立体感の考え方

この表現では、六角形そのものを主役として見せるため、光の当たり方によって面の向きや凹凸が自然に伝わることを重視しています。

複数のライトを組み合わせることで、明るい面と暗い面のコントラストを作り、六角形の立体構造が視覚的に理解できるようになっています。

単に明るく照らすのではなく、光が当たる部分と当たらない部分の差をしっかり作ることで、リアルな質感と奥行きを表現しています。

カスタマイズ

JavaScript 側の設定を変更することで、表現を調整できます。

グリッドの配色
六角形グリッドの色を変更することで、印象を大きく変えられます。
ライトの色と強さ
スポットライトの color や intensity を調整することで、シャープな照明から柔らかい照明まで幅広く対応できます。
光のバランス
複数のライトの強度差を調整することで、陰影を強調したり、全体を均一に見せたりすることが可能です。