WebGL 3Dランディングページを作成する

Sep 12, 2025

操作方法

（画像クレジット：未来）

WebGL 3Dランディングページを作成することは、あなたの聴衆に素晴らしい最初の印象を与える1つの方法です。 WebGLを使用すると、ブラウザで高品質の視覚的コンテンツを正しく配信できます。プラグインや特別な要件なしで実行できます。モダンなブラウザはすべて、モバイルデバイスとタブレットとともにWebGLをサポートしています。 WebGLを使用すると、素晴らしい3Dシーンを作成できます。それはWebVRの経験、ビデオを操作し、グラフィックシェーダのレンダリング、そしてはるかに多くのことを可能にすることができます。

このチュートリアルでは、架空の映画スタジオのためのランディングページ、相対的なスタジオを作るでしょう。不思議な物体がマウスの相互作用に応答して反射して回転するため、その概念は劇的で視覚的に魅力的です。粒子のホイズは、動くにつれて色を変えます。あなたはあなたのプロジェクトのためにあなた自身のプロジェクトのためにあなた自身を生成することを可能にするために、それぞれの手順を通して仕事をするでしょう。 ランディングページ ）。

Web用の強力な3Dレンダリングライブラリーの3.jsの付属の機能のみを使用します。あなたはそれをユニークにするためにあなた自身の画像をテクスチャとして使うことができます。表面の詳細、環境地図の使い方、そして深さと興味のあるレイヤーを追加する方法を強化するためのメッシュ、照明、およびテクスチャの利用についても学びます。

あなたの次のプロジェクトを燃料を供給するのに十分な以上のものがあるはずです。

始める前に、このチュートリアルのファイルをダウンロードしてください。

01.基本的なHTML Setup.

始めるには、あなたはあなたの3Dシーンを見るためにどこかに必要です。基本的なHTMLファイルをセットアップし、3.jsへのリンクを含めます。これは外部からホストされるか、またはから追加されます。ここで3.jsリポジトリ：。ページ全画面を作成し、スクロールバーを削除するための簡単なCSSをいくつか追加します。ファイルをローカルWebサーバに保存するので、テストする準備ができたときにHTMLを提供することができます。開始するには、次のコードを追加してください。

＆lt;！Doctype HTML＆GT;
＆lt; html＆gt;
＆lt;頭＆gt;
相対的なスタジオ＆lt; / title＆gt;
＆lt; scrc = "libs / three.min.js"＆gt; / script＆gt;
＆lt;スタイル＆gt;
HTML、Body {マージン：0;パディング：0;オーバーフロー：非表示; }
＆lt; /スタイル＆gt;
＆lt; / gt;
＆lt; body＆gt;
＆lt;スクリプト＆gt;
// 3Dコードはここに行きます
＆lt;＆script＆gt。
＆lt; / body＆gt;
＆lt; / html＆gt;

02.グローバルなバリエーションを追加します

コードの残りの部分を通して参照のためにいくつかの変数が必要です。今それらを設定してください。これには、粒子を保持するためのアレイ、四面体、マウス、レイキャスター、ライトの「T」変数が含まれます。

スクリプトタグの中には、次のコードを追加します。

 // vars.
var num = 30;
varオブジェクト= [];
var raycaster = new three.raycaster（）;
var mouse = new three.vector2（）;
var light、t;

03.シーン、カメラ、レンダリングを追加します

まず私たちのオブジェクトを含むシーンを追加する必要があります。それから私たちが必要としているように、それの中に動くことができるカメラを追加します。最初の属性はビューのフィールドです。 2つ目はアスペクト比です。また、3番目と4番目の属性に近いクリッピングプレーンを定義することもできます。最後に、シーンをキャンバスに描画するレンダラーを追加します。

スクリプトタグで次のコードを追加してください。

 //カメラを作成します
var camera = new three.perspeceCamera.
（65、ウィンドウwidth / window.innerHeight、
0.1,1000）。
camera.position.set（0.0,0.0,5）。
//シーンを作成します
var scene = new three.scene（）;

//レンダラを作成します
var renderer = new 3.WebGlRenderer（
{antialias：true}）;
renderer.setsize（window.innerwidth、ウィンドウ。
インナーハイト）;
document.body.appendChild（Renderer.domelement.
）;

04.スポットライトを追加します

次に、シーンに光を追加する必要があります。 Three.jsには、ポイント、方向、周囲、スポットライトなど、さまざまなライトが付属しています。これにスポットライトを使用してください。それはあなたに位置と方向性のあるプロパティを与え、後で望むならば影をキャストすることを可能にします。

次のコードを次に追加してスポットライトを追加します。

 //スポットライトを作成します
Light = New 3.Spotlight（0xccddff、.8）;
Light.Position.Set（0,0,5）;
SCENE.ADD（光）

05.アニメーションループを追加します

「レンダリングループ」と呼ばれることがあるアニメーションループは、理想的に60回毎秒と呼ばれます。フィルムは毎秒24フレーム（FPS）で実行され、これは目を中断することなく一定の動きを見るのに十分速いです。コンピュータアニメーションでは、少なくとも30 FPSを目指していますが、理想的には60fpsです。これにより、フレームが定期的にドロップされていても非常に滑らかな視覚的性能が確実になります。

このアニメーションループをrequestAnimationFrame関数にバインドします。これは2つのことです。まず、ブラウザが次のフレームをレンダリングする準備ができていることを確認します。また、アニメーションは、ユーザーがそのブラウザタブを表示しなくなったときにレンダリングを一時停止できることを意味します。

このコードを追加して、シーンをアニメーションループにレンダリングします。

 var animate = function（）{
requestAnimationFrame（アニメーション）;
renderer.render（シーン、カメラ）;
;;

//アニメーションループを起動します
animate（）;

06.地面の質感を読み込んでください

次に、シーンのためのグランドを作成します。起動するには、使用する画像をロードする必要があります。地面や壁の表面のようなもののためのテクスチャは、あなた自身の写真を撮ることによって作成され、慎重に調整されたエッジを調整することによって作成することができます Photoshop CC 。ただ彼らがうまくタイルすることができることを確認してください。すぐに始めるために、オンラインで素晴らしい図書館があります。 無料のテクスチャ 。

あなたはタイルされるものを選ぶことができます。これは、あなたが並んで置かれたならば、エッジがシームレスに混ざり合うでしょう。このためにタイルや石のようなものを選択できます。テクスチャラップオプションを使用してこれのラッピングを繰り返すことに注意してください。この例では、12x12の繰り返しを使用しています。シーンをテストしたら、画像に合わせて調整します。

 //地面の質感をロードします
var texture = new 3.textureLoader（）。
負荷（ "assets / stone.jpg"）;
texture.wraps = texture.wrapt = 3。
リピートラッピング
texture.repeat.cset（12,12）;

07.地面材を作成します

3.jsには、使用するさまざまな素材タイプが含まれています。材料は3Dオブジェクトを覆う皮膚として考えられています。あなたは軽いまたはフォンまたは子宮のシェーダの材料に反応しない基本的な材料を使うことができます。あなたはあなた自身のカスタムシェーダ材料も使うことができます。この地上では、物理素材を使用してください。それは非常にリアルな外観を持っていて、とてもよく光に反応します。拡散マップとしてロードしたテクスチャ、およびそれに特定のテクスチャがない場合は、バンプマップとしても使用してください。

 //地面を作成します
資料= New Three MeshphysicalMaterial（{MAP：Texture、BumpMap：Texture}）;

08.グランドメッシュを作成します

3Dオブジェクトの形状を定義するジオメトリとマテリアル（スキン）を組み合わせると、メッシュを作成します。地上では、簡単な計画が必要です。材料シェーダとテクスチャーは、複雑な表面の詳細の錯覚を作成します。

次のコードを追加してグランドメッシュを作成し、素晴らしい角度に回転してカメラの下に置きます。これによりコードが表示されていることを確認して、その外観を確認してください。ダイヤルする必要があるコードを調整してください。

 //グランドメッシュを作成します
var geometry = new stree.planebufferGeometry
（100,100）。
var argy = new shree.mesh（ジオメトリ、
材料 ）;
Ground.rotation.z = Math.pi / 180 * -45;
Ground.rotation.x = Math.pi / 180 * -90;
Ground.Position.y = -2.0;
SCENE.ADD（地上）

09.目的をロードします

次に、焦点の興味のための中央の3Dオブジェクトを追加します。これはあなたのシーンの星です、それであなたがそれをカバーするのが好きな質感を選んでください。注：このオブジェクトは非常に反射的にするでしょう、それでここにロードするテクスチャは地面よりも微妙な外観です。

 //オブジェクトテクスチャをロードします
var texture = new 3.textureLoader（）。
ロード（ "資産/ rock_01_diffusion.jpg"）;

10.環境マップを作成します

次に、その表面に反映されるオブジェクトの周囲に環境を作成します。あなたが望むなら、シーンとしてシーンにこれを追加することもできます。環境をロードするには、CubetextUreLoaderを使用します。使用する画像は、キューブの内側を肌に肌を肌を肌に肌を肌にしてキューブマップと呼ばれるシームレスなイメージを形成する必要があります。

 var envmap = new 3.CubeTextureLoader（）
.setPath（ 'assets /'）
.load（['px.jpg'、 'nx.jpg'、 'py.jpg'、 'ny。
JPG '、' pz.jpg '、' nz.jpg ']）;

11.四面体を追加します

3.jsには、シーンに使用できる多くのデフォルトのジオメトリが付属しています。クーラーの1つは四面体です。オブジェクトの顔数を定義するために、半径と「詳細」パラメータを取ります。

次のコードでシーンに1つ追加してください。

 // Tetrahedronを作成します
var geometry = new 3。
TetrahedronBufferGeometry（2,0）;
var material =新しい3.meshphysicalMaterial
（マップ：テクスチャ、envmap：envmap、
金属度：1.0、粗さ：0.0}）;
t =新しい3.mesh（ジオメトリ、素材）。
T.Rotation.x = Math.pi / 180 * -10;
scene.add（t）;

12.回転とカメラのターゲットを追加します

カメラが常にメインオブジェクトを見ていることを確認するには、camera.lookat関数を使用します。オブジェクトにも周囲の回転を追加することもできます。

このように見えるようにアニメート機能コードを更新してください。

 requestAnimationFrame（アニメーション）;
T.rotation.y  -  = 0.005;
camera.lookat（T.Position）;
renderer.render（シーン、カメラ）

13.パーティクルループを追加します

次に、シーンに周囲の粒子を追加します。これらは、後で追加する前景ビデオループと正しくブレンドし、インタラクティブです。複数のパーティクルを作成するために使用するコードを保持するための単純な 'for'ループを追加します。

（i = 0; i <= nt; i ++）の場合{ //パーティクルコードはここに行きます

14.パーティクルメッシュを作成します

最初にやることはパーティクルオブジェクトを作成することです。あなたは球、スプライト、またはあなたが望むオブジェクトを使ってこれをすることができます。今のところ、簡単な球を作ってみてください。

あなたのループの内側には、次のコードを追加してください。

 //新しいメッシュを作成します
var geometry =新しい3.sphereBufferGeometry（.1,6,6）。
var material = new 3.meshphysicalMaterial（{envmap：envmap、metalness：1.0}）;
Var Particle = New ShreeMesh（ジオメトリ、素材）。

15.ランダムな位置と距離を設定します

粒子は中央の物体を軌道にし、それらが宇宙をうまく満たし、有機的な外観を持つようにランダムに配置されるべきです。不規則な位置を設定してから、次のコードを追加してから、各粒子に一定の距離を割り当てます。

 //ランダム位置を設定します
Particle.Position.Set（Math.random（）* 100.0  - 
50.0,0.0、Math.random（）*  -  10.0）。
// Calc Distnaceを定数と割り当てます
物申す
var a = new 3.Vector3（0,0,0）;
var b =粒子。
var d = a.distanceto（b）;
粒子.Distance = D。

16.軌道の角度を設定します

軌道をより速くアニメートするには、軌道の角度定数を追加し、それらをパーティクルのプロパティとして保存します。これらのランダムなコンテンツの角度を定義するには、次のコードを追加します。

 // 2つのランダムだが一定の角度を定義する
ラジアンで
Particle.radians = math.random（）* 360 *数学。
PI / 180; //初期角度
particle.radians2 = math.random（）* 360 *数学。
PI / 180; //初期角度

17.シーンとコレクションにパーティクルを追加します

最後に、シーンにパーティクルを追加し、以前に定義したオブジェクト配列に追加します。これにより、後で簡単にすべての粒子を繰り返すことができます。

 //シーンにオブジェクトを追加します
scene.add（粒子）;
// コレクションに追加
objects.push（パーティクル）。

18.パーティクルにアニメーションを追加します

次に、パーティクルオブジェクトの位置と回転を更新する必要があります。これらの軌道はシーンセンターから一定の距離である。次のコードをAnimate関数に追加します。

（i = 0; i <= nt; i ++）の場合{ var o =オブジェクト[i]; O.rotation.y + = 01; if（i％2 == 0）{ O.Radians + =。005; O.Radians2 + =。005; } そうしないと { O.Radians - = =。005; O.Radians2 - =。005; } O.Position.x =（Math.cos（O.Radians）* o.Distance）; O.Position.Z =（Math.Sin（O.Radians）* o.Distance）; O.Position.y =（Math.Sin（O.Radians2）* o.Distance * .5）。 }

19.タイトルを追加してください

次に、画面の中央にタイトルを追加します。ブランドを紹介する名前。タイトルのためのレター間隔は素晴らしい映画の外観を与えます。あなたが好きなフォント/スタイルを使用してくださいが、インスピレーションのためのフィルムタイトル参照を見てください。私たちのリストを参照してください 無料のフォント 私たちのお気に入りのダウンロード可能なフォントのリストのため。

最初にあなたのタイトルのDOM要素を追加します。閉じるボディタグの前にスクリプトタグの後にこれを追加してください。

 相対的なスタジオ

あなたのファイルの上部のスタイルタグにタイトルの次のスタイルを追加します。

H1 {カラー：ホワイト;位置：絶対;上：50％。
zインデックス：100;幅：100％。テキスト整列：中央;
変換：翻訳（0、-100％）;フォントファミリー：
'Raleway'、Sans-Serif。フォント重量：100;
レター間隔：40px; text-transform：
大文字フォントサイズ：16px; }

20.ビデオループを追加します

あなたの着陸に深さを作成するための素晴らしいトリックは、小さなビデオループを追加することです。あなたは煙、ほこりまたは粒子を使うことができます。これらはオンラインで広く入手可能な、または多数のビデオとフィルムメイキングパッケージの一部です。 H1タグの後に次のビデオタグを追加してください。それを「muted」と自動再生に設定したいことに注意してください。これにより、ビデオがモバイルデバイスでもオンラインで再生できるようになります。

＆lt;ビデオID = "VideoBacker" Loop SRC = "アセット/
Snow.MP4 "オートパイレイミュート＆gt; /ビデオ＆gt;

ビデオをスタイルアップするには、ページの先頭のスタイルに次のCSを追加します。

 #vididobacker {background-size：cover;
オブジェクトフィット：カバー。 Z-Index：9;不透明度：.3;
位置：絶対;トップ：0px;左：0px;
幅：100VW;高さ：100VH;遷移：1s
不透明度が除外されます。

21.レターボクシングを追加します

本当に着陸ページに映画のスタイルを与えるために、ページにいくつかの文字ボックスを追加してください。

これにDIV要素を追加することから始めます。

 DIVクラス= 'バートップ＆gt; / div＆gt;

それからあなたのスタイルを更新して、これら2つの黒いバーのスタイルを追加します。あなたはこれらのスタイルをあなたの味とニーズにも調整することができます。

。バックトップ{背景色：黒;
高さ：100px;位置：絶対;トップ：0;
左：0; zインデックス：100;幅：100VW;}
.bar-bottom {background-color：黒;
高さ：100px;位置：絶対;下：0;
左：0; zインデックス：100;幅：100VW;

この記事は当初、Web Designerの問題287に掲載されています。 問題287を購入する または ここで購読する 。

続きを読む：

Webコンポーネント：究極のガイド
レイヤード視差効果を作成する方法
CSSを介してSVGにアニメーションを追加する方法

WebGL 3Dランディングページを作成する

01.基本的なHTML Setup.

02.グローバルなバリエーションを追加します

03.シーン、カメラ、レンダリングを追加します

04.スポットライトを追加します

05.アニメーションループを追加します

06.地面の質感を読み込んでください

07.地面材を作成します

08.グランドメッシュを作成します

09.目的をロードします

10.環境マップを作成します

11.四面体を追加します

12.回転とカメラのターゲットを追加します

13.パーティクルループを追加します

14.パーティクルメッシュを作成します

15.ランダムな位置と距離を設定します

16.軌道の角度を設定します

17.シーンとコレクションにパーティクルを追加します

18.パーティクルにアニメーションを追加します

19.タイトルを追加してください

相対的なスタジオ

20.ビデオループを追加します

21.レターボクシングを追加します

操作方法 - 最も人気のある記事

Tiktokでビデオを編集する方法

ポートレート写真：完璧な肖像画を撮る方法

塗装のためにマルスティックを作って使用する方法

輝くネオンテキスト効果を作成する

V-Rayを使って木の木を散布する

あなたのコンテンツとのGoogleランキングに影響を与える方法

ヴァンゴッホのような肖像画を描く

ゲームプレイデザインの宇宙船のモデリング

カテゴリ