Three.js
当ブログで紹介したThree.jsの記事を一覧にまとめました。Three.jsは、ブラウザ上で3DCGを描画するJavaScriptのライブラリです。5Gが主流になったら需要が高まるかもしれません。 Vue.jsの記事まとめ 今後の取り組み 参考サイト Vue.jsの記事まとめ 【Three.…
影の指定方法について書きます。影を作るには、照明が必要です。あと、影を落としたい物体と影を受ける物体に影の設定をします。影の設定をすること自体は難しくないと思います。 影の設定 レンダラの影を有効化:shadowMap 光源の影を有効化:castShadow 影を…
マテリアルとは、物の質感のことです。物体の表面のつるつるした質感やマットな質感を表現します。質感の指定方法について書きます。 Materialsの基本的な記述 MeshBasicMaterial MeshNormalMaterial MeshLambertMaterial MeshPhongMaterial MeshToonMateria…
図形の指定方法について書きます。基本的な図形は、Three.jsで用意されています。まずは、それらの記述方法とどのようなパラメータが指定できるのかを確認します。ここでは、基本的な図形しか取り上げません。他にも用意されているので、各自で確認してくだ…
ゲームでプレーヤーの視点を操作することがあると思います。今回は、カメラの手動制御について書きます。 OrbitControlsの導入 カメラの手動制御 マウス操作 まとめ 参考サイト OrbitControlsの導入 OrbitControlsは、Three.jsに含まれていないので、別途読…
物体操作について書きます。position,scale,rotationの値を操作して動きの変化を観察します。 position positionを使ったコード例 scale scaleを使ったコード例 rotation rotationを使ったコード例 まとめ 参考サイト position オブジェクトの位置を指定しま…
色の指定方法について書きます。色々な指定方法がありますが、一通り使えるようになると良いと思います。 色の指定:THREE.Color() まとめ 参考サイト 色の指定:THREE.Color() 色の指定の記述は、以下のようなものがあります。 // Color // デフォルトは白 co…
今回は、3種類の補助機能についてご紹介します。開発段階で使うと便利です。 GridHelper AxesHelper LightHelper まとめ 参考サイト GridHelper GridHelperは、平面にグリッドを表示します。グリッドを作ったら、シーンに追加します。コードの記述例は、以下…
物体をアニメーションさせる処理について書きます。これで動きのあるものを作れるようになります。 アニメーション:requestAnimationFrame() 全コード 補足 参考サイト アニメーション:requestAnimationFrame() 前回までのコードにアニメーション処理を追加…
ブラウザで3Dグラフィックスを表現する方法について書きます。今回は、Three.jsの導入と基本的な記述の仕方についてご紹介します。 前提知識 下準備 3D空間の表示と基本のコード Three.js(3D)の基本要素 まとめ 参考サイト 前提知識 JavaScript ローカル開発…