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で送る

コメントを残す

*