初めてのThree.jsを読む #3
つづきです
Chapter3
- AmbientLight 基本的なライト。ライトの色がオブジェクトの色に追加される。影を落とさない
- AmbientLightはシーンのゆういつの光源として使われることはない。
- AmibentLIghtはコンストラクタに指定するのは色だけ。
- PointLight すべての方向に発散する空間内の一点。影を落とすことはできない
- PointLightの強さはintensityプロパティで決まる
- PointLightのdistanceプロパティはintensityが0になるまで、どれくらい光がすすめるかを指定する
- SpotLight 円錐状の影響範囲を持つ。影を落とすことができる。ランタンや懐中電灯のイメージ
- SpotLightはtargetプロパティを使うことで、常にその指定したオブジェクトを向かせることができる
- オブジェクト以外の空間を向かせるときは、THREE.Object3Dを使う。
- SpotLightは特定のオブジェクトを強く照らしたり、ちいさな閃光を模擬するようなときにも使える
- DirectionLIght ターゲットがどれほど遠くにあっても減衰しない
- HemisphereLight 屋外にいるような見た目になる
- LensFrare よりリアルな見た目にできる
初めてのThree.jsを読む #2
1 の続き
2章 シーンの基本要素
- シーンの表示に必要な3つのコンポーネントは、カメラ、ライト、オブジェクト
- Three.jsのオブジェクトはTHREE.Object3Dを継承している。
- THREE.Scene.addはオブジェクトをシーンに追加
- THREE.Scene.removeはオブジェクトをシーンから削除
- THREE.Scene.children シーン内のすべての子要素のリストを取得
- THREE.Scene.getObjectByName 名前を指定してシーンからオブジェクトを取得
- ジオメトリとは、頂点群と呼ばれる3D空間での座標の集合とそれらの天をつないでまとめた数多くの面のこと
- verticesプロパティとfacesプロパティを使って手作業でジオメトリを作成することもできる
- positionプロパティは親要素からの相対位置
- rotationプロパティを使用するといずれかの軸の周りに回転できる
- scaleプロパティは拡大縮小できる
- translateプロパティも移動できる。相対的な値を指定する
- perspectiveビューは自然な見た目になる（遠方ほど小さく描画される）
- orthographicビューはすべての立方体が同じサイズで描画される
- lookAt関数を使用すると視線をシーン内の特定のメッシュに向けることができる
JavaScriptでスクロールさせる
JavaScriptでスクロールさせる方法のメモです！
var target = document.getElementById('スクロールさせたい先の要素のId').getBoundingClientRect().top; scrollTo(0, target);
getBoundingClientRect()について少しだけ調べました。
CSSで定義されている、呼び出された要素のボックスを返すようです。
だからtopが取れるんですね。なるほど
Element.getBoundingClientRect() - Web API | MDN
以上。
早起きしてみた。眠い...
あとさむい
初めてのThree.jsを読む #1
オライリーから出ている「初めてのThree.js」を買ったので、学んだことをまとめていきます。
あくまで自分用のメモ。
1章 初めての3Dシーン作成
- Sceneオブジェクトがなければ何も描画されない
- Cameraオブジェクトはシーンを描画するときに何が見えるかを決定する
- rendererオブジェクトはCameraオブジェクトの角度に基づいてブラウザ内でSceneオブジェクトがどの様に見えるかを計算する
- axesオブジェクトはデバッグ用ツール。オブジェクトがどこに描画されるか確認できる
- THREE.PlaneGeometry()はPlaneオブジェクトの幅と高さを定義
- Three.jsはマテリアルオブジェクトを作成することでオブジェクトの見た目を指定できる。
- MeshBasicMaterialは光源には反応しない
- MeshLambertMaterialは光源に反応する
- Three.jsは影の描画をデフォルトで無効化している
- 影の有効化は、rendererのshadowMapのenabledをtrueにし、描画している各オブジェクトのreceiveShadow/castShadowをtrueにする
- シーンのアニメーションにはrequestAnimationFrame関数を仕様する
- stats.jsを使って1秒ごとのフレーム数を確認する
- dat.GUIを使って、GUIから物体の回転速度や移動速度を制御する
一回読んだだけで覚えられる気がしない。。。 何回もくりかえしですね！
WWW sql Designerがとてもよい
メモです。
めちゃくちゃ良いER図作成ツールを見つけました。
webベースでありながらJavaScriptメインで書かれているので、ローカルでサーバー立てれば使えるという素晴らしい仕様。
ダウンロードは↓から
GitHub - ondras/wwwsqldesigner: WWW SQL Designer, your online SQL diagramming tool
github乗っている使い方をメモしておきます。
使い方
１. http-server - npmをインストール
$ npm i http-server -g
２. www sql designerのルートディレクトリに移動して、http-serverを起動
$ http-server
３. ブラウザでlocalhost:8080にアクセス
Laravelで外部キーを設定する
忘れそうなのでメモ
user table
| カラム | 型 |
|---|---|
| id | increments |
performance table
| カラム | 型 |
|---|---|
| user_id | integer |
みたいなリレーションをもたせたいときのmigrationの書き方
performance tableへ変更を加えるmigrationファイル
public function up()
{
Schema::table('recipes', function (Blueprint $table) {
$table->integer('user_id')->unsigned()->change();
$table->foreign('user_id')->references('id')->on('users');
});
}
LaravelでDBの既存カラムを変更しようとしたらエラー
エラー内容
Laravelのmigrationを使って、既存カラムをnull許容に変更しようとしたら、下記エラーが出ました。
RuntimeException : Changing columns for table "テーブル名" requires Doctrine DBAL; install "doctrine/dbal".
解決方法
composerで"doctrine/dbal"をインストールします。
$ composer require doctrine/dbal
