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
ハイブリッドアプリで使えるデータベースまとめ CREATE: 2016.3.22 UPDATE: 2019.08.23 ハイブリッドアプリでデータベースを利用したいときのあれこれをまとめました。私の製作環境はMonacaですが、Cordova環境全般に同様です。 使用できるデータベース・ストレージの選択肢が多い事は良い事なのですが、結局ど […] Angular.js JavaScript Tips monaca アプリ開発 monaca アプリ データベース
Monacaを使ってクイズアプリをたった1時間で作ってみる-後編- CREATE: 2016.3.17 UPDATE: 2019.08.23 前回はクイズアプリのトップページとクイズページの途中まで作成いたしました。今回はデータオブジェクトからクイズデータを持って来てバインド、正解不正解のアラート表示、結果画面でのスコア表示、全体のレイアウトを行いたいと思いま […] Angular.js JavaScript Tips monaca アプリ開発 Angular JS monaca Onsen UI アプリ
Monacaを使ってクイズアプリをたった1時間で作ってみる-前編- CREATE: 2016.3.16 UPDATE: 2019.08.23 HTML・CSS・JavaScriptなどのWeb技術のみで制作が可能なスマートフォンアプリ、いわゆるハイブリッドアプリの制作サービスMonacaを使って簡単なクイズアプリを作ってみようと思います。今回は無料で使えるMo […] Angular.js JavaScript Tips monaca アプリ開発 Angular JS monaca Onsen UI アプリ
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
Chart.jsとAngular JSを組み合わせて動的なグラフを生成してみる CREATE: 2016.2.8 UPDATE: 2019.08.23 前回に引き続き、Chart.jsのTipsです。 Chart.jsを使いグラフを表示してみる 今回はAngular.jsとChart.jsを組み合わせて、動的に値が変化するグラフを作ります。 Angular.jsの基本的 […] Angular.js Chart.js JavaScript Tips Angular JS Chart.js
