175

three.jsとGSAPで実現した、インタラクティブな名言集

画像のピクセルデータをパーティクルとして3D空間に配置し、シェーダーを用いて表現力豊かなグラフィックを実現しています。

Website

このウェブサイトは、three.jsによる3Dグラフィックと、GSAPによるアニメーション、SplitTextによるテキストの分割表示を組み合わせて、美しい名言集を作成しています。

HTMLでは、three.jsのcanvas、名言テキスト、ボタンなどの要素を配置しています。CSSでは、コンテンツを中央に配置し、アニメーションしやすい基本的なレイアウトを構築しています。JavaScriptでは、three.jsでグラフィックを描画し、GSAPでアニメーションを制御し、SplitTextでテキストを分割表示しています。

使用した技術

  • three.jsによる3Dグラフィックの実装
  • GSAPによるアニメーション制御
  • SplitTextによるテキストの分割表示

制作意図

  • three.jsの可能性を探ること
  • アニメーションとインタラクションの組み合わせ方を学ぶこと
  • 視覚的に美しいデザインを実現すること

こだわりポイント

  • シェーダーを使ったパーティクルの表現
  • マウスインタラクションによるパーティクルの動き
  • 名言とアニメーションの調和

以上のように、使用技術、制作意図、こだわりポイントを簡潔にまとめられると思います。グラフィックと動きの表現力、インタラクティブ性に注力していることが伝わる文章になっていると思います。ポートフォリオとしての訴求力が高まるような形で技術をアピールできる内容だと思います。

ソースコード

長いためjsfiddleにまとめています。

HTMLの解説

このHTMLは、名言集のウェブサイトのマークアップを定義しています。

主な内容:

  • headにサイトのタイトル、フォント、CSSファイルを読み込んでいる

  • body内にメインの#wrapper divを定義

  • #canvas_containerはthree.jsのキャンバス用

  • .textは名言を表示するdiv

  • .clickInfoはクリックを促すテキスト

  • #firstは初期テクスチャの画像

  • .btnがフルスクリーンボタンなど

  • scriptでthree.js、GSAP、SplitTextのJSライブラリを読み込み

  • script.jsにアプリのメインLOGICを記述

このHTMLで、three.jsによるグラフィックと、名言テキスト、ボタンなどの要素が配置されています。 CSSとJavaScriptで動作を定義する基本的な構成になっています。

three.jsのcanvas、テキスト、ボタンなどのdivが適切に配置されており、シンプルでわかりやすいマークアップになっています。

CSSの解説

主なポイント:

  • *でマージン・パディングをリセットしている

  • bodyをoverflow: hiddenにしてコンテンツがはみ出ないようにしている

  • #wrapperがメインのコンテナー。position: relativeにして子要素の基準位置を設定できるようにする

  • #canvas_containerがThree.jsのキャンバスを置く領域。position: absoluteで親要素の中に配置。

  • .textが名言を表示するブロック。position: absoluteで中央に配置し、スタイル設定。

  • .clickInfoがクリックアドバイスのテキスト。初期状態では非表示にしている。

  • .btnがフルスクリーンボタンなどのスタイル定義。

  • @mediaクエリでスマホ版のフォントサイズを調整。

このCSSにより、コンテンツを中央に配置し、アニメーションしやすい基本的なレイアウトが構築されています。 three.jsの描画領域と、テキスト、ボタンなどの要素が適切に配置され、スタイル設定されています。

JavaScriptの解説

概要:

  • THREE.jsを使用して3Dグラフィックを生成
  • 名言テクスチャをロード
  • 画像のピクセルデータからパーティクルを生成
  • パーティクルの位置・動きをシェーダーで制御
  • GSAPを使用したアニメーション
  • マウスインタラクション

主な機能:

  • initThree(): THREE.jsのセットアップ
  • pixelExtraction(): 画像のピクセルデータ取得
  • initParticles(): パーティクルのジオメトリとシェーダー定義
  • initTail(): マウス軌跡のためのテクスチャ
  • initRaycaster(): マウス検出
  • changeTexture(): テクスチャとアニメーション変更
  • vertexShader(): パーティクルの位置計算
  • fragmentShader(): パーティクルの描画
  • animate(): メインループ
  • resize(): ウィンドウサイズ変更時の調整

これにより、画像ピクセルをパーティクルとして3D空間に配置し、 シェーダーを用いた表現力豊かなグラフィックを実現しています。 GSAPによるタイムラインアニメーションとマウスインタラクションで、 インタラクティブで洗練されたエフェクトを作り出しています。