Three JS:Geometryでバネの形状を作ってみる CREATE: 2016.3.28 UPDATE: 2019.08.23 前回は基礎固めと言う事で、three.jsで正八方体のGeometryを自作する方法を覚えました。なので今回はもう少し複雑な形状をプログラムで作ってみたいと思います。 何にしようかなーと考えた結果、三角関数で割と簡単に描 […] three.js Geometry three.js WebGL
Three JS:Geometryでオリジナルの形状を作ってみる CREATE: 2016.3.24 UPDATE: 2019.08.23 今まで当ブログでthree.jsの基本的な扱い方を勉強してきましたが、もっと基礎的な部分を固める為に自作でGeometry(形状)を作ってみたいと思います。まずは簡単な所で、今回は下のようなただの八面体の作り方を説明しま […] JavaScript Tips three.js Geometry three.js WebGL
Three JS:MeshPhongMaterialを極める-環境マッピング編- CREATE: 2016.3.14 UPDATE: 2019.08.23 今回はMeshPhongMaterialの環境マッピングに関してです。と言っても、環境マッピングに関しては他のMeshBasicMaterial、MeshLambertMaterialでも共通で使えます。あまり使う機会は […] JavaScript Tips three.js map Material three.js WebGL
Three JS:MeshPhongMaterialを極める-テクスチャマッピング+α編- CREATE: 2016.3.10 UPDATE: 2019.08.23 前回はMeshPhongMaterialの色とライティングに関することをまとめましたが、今回は少しレベルアップしてテクスチャマッピングに関してです。 テクスチャは分かるけどマッピングって何？ってところからですが、モデル（ […] JavaScript Tips three.js map Material three.js WebGL
Three JS:MeshPhongMaterialを極める-基本編- CREATE: 2016.3.8 UPDATE: 2019.08.23 WebGLの人気ライブラリthree.js、今回はMeshPhongMaterialに関して極めたいと思います。 2016年3月現在、three.jsの最新バージョンr74ではマテリアル(材質)の種類が14種類あります( […] JavaScript Tips three.js Material three.js WebGL
ワクワクが止まらない!!WebGLコンテンツ集サイト5選 CREATE: 2016.3.7 UPDATE: 2019.08.23 目下three.jsを勉強中の筆者が、モチベーションを上げるためにチェックしているWebGLコンテンツを集めたサイトを紹介します。Webデザイナーはもちろんですが、WebディレクターやWeb担当者が最新のWebGLコンテ […] JavaScript Tips three.js three.js WebGL
Three JS:基本の使い方総まとめ-Lightまとめ編 CREATE: 2016.3.3 UPDATE: 2019.08.23 人気WebGLライブラリthree.jsで用意されているLightの5種類全ての説明ページを作りました。光だけではなく影の設定などに関しても説明しています。詳しくは各リンクページを見ていただき、ぜひ参考にしてください。 […] JavaScript Tips three.js Light three.js WebGL
Three JS:基本の使い方総まとめ-Light > AmbientLight編- CREATE: 2016.3.2 UPDATE: 2019.08.23 2016年3月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。 名称 意味 役割 AmbientLight 環境光源 散乱する光源によって、オブジェクトに対し均等に光を当てる。影 […] JavaScript Tips three.js Light three.js WebGL
Three JS:基本の使い方総まとめ-Light > HemisphereLight編- CREATE: 2016.3.1 UPDATE: 2019.08.23 2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。 名称 意味 役割 AmbientLight 環境光源 散乱する光源によって、オブジェクトに対し均等に光を当てる。影 […] JavaScript Tips three.js Light three.js WebGL
Three JS:基本の使い方総まとめ-Light > DirectionalLight編- CREATE: 2016.2.29 UPDATE: 2019.08.23 2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。 名称 意味 役割 AmbientLight 環境光源 散乱する光源によって、オブジェクトに対し均等に光を当てる。影 […] JavaScript Tips three.js Light three.js WebGL
Three JS:基本の使い方総まとめ-Light > PointLight編- CREATE: 2016.2.26 UPDATE: 2019.08.23 2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。 名称 意味 役割 AmbientLight 環境光源 散乱する光源によって、オブジェクトに対し均等に光を当てる。影 […] JavaScript Tips three.js Light three.js WebGL
Three JS:基本の使い方総まとめ-Light > SpotLight編- CREATE: 2016.2.26 UPDATE: 2019.08.23 2016年2月現在のthree.js最新バージョンr74では、Light(光源)は以下の5種類あります。 名称 意味 役割 AmbientLight 環境光源 散乱する光源によって、オブジェクトに対し均等に光を当てる。影 […] JavaScript Tips three.js Light three.js WebGL
Three JS:CardboardEffect.jsを使ってVRコンテンツを作ってみた CREATE: 2016.2.22 UPDATE: 2019.08.23 人気WebGLライブラリのThree JSですが、バージョンアップ頻度が非常に早く2016年2月現在でr74となっております。r74では所々仕様が変わっており、新しいモジュールも増えています。色々と探っていたらeffec […] JavaScript Tips three.js three.js WebGL
Three JS:dat.GUIを使ってTorusKnotGeometryを極めてみる CREATE: 2016.2.18 UPDATE: 2019.08.23 前回のジオメトリー紹介では複雑なTorusKnotGeometryのプロパティがいまいち理解できませんでした。なので今回はブラウザ上でプロパティの値を動的に変更できるdat.GUIを使用して、理解度を深めようと思います。 […] JavaScript Tips three.js three.js WebGL
Three JS:基本の使い方総まとめ-ジオメトリー後編- CREATE: 2016.2.16 UPDATE: 2019.08.23 前編同様、Three JSで使えるジオメトリー(形状)に関してまとめました。今回は少し複雑な形のものを紹介します。もし良かったら前編も見てみてください。ひな形も前編で紹介したものを使います。 Three JS:基本の使い […] JavaScript Tips three.js three.js WebGL
Three JS:基本の使い方総まとめ-ジオメトリー前編- CREATE: 2016.2.15 UPDATE: 2019.08.23 Webサイトでは徐々にWebGLコンテンツを取り入れる企業が多くなり、私の仕事でも3Dを触る機会が増えてきました。WebGLコンテンツの制作にあたり、多々あるWebGLライブラリの中でもやはりおすすめはThree JSで […] JavaScript Tips three.js three.js WebGL
WordPress：特定の記事の中でThree.jsを使う方法 CREATE: 2016.2.4 UPDATE: 2019.08.23 WordPressで記事内にThree.jsを使用したコンテンツを表示する方法をご紹介します テーマをそのまま使用しているなど、なるべくfunction.phpなどテンプレートのソースコードをいじりたくない場合も多いです […] JavaScript Tips three.js WordPress three.js WebGL WordPress
three.jsでjson形式のモデルを表示してみる CREATE: 2016.2.3 UPDATE: 2019.08.23 WebGLを使用しているサイトも増え、3D表現を勉強されているWeb技術者も多いかと思います。 私もthree.jsで色々と試行錯誤しています。 今回は外部3Dモデルファイルを読み込み、表示してみたいと思います。 ちなみ […] JavaScript Tips three.js three.js WebGL
