jQuery/Vanilla Javascript

【three.jsスニペット】THREE.MeshLineで簡単におしゃれな3Dアニメーションをサイトに導入してみよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
THREEMeshLine

今回はthree.jsのオープンソースを利用しておしゃれな3Dアニメーションを three.js初心者でも簡単にWebサイトに導入する方法を解説していきます。

今回使用するのは THREE.MeshLineでJavaScript 3D ライブラリのthtree.jsのメッシュデザインを中心としたプログラムになります。

リンクは以下になります。
GitHub: THREE.MeshLine

上記GitHubのCode>DownloadZipボタンよりダウンロードします。
THREE.MeshLine-master/demoフォルダ内の以下のファイルを使用します。

  • index.html
  • src/THREE.MeshLine.js
  • js/three.min.js
  • js/OrbitControls.js
  • js/THREE.ConstantSpline.js
  • js/Maf.js
  • js/dat.gui.min.js
  • js/main.js
  • css/main.css

ファイルを読み込みます。

<link rel="stylesheet" href="css/main.css">
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREE.ConstantSpline.js"></script>
<script src="js/Maf.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="js/THREE.MeshLine.js"></script>
<script src="js/main.js"></script>

以下のcontainer部分にcanvasタグを育成してアニメーションを表示します。

<div id="container" ></div>

main.js(線の色)

123行目付近のvar colorsで設定している16進数(0x000000)を変更します。

var colors = [
	0xed6a5a,
	0xf4f1bb,
	0x9bc1bc,
	0x5ca4a9
];

main.css(背景)

背景はmain.cssのbodyで設定されています。

body{
...
background-color: #ffffff;
...
}

以下のコントローラーでパラメータを変更できます。

cssで以下のような微調整をしました。

#container{
	height: 100vh;
	position: relative;
}
/* コントローラー削除 */
.dg.ac {
    display: none;
}

カスタムしてみたサンプルはこちらになります。

サンプル

THREE.MeshLineを使用してみて導入も簡単でしたし、カスタムもコントローラーがついてて親切でした。IEでも動作するので動きのあるサイト提案が可能です。オープンソースなのでthree.jsの勉強にもなります。

uhaha

1からthreejs学習でもいいけどいろいろ実験できるソースを公開してくれることはありがたいですね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

  1. MM より:

    うははさん

    はじめまして、コメント失礼いたします。
    three.jsを使用してアニメーションをトップビューに表示したいと考えているのですが、
    この記事にある「形状のカスタム」→「コントロール」を非表示にする方法をご存知でしょうか?
    勝手にdg というクラスが出現してしまい、困っています。

    ちなみに、実装したいアニメーションは、
    https://codepen.io/vcomics/pen/djqNrm
    こちらです。

    もし何かご存知でしたらご教示いただきたいです。
    よろしくお願いいたします。

    1. うはは! より:

      コメントありがとうございます!
      質問ですがcss調整でちょっと触れていますがCSSで削除可能です。(解説文追加しておきます!!)
      上記のPerlin Noiseでも以下の追加で削除されました。

      .dg.ac {
      display: none;
      }

      1. MM より:

        うははさん

        .dg.ac {
        display: none;
        }

        こちらで解決できました!!
        ありがとうございます!!

コメントを残す

*