2分SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、たくぞうです。Visualを作ってみました。使ってる技術的にはThree.jsの基礎中の基礎ですので、簡単に作れるかと思います。WebGL勉強始めた人の参考になれば幸いです。作ったものコード説明BOXを100個並べるBOXをランダムに回転させる反射光のみを表示させるまとめ作ったもの今回作ったものはこちらです。BOX100やっていることは、BOXをX・Z軸に10個づつ並べ、それぞれにランダムな回転数を与えてます。}}BOXをランダムに回転させるrender関数の中で、for文を回し同じboxList[]に乱数を与えることでBOXごとの回転を変えている。camera);}反射光のみを表示させる今回は反射光のみを表示したかったため、レンダー・BOXの色を黒にし、マテリアルのspecularに反射させる色を指定している。反射光を表現するにはマテリアル側を修正して対応する。今回はMeshPhongMaterialを使用まとめ背景を黒にする場合は、renderer.setClearColor()でカラーを指定する。反射光を使う場合は「MeshPhongMaterial」を使用する。予想していた通りの表現ができるよう知識をつけてこうと思います。:Three.jsThree.js:Fog(フォグ)を利用して、煙・霧を表現をする方法Three.js:回転の起点となる軸を変えたい場合はグループを使おうThree.js:グループ化を用いて3D空間でアナログ時計を作る。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。次の記事JavaScript基礎:書き方・読み込むタイミングこのブログの運営者どうもタクゾウです。このブログは、Web系フロントエンジニアが日々学んだことをまとめて行くブログです。基本的に自分が読み返すようで投稿してますが内容は誰がみてもわかりやすいよう書いています!よろしくお願いします!人気の記事1Wix(ウィックス)はビジネス向きではない。