(Browsing)

ゆっくり見ていってね！ ＞

writer : Tomoya Okada

キュートなオブジェクトが特徴的な個人制作「PushKun」の制作について

キュートなオブジェクトが特徴的な個人制作「PushKun」の制作についての画像

こんにちは、okadaです。
今回は個人制作で行なったPushKunというサイトについて紹介できたらと思います。
【URL】
https://pushkun.usestate.org/

概要

概要から簡単に紹介します。
私は制作をする時に必ず課題（条件）を課すようにしています。

【課題】
・3Dシーンをメインにする事
・シーンに複数のエフェクトをかける事
・スクロールに連動した演出を入れる事

【題材】
ちょうどこのメディアサイトに、登場するキャラクター（PushKun）が四角形なので「PushKunを紹介するサイト」とすることにしました。


デザインについて

全体感などについて紹介します。

全体感

グリッドレイアウトを用いています。
今回のサイトは背景こそ3Dでありながらも、コンテンツは情報系やテキストがほとんどです。単調にならないように各要素の位置を変更しつつ、グリッドに沿って配置しているので破綻しないレイアウトになっているかと思います。
ある程度サイト全体の流れは考えていたので、簡単なWFを元にそこからデザインをしていきました。3Dシーンを使ってのデザインで難しいところは「背景がどんな絵になっているか」だと思います。なので、先におおよその背景イメージを作成して画像化し、当て込んでからデザインを進めるようにしました。

▼制作過程のスクショ



今回は背景のオブジェクトがセクション毎に位置が変わるなどがないので比較的簡単ではありますが、最初にイメージがあるとデザインがしやすいです。この点についての進め方は自分も模索中なので、より良い方法を知っている方がいれば教えていただきたいです...。

テイストについて

基本のテイストは機械感だったり無機質感を感じられるようにしています。その中にPushKunの色や瞬きなどが加わって若干の有機質感が生まれるようにしました。このようにすることによって、よりPushKunが目立つ存在になると考えました。


利用技術

利用した技術について紹介します。

【フレームワーク】
Astro.js

【非同期遷移】
Barba.js

【慣性スクロール】
Lenis.js

【3D演出 / アニメーション】
Three.js、GSAP

【ホスティング】
Vercel


カメラアニメーション

アクセスした時にカメラアニメーションが発火するようにしています。動画ではなくThree.jsで描画して行なっています。カメラワークはBlenderで作成し、パーティクルやキャラクターオブジェクト等はThree.js側で作成を行なっています。

カメラワーク

オブジェクトを回り込むような動きにしています。Three.js側で制御するよりもBlenderで作ってしまった方が簡単だったのでこの手法にしました。パス上にカメラを配置することによって、カーブする軌道も楽に実現できて便利でした。



実装時は、Blenderで作成したデータにカメラを上書きして利用する方法にしています。このようにするとBlenderで作成した動きをそのまま持ってくることができます。

this.stage.camera = this.blenderCamera;


各オブジェクト

オープニングとその後の背景に配置されているパーティクルとキャラクター本体・パネルがThree.js側で生成しています。




管理がしやすいように、役割に分けてjsファイル管理をして、任意の場所で作成できるようにしています。character.jsやparticle.jsなどのファイルに分けるようなイメージです。
例えばキャラクター本体を作る部分はこのような感じになっています。ボックスを出すだけなので特に難しい内容ではないですが、切り離しておくと見やすくなるのでオススメです。

//character.js
export default class Character {
  constructor() {}
  createBody() {
    const size =  0.35;
    const geo = new THREE.BoxGeometry(size, size, size);
    const mat = new THREE.MeshStandardMaterial({ color: 0xdb7093, wireframe: false });
    const mesh = new THREE.Mesh(geo, mat);
    mesh.name = "characterBody";

    return mesh;
  }
}




シーンエフェクト

発光と流体のエフェクトを扱ってみました。EffectComposerを利用して行なっています。

発光エフェクト

今回のサイトで一番目立つエフェクトになっていると思います。PushKunが発光しているので印象的だと思います。
基本はUnrealBloomPassを利用しています。導入自体は比較的に簡単なのですが、発光具合の調節が若干時間がかかりました。
toneMappingExposureというものがあるらしく、この値とライトの強度で発光具合を調節していきました。

this.renderer.toneMapping = THREE.CineonToneMapping;
this.renderer.toneMappingExposure = 0.3;


当初は、発光エフェクトをかけるオブジェクトを分けようと考えていたので、以下のような処理を追加していましたが、結局不要になりました。今回の制作を通して、エフェクトをかけるオブジェクトを分ける実装は結構大変だということがわかりました。慣れの問題かもしれませんが...。

// bloomComposer
this.bloomComposer = new EffectComposer(this.stage.renderer);
this.bloomComposer.addPass(bloomRenderPass);
this.bloomComposer.addPass(this.bloomPass);
this.bloomComposer.renderToScreen = false;

// カメラのレイヤーを設定
this.bloomCamera = this.stage.camera.clone();
this.normalCamera = this.stage.camera.clone();
this.bloomCamera.layers.set(this.BLOOM_ON);
this.normalCamera.layers.set(this.BLOOM_OFF);


【公式サンプル】
DEMO

流体エフェクト

個人的に流体演出の動きが好きなので、入れてみました。
基本は今まで使っていたものをComposerで使えるように変更して導入する形にしています。苦戦した点としては、この変換作業だったと思います。CursorやClaude Codeの力を借りて実現できました。AIさまさまです。
おかげで本サイトでは以下のようにして追加することが可能となりました。

this.fluidPass = new StableFluidsShaderPass(256, 256);
this.composer.addPass(this.fluidPass);





セクション間のアニメーション

スクロールに連動して、テキストやオブジェクト色が変化する方式で作成しました。

文字の表示・非表示 / オブジェクト色管理

１箇所でアニメーション管理がしたかったので、別ファイルに切り出してそこで管理をしました。
全て掲載すると長すぎるので一部抜粋します。

  ScrollTrigger.create({
    trigger: "#section02",
    start: "top top",
    onEnter: () => {
      changeColor(character.material.color, pattern.section02.r, pattern.section02.g, pattern.section02.b);
      changeColor(particle.material.color, pattern.section02.r, pattern.section02.g, pattern.section02.b);
      scalePanel(panelMeshs);
    },
    onLeaveBack: () => {
      changeColor(character.material.color, pattern.section01.r, pattern.section01.g, pattern.section01.b);
      changeColor(particle.material.color, pattern.section01.r, pattern.section01.g, pattern.section01.b);
      scalePanel(panelMeshs);
    },
  });


ScrollTriggerを用いて指定の範囲に入ったり出たりしたタイミングで関数を発火させています。このようにすることによって、セクション毎のアニメーション管理の見通しがしやすくなりました。


その他こだわり要素

すごく細かいこだわり点を紹介します。

プログレスバー

円形のプログレスバーに目をつけて少し可愛らしい形にしてみました。ちゃんと瞬きもするところが推しポイントです！


//瞬きアニメーション
@keyframes eyes {
  0% {
    transform: scaleY(1);
  }
  3% {
    transform: scaleY(0);
  }
  6% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}


アクセントアニメーション

各セクションの小見出しにアクセントアニメーションを付与しています。しっかりとセクション毎にカラーを揃えてビジュアルを統一しています。こういった小さな拘りも今回作る上で大切にしました。


最終セクション

当初はContactセクションまでにしていたのですが、少しインパクトが足りないような気がしたので急遽追加したセクションです。ここでは他のセクションとは少し毛色の違う雰囲気にしたかったので、背景ノイズ+反射オブジェクトを利用してみました。急に追加したセクションではありますが、とても気に入っています。




まとめ

今回は個人制作「PushKun」について紹介させていただきました。
今まで自分ではあまり制作しないタイプのビジュアルや機能になったように感じていますし、これを通して学びが沢山ありました。今後も何かしら課題を作って制作する方式は続けていけたらと考えています。

最後までお読みいただき、ありがとうございました。

(Browsing)