web front end engineer

web制作でつまづいたこと

【WebGL】threejsでモヤっと動く霧のスぺニットを紹介します

WebGL

【WebGL】threejs

今回はcodepenで発見したおしゃれな霧のデザインのソースを解説していきます。
※スクリプトゴリゴリいけないけどthree.jsは取り入れたいデザイナーさん&体験してみたいさん向けの記事になります。

作者：https://ykob.github.io/sketch-threejs/

See the Pen WebGL Fog by yoichi kobayashi (@ykob) on CodePen.

霧のエフェクトが流れていくとてもクールなスぺニットです。

codepenで公開されているソースはMITライセンスなので以下を確認後カスタマイズしてみてください。

CodePenのライセンス表記の仕方：著作権表示は必要？

three.jsを使用しているのでcdnで先にthree.min.jsを読み込んでから上記codepenのソースを使用してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>

上記のソースで背景を入れられるようにカスタマイズしみます。
setClearColorを設定している箇所を以下のようにrenderer.setClearColor(0x111111, 0.0,0.0, 0.0);とします。

renderer.setClearColor(0x111111, 0.0,0.0, 0.0);//背景透過

これだけでcanvasの背景が透過されるのであとはcssで背景画像を設定します。

HTML

<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
<div id="wrapper"></div><!-- wrapper -->

css

#wrapper{
    background:url(img/prairie-woman-at-sunset.jpg) center center no-repeat;
    background-size:cover;
    height: 100vh;
}

霧の部分をblendingでCSS3のブレンドモードのような効果に設定しています。

blending: THREE.AdditiveBlending,

他のブレンドモードは以下になります。

THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending

以下のように霧の画像をpngで読み込んでいるので画像の変更が可能となっています。

const texsSrc = {  fog: 'img/fog.png'};

threejsの基本を学んでもここまでのソースを作成するクリエイターさんって現段階では一握りだと思います。

制作者の方のサイトで他にもかっこいい作品がみれます。

こちらもぜひ参考にしてみてください。

uhaha

codepenは世界中のすばらしいコードが見れます。なにこれかっこいいとおもったコードが日本の人だとちょっとうれしい。