【WebGL】Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説
Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。
WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。
Three.j ...
【Three.js】lil-gui(dat-gui)のカスタマイズとstat-jsでパフォーマンスを測る方法(デモつき)
Three.jsで数値をGUIで変更することができるようになるlil-gui(dat-gui)のカスタマイズ方法と、
パフォーマンスを測ることができるstat-jsの使い方を紹介します。
lil-g ...
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。
また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。
まずはサンプルデモがある ...
【Three.js】基本のライト:AmbientLight, DirectionalLight, PointLightの使い方とサンプルデモ
Three.jsの最も基本的でよく使うライトであるAmbientLight, DirectionalLight, PointLightの使い方を紹介します。
ライトがない状態のデモがあるとわかりやすいので ...
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。
またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。
大きさ ...
【Three.js】物体を複製(クローン)する方法clone()と注意点(デモあり)
Three.jsで物体を複製する方法を紹介します。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモ ...
【Three.js】物体を回転、並行移動、スケールする方法(デモあり)
Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。
まずはデモを確認してみましょう。
OrbitControlsとは？OrbitControl ...
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。
さっそくデモを確認してみましょう。
3Dモデルを表示
Three.jsのShaderMateria ...
【Three.js】Material(マテリアル)の色の設定方法一覧
Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。
もしTh ...