WebGL & Three.js

Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。
WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。

Three.j ...

WebGL & Three.js

Three.jsで数値をGUIで変更することができるようになるlil-gui(dat-gui)のカスタマイズ方法と、
パフォーマンスを測ることができるstat-jsの使い方を紹介します。
lil-g ...

WebGL & Three.js

Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。
また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。
まずはサンプルデモがある ...

WebGL & Three.js

Three.jsの最も基本的でよく使うライトであるAmbientLight, DirectionalLight, PointLightの使い方を紹介します。
 ライトがない状態のデモがあるとわかりやすいので ...

WebGL & Three.js

Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。
またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。
大きさ ...

WebGL & Three.js

Three.jsで物体を複製する方法を紹介します。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモ ...

WebGL & Three.js

Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。

Three.jsを使って物体を回転、並行移動、スケールするデモサンプルコード ...

WebGL & Three.js

Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。

まずはデモを確認してみましょう。

OrbitControlsとは?

OrbitControl ...

WebGL & Three.js

Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。
さっそくデモを確認してみましょう。

3Dモデルを表示

Three.jsのShaderMateria ...

WebGL & Three.js

Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。

もしTh ...