チュートリアルをなぞるだけ！Three.jsでインタラクティブエフェクトを作ろう

DESIGNER

codrops

2019.01.30 2023.12.07

demo

デモページ
ソースダウンロード

Webブラウザ上で3DCGを扱うための仕組みであるWebGL。そのWebGLを扱うにあたって活用されているのが、無料で利用できるJavaScriptライブラリ『three.js』です。

今回はこのthree.jsとTweenMax（GSAP）を使用して、インタラクティブエフェクトを作成する方法をご紹介します。

なお、エフェクトはBestServedBoldのHolographic-Interactionsを参考にしています。

完成予定図
コアコンセプト
実際に作ってみよう

完成予定図

three-1

ひとつめのデモでは完成された実用的な例をご紹介しましたが、これから作成過程をご紹介するデモは調整およびアレンジが可能です。

また前述のとおり、今回ご紹介するエフェクトはBestServedBoldによるHolographic-Interactionsを参考にしています。

コアコンセプト

エフェクトを作成するにあたってコアとなっているのが、「マウスの動きに連動してランダムなエレメントグリッドを生成する」という発想です。

グリッドの各エレメントは、マウスの位置からエレメントの中心までの距離に基づいて、Yの位置、回転値、尺度値を更新します。

three-2

マウスがエレメントに近づけば近づくほど、エレメントが大きく表示されます。

three-3

また半径を定義することによって、半径内のエレメントへの影響をコントロールします。半径が大きければ大きいほど、マウスを動かしたときに反応するエレメント数が増えます。

three-4

実際に作ってみよう

1. HTMLページ

まずデモ用にHTMLページを設定しましょう。

コードはすべてキャンバスエレメント内で実行されるため、HTMLページ自体はシンプルです。

<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="target" content="all">
      <meta http-equiv="cleartype" content="on">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="mobile-web-app-capable" content="yes">
      <title>Repulsive Force Interavtion</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    </head>
  <body>
  </body>
</html>

コードからもわかるとおり、CDNからthree.jsとTweenMaxにリンクしています。

2. ヘルパー関数

次に2点間の距離を計算し、値をマッピングして、角度をラジアンに変換するためのヘルパー関数を定義しましょう。

const radians = (degrees) => {
  return degrees * Math.PI / 180;
}

const distance = (x1, y1, x2, y2) => {
  return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
}

const map = (value, start1, stop1, start2, stop2) => {
  return (value - start1) / (stop1 - start1) * (stop2 - start2) + start2
}

3. グリッドエレメント

グリッドを構築する前に、使用するオブジェクトを定義しましょう。

箱型のオブジェクト（Box）

 // credits for the RoundedBox mesh - Dusan Bosnjak

  import RoundedBoxGeometry from 'roundedBox';

  class Box {
    constructor() {
      this.geom = new RoundedBoxGeometry(.5, .5, .5, .02, .2);
      this.rotationX = 0;
      this.rotationY = 0;
      this.rotationZ = 0;
    }
  }

円錐型のオブジェクト（Cone）

class Cone {
    constructor() {
      this.geom = new THREE.ConeBufferGeometry(.3, .5, 32);
      this.rotationX = 0;
      this.rotationY = 0;
      this.rotationZ = radians(-180);
    }
  }

ドーナツ型のオブジェクト（Torus）

class Torus {
    constructor() {
      this.geom = new THREE.TorusBufferGeometry(.3, .12, 30, 200);
      this.rotationX = radians(90);
      this.rotationY = 0;
      this.rotationZ = 0;
    }
  }

4. 三次元の設定

メインクラスの中に、セットアップ用の関数を作成しましょう。

setup() {
    // handles mouse coordinates mapping from 2D canvas to 3D world
    this.raycaster = new THREE.Raycaster();

    this.gutter = { size: 1 };
    this.meshes = [];
    this.grid = { cols: 14, rows: 6 };
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.mouse3D = new THREE.Vector2();
    this.geometries = [
      new Box(),
      new Tourus(),
      new Cone()
    ];

    window.addEventListener('mousemove', this.onMouseMove.bind(this), { passive: true });

    // we call this to simulate the initial position of the mouse cursor
    this.onMouseMove({ clientX: 0, clientY: 0 });
  }

5. マウス移動ハンドラー

onMouseMove({ clientX, clientY }) {
    this.mouse3D.x = (clientX / this.width) * 2 - 1;
    this.mouse3D.y = -(clientY / this.height) * 2 + 1;
  }

6. 3Dシーンの作成

createScene() {
    this.scene = new THREE.Scene();

    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(window.devicePixelRatio);


    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    document.body.appendChild(this.renderer.domElement);
  }

7. カメラ

カメラをシーンに追加しましょう。

createCamera() {
    this.camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1);

    // set the distance our camera will have from the grid
    this.camera.position.set(0, 65, 0);

    // we rotate our camera so we can get a view from the top
    this.camera.rotation.x = -1.57;

    this.scene.add(this.camera);
  }

8. ランダムオブジェクトヘルパー

箱型、円錐型、ドーナツ型のオブジェクトをランダムに配置するためのヘルパーを作成しましょう。

 getRandomGeometry() {
    return this.geometries[Math.floor(Math.random() * Math.floor(this.geometries.length))];
  }

9. メッシュヘルパー

ジオメトリとマテリアルに基づいてメッシュを作成するためのヘルパーを作成しましょう。

getMesh(geometry, material) {
    const mesh = new THREE.Mesh(geometry, material);

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    return mesh;
  }

10. エレメントをグリッドに配置

ここでやっとランダムなエレメントをグリッドにレイアウトできました。

three-5

 createGrid() {
    // create a basic 3D object to be used as a container for our grid elements so we can move all of them together
    this.groupMesh = new THREE.Object3D();

    const meshParams = {
      color: '#ff00ff',
      metalness: .58,
      emissive: '#000000',
      roughness: .18,
    };

    // we create our material outside the loop to keep it more performant
    const material = new THREE.MeshPhysicalMaterial(meshParams);

    for (let row = 0; row < this.grid.rows; row++) {
      this.meshes[row] = [];

      for (let col = 0; col < this.grid.cols; col++) {
        const geometry = this.getRandomGeometry();
        const mesh = this.getMesh(geometry.geom, material);

        mesh.position.set(col + (col * this.gutter.size), 0, row + (row * this.gutter.size));
        mesh.rotation.x = geometry.rotationX;
        mesh.rotation.y = geometry.rotationY;
        mesh.rotation.z = geometry.rotationZ;

        // store the initial rotation values of each element so we can animate back
        mesh.initialRotation = {
          x: mesh.rotation.x,
          y: mesh.rotation.y,
          z: mesh.rotation.z,
        };

        this.groupMesh.add(mesh);

        // store the element inside our array so we can get back when need to animate
        this.meshes[row][col] = mesh;
      }
    }

    //center on the X and Z our group mesh containing all the grid elements
    const centerX = ((this.grid.cols - 1) + ((this.grid.cols - 1) * this.gutter.size)) * .5;
    const centerZ = ((this.grid.rows - 1) + ((this.grid.rows - 1) * this.gutter.size)) * .5;
    this.groupMesh.position.set(-centerX, 0, -centerZ);

    this.scene.add(this.groupMesh);
  }

11. ライトの追加

アンビエントライト

次に、色の効果を出すためにAmbientLightを追加しましょう。

three-6

 addAmbientLight() {
    const light = new THREE.AmbientLight('#2900af', 1);

    this.scene.add(light);
  }

スポットライト

リアルなタッチにするために、スポットライトのような効果をつけられるSpotLightも追加しましょう。

three-7

addSpotLight() {
    const ligh = new THREE.SpotLight('#e000ff', 1, 1000);

    ligh.position.set(0, 27, 0);
    ligh.castShadow = true;

    this.scene.add(ligh);
  }

レクトエリアライト

さらに四角く平面を照らすRectAreaLightも追加します。

three-8

addRectLight() {
    const light = new THREE.RectAreaLight('#0077ff', 1, 2000, 2000);

    light.position.set(5, 50, 50);
    light.lookAt(0, 0, 0);

    this.scene.add(light);
  }

ポイントライト

最後にポイントを照らすPointLightを追加すれば、ライティングは完成です。

three-9

addPointLight(color, position) {
    const light = new THREE.PointLight(color, 1, 1000, 1);

    light.position.set(position.x, position.y, position.z);

    this.scene.add(light);
  }

12. シャドーフロア

次に、マウスカーソルがホバーできる場所のマッピングオブジェクトとして機能する図形を追加しましょう。

addFloor() {
    const geometry = new THREE.PlaneGeometry(100, 100);
    const material = new THREE.ShadowMaterial({ opacity: .3 });

    this.floor = new THREE.Mesh(geometry, material);
    this.floor.position.y = 0;
    this.floor.receiveShadow = true;
    this.floor.rotateX(- Math.PI / 2);

    this.scene.add(this.floor);
  }

13. ドロー／アニメートエレメント

最後に、アニメーションの処理をハンドルする関数を追加しましょう。これはrequestAnimationFrame内のすべてのフレームに呼び出されます。


  draw() {
    // maps our mouse coordinates from the camera perspective
    this.raycaster.setFromCamera(this.mouse3D, this.camera);

    // checks if our mouse coordinates intersect with our floor shape
    const intersects = this.raycaster.intersectObjects([this.floor]);

    if (intersects.length) {

      // get the x and z positions of the intersection
      const { x, z } = intersects[0].point;

      for (let row = 0; row < this.grid.rows; row++) {
        for (let col = 0; col < this.grid.cols; col++) {

          // extract out mesh base on the grid location
          const mesh = this.meshes[row][col];

          // calculate the distance from the intersection down to the grid element
          const mouseDistance = distance(x, z,
            mesh.position.x + this.groupMesh.position.x,
            mesh.position.z + this.groupMesh.position.z);

          // based on the distance we map the value to our min max Y position
          // it works similar to a radius range

          const maxPositionY = 10;
          const minPositionY = 0;
          const startDistance = 6;
          const endDistance = 0;
          const y = map(mouseDistance, startDistance, endDistance, minPositionY, maxPositionY);

          // based on the y position we animate the mesh.position.y
          // we don´t go below position y of 1
          TweenMax.to(mesh.position, .4, { y: y < 1 ? 1 : y });

          // create a scale factor based on the mesh.position.y
          const scaleFactor = mesh.position.y / 2.5;

          // to keep our scale to a minimum size of 1 we check if the scaleFactor is below 1
          const scale = scaleFactor < 1 ? 1 : scaleFactor;

          // animates the mesh scale properties
          TweenMax.to(mesh.scale, .4, {
            ease: Back.easeOut.config(1.7),
            x: scale,
            y: scale,
            z: scale,
          });

          // rotate our element
          TweenMax.to(mesh.rotation, .7, {
            ease: Back.easeOut.config(1.7),
            x: map(mesh.position.y, -1, 1, radians(45), mesh.initialRotation.x),
            z: map(mesh.position.y, -1, 1, radians(-90), mesh.initialRotation.z),
            y: map(mesh.position.y, -1, 1, radians(90), mesh.initialRotation.y),
          });
        }
      }
    }
  }

完成！

これでインタラクティブエフェクトは完成です。今回ご紹介したデザイン以外にも、グリッドのレイアウトを変えたり、オブジェクトを増やしたりするなど、さまざまな可能性を秘めています。

以下はグリッドのレイアウトを変更した例です。

three-10

また以下のように、カメラの角度を変えても面白いかもしれません。

three-11

今回のチュートリアルはお楽しみいただけたでしょうか。ぜひこのチュートリアルをベースにして、オリジナルの作品を作ってみてください！

（原文：Ion D. Filho　翻訳：Asuka Nakajima）

#副業OK
#新規事業
#スタートアップ
#急募
#長期案件
#スポット案件（1ヶ月）
#フルリモートOK

【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集

#スタートアップ

【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！

#スタートアップ
#土日週末OK
#急募
#長期案件
#正社員募集
#フルリモートOK

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge.

この記事はcodropsからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Interactive Repulsion Effect with Three.js

Follow @goworkship

■当サイト掲載中の情報について
Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。
■アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール『Googleアナリティクス』を利用しています。このGoogleアナリティクスはトラフィックデータの収集を行なっています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この規約に関して、詳しくはGoogle アナリティクス利用規約をご覧ください。

■広告の配信について
当サイトは第三者配信の広告サービス『Google Adsense』を利用しています。広告配信事業者は、取得した閲覧履歴や購買履歴等の情報を分析して、ユーザーの趣味・嗜好に応じた新商品・サービスに関する広告を表示することがあります。また当サイトは、商品やサービスを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、『A8.net』『もしもアフィリエイト』『afb』『アクセストレード』『バリューコマース』『レントラックス』『felmat』『TGアフィリエイト』『リンクシェア』『楽天アフィリエイト』『Amazon アソシエイト』の参加者です。IPアドレス、ユーザーエージェント、クッキー情報、成果結果情報（広告成果毎の識別子）などを取得し、広告配信に係る成果計測、広告配信に係る不正防止などに利用する場合があります。

チュートリアルをなぞるだけ！Three.jsでインタラクティブエフェクトを作ろう

完成予定図

コアコンセプト

実際に作ってみよう

1. HTMLページ

2. ヘルパー関数

3. グリッドエレメント

箱型のオブジェクト（Box）

円錐型のオブジェクト（Cone）

ドーナツ型のオブジェクト（Torus）

4. 三次元の設定

5. マウス移動ハンドラー

6. 3Dシーンの作成

7. カメラ

8. ランダムオブジェクトヘルパー

9. メッシュヘルパー

10. エレメントをグリッドに配置

11. ライトの追加

アンビエントライト

スポットライト

レクトエリアライト

ポイントライト

12. シャドーフロア

13. ドロー／アニメートエレメント

完成！

NEW

【漫画】フリーランスが“やってはいけない”活動名

ライターは「こたつ記事」と「取材記事」どちらに特化すべき？

就職せず稼ぐため、娘が学生時代から準備していたこと

今、フリーランスがAIに奪われている仕事ランキング 2位「翻訳」、1位は？　他

PICKUP

【漫画】フリーランスが“やってはいけない”活動名

ライターは「こたつ記事」と「取材記事」どちらに特化すべき？

就職せず稼ぐため、娘が学生時代から準備していたこと

新卒フリーランスが“あえて”会社員になった理由。フリーランス→会社員は「負け」なのか

KEYWORDS

チュートリアルをなぞるだけ！Three.jsでインタラクティブエフェクトを作ろう

完成予定図

コアコンセプト

実際に作ってみよう

1. HTMLページ

2. ヘルパー関数

3. グリッドエレメント

箱型のオブジェクト（Box）

円錐型のオブジェクト（Cone）

ドーナツ型のオブジェクト（Torus）

4. 三次元の設定

5. マウス移動ハンドラー

6. 3Dシーンの作成

7. カメラ

8. ランダムオブジェクトヘルパー

9. メッシュヘルパー

10. エレメントをグリッドに配置

11. ライトの追加

アンビエントライト

スポットライト

レクトエリアライト

ポイントライト

12. シャドーフロア

13. ドロー／アニメートエレメント

完成！

NEW

【漫画】フリーランスが“やってはいけない”活動名

ライターは「こたつ記事」と「取材記事」どちらに特化すべき？

就職せず稼ぐため、娘が学生時代から準備していたこと

今、フリーランスがAIに奪われている仕事ランキング 2位「翻訳」、1位は？ 他

SHARE

PICKUP

【漫画】フリーランスが“やってはいけない”活動名

ライターは「こたつ記事」と「取材記事」どちらに特化すべき？

就職せず稼ぐため、娘が学生時代から準備していたこと

新卒フリーランスが“あえて”会社員になった理由。フリーランス→会社員は「負け」なのか

KEYWORDS

今、フリーランスがAIに奪われている仕事ランキング 2位「翻訳」、1位は？　他