Three.js入門 1
👇のチュートリアルから入門してみました。
Scene
Sceneは3D空間であり、オブジェクトやカメラ、光源を配置できます。 Sceneの空間のは必要に応じて、拡縮できます。
var scene = new THREE.Scene();
Camera
Cameraの設定をするときには以下の4つの要素の設定をする必要があります。
- fov: viewの垂直面。CameraのViewがリーチできる垂直空間のサイズ
- aspect: 垂直線に基づいて水平視野を作成するために使用する縦横比
- near: 最も近い平面View。CameraのViewが始まる場所
- far: 遠い平面View。CameraのViewが終わる場所
Lighting
空間はLightingで照らすことが出来ます。
- Directional Lights: ある1つの方向から照らす大きな光源(🌅とか)
- Ambient Lights: Sceneの為の少ない光源とたくさんのソフトカラー
- Point Lights: 蛍光バルブ灯の様な、全方向に輝いて範囲に制限がある光
- Spot Lights: スポットライトそのもの
- Hemisphere Lights: Sceneの天井や床からくる方向性をもたないアンビエント光
ここまでやってみて
難しい。。。。
いきなり用語説明されてもわけわからないので、別のルートを探そうか。
OSX ElCapitanにPythonでローカルサーバーを立ち上げる
まずはpythonのバージョンを確認
$ python --version Python 2.7.10
Command
- python2なら
$ python -m SimpleHTTPServer [ポート番号(デフォルトは8000)]
- python3なら
$ python3 -m http.server [ポート番号(デフォルトは8000)]
使い方
Rootにしたいディレクトリに移動して、👆のコマンドを叩くだけ。 最初は👇なアラートが出ます。
そのディレクトリ直下にあるindex.htmlが表示されます。 index.htmlがない場合は、ディレクトリリストが表示されます。
(イメージです)
- ログはこんな感じに出力
他の言語でも
RubyやPHP、JS(Node.js)などでも同様のHTTP Serverを立ち上げるモジュールがあるようですが、今のところ pythonのこのやりかたが一番しっくりくるので、とりあえずこれで。
ベクトルの線形補間について
全然わからないので、まずは言葉の意味から
補間とは
内挿(ないそう、英: interpolation、補間とも言う)とは、ある既知の数値データ列を基にして、そのデータ列の各区間の範囲内を埋める数値を求めること、またはそのような関数を与えること。またその手法を内挿法(補間法)という。内挿するためには、各区間の範囲内で成り立つと期待される関数と境界での振舞い(境界条件)を決めることが必要である。
分かるようなわからないような。
内挿やinterpolationの方が意味が分かるきもします。
Unityでは(以下引用)
まずは二次元から 2D
Vector2.Lerp
説明
a と b by t ベクトルの間で線形補間します。
t は [0...1] の間で制限されます。
When t = 0 returns a. When t = 1 return b. t = 0.5 のときは a と b の平均(ちょうど真ん中)を返します。
使い方
C Sharp
public static Vector2 Lerp(Vector2 a, Vector2 b, float t);
JavaScript
public static function Lerp(a: Vector2, b: Vector2, t: float): Vector2;
3Dでは
Vector3.Lerp
説明
直線上にある 2 つのベクトル間を補間します
t で a と b の間を補間します。t は、0-1 の範囲に固定されています。これは、直線状にあるポイント間(両端)で割合に対しての位置を取得するのに使用します(例えば徐々に目的地へ移動していくときに使用します)。
t = 0 のときは a を返します。 t = 1 のときは b を返します。 t = 0.5 のときは a と b の平均(ちょうど真ん中)を返します。
使い方
C Sharp
public static Vector3 Lerp(Vector3 a, Vector3 b, float t);
using UnityEngine; using System.Collections; public class ExampleClass : MonoBehaviour { public Transform startMarker; public Transform endMarker; public float speed = 1.0F; private float startTime; private float journeyLength; void Start() { startTime = Time.time; journeyLength = Vector3.Distance(startMarker.position, endMarker.position); } void Update() { float distCovered = (Time.time - startTime) * speed; float fracJourney = distCovered / journeyLength; transform.position = Vector3.Lerp(startMarker.position, endMarker.position, fracJourney); } }
JavaScript
public static function Lerp(a: Vector3, b: Vector3, t: float): Vector3;
// Transforms to act as start and end markers for the journey. var startMarker: Transform; var endMarker: Transform; // Movement speed in units/sec. var speed = 1.0; // Time when the movement started. private var startTime: float; // Total distance between the markers. private var journeyLength: float; function Start() { // Keep a note of the time the movement started. startTime = Time.time; // Calculate the journey length. journeyLength = Vector3.Distance(startMarker.position, endMarker.position); } // Follows the target position like with a spring function Update () { // Distance moved = time * speed. var distCovered = (Time.time - startTime) * speed; // Fraction of journey completed = current distance divided by total distance. var fracJourney = distCovered / journeyLength; // Set our position as a fraction of the distance between the markers. transform.position = Vector3.Lerp(startMarker.position, endMarker.position, fracJourney); }
lerp
Three.jsを思いっきり参考にしました。
基本的に(二点間)
- 書き方1
function lerp (start, end, alpha){ return (1 - alpha) * start + alpha * end }
2Dの場合
- 書き方1
function lerp ( v, alpha ) { this.x += ( v.x - this.x ) * alpha; this.y += ( v.y - this.y ) * alpha; return this; }
- 書き方2
function lerpVectors( v1, v2, alpha ) { return this.subVectors( v2, v1 ).multiplyScalar( alpha ).add( v1 ); } function add( v ) { this.x += v.x; this.y += v.y; return this; } function subVectors( a, b ) { this.x = a.x - b.x; this.y = a.y - b.y; return this; } function multiplyScalar( scalar ) { if ( isFinite( scalar ) ) { this.x *= scalar; this.y *= scalar; } else { this.x = 0; this.y = 0; } return this; }
3Dの場合
- 書き方1
function lerp( v, alpha ) { this.x += ( v.x - this.x ) * alpha; this.y += ( v.y - this.y ) * alpha; this.z += ( v.z - this.z ) * alpha; return this; }
- 書き方2
function lerpVectors( v1, v2, alpha ) { return this.subVectors( v2, v1 ).multiplyScalar( alpha ).add( v1 ); } function add( v ) { this.x += v.x; this.y += v.y; this.z += v.z; return this; } function subVectors( a, b ) { this.x = a.x - b.x; this.y = a.y - b.y; this.z = a.z - b.z; return this; } function multiplyScalar( scalar ) { if ( isFinite( scalar ) ) { this.x *= scalar; this.y *= scalar; this.z *= scalar; } else { this.x = 0; this.y = 0; this.z = 0; } return this; }
こんな感じなのだろうか?
Sending HTTP Request with Custon header like "AccessToken" by Almofire, and Getting them by Rails 4.x
GET with Custom Header by Alamofire
let URL = NSURL(string: "https://dinner.please")! let mutableURLRequest = NSMutableURLRequest(URL: URL) let message = "I want to eat!" mutableURLRequest.HTTPMethod = "GET" mutableURLRequest.setValue(message, forHTTPHeaderField: "Meat") let manager = Alamofire.Manager.sharedInstance manager.request(mutableURLRequest) .response { request, response, data, error in } . . .
Get them by Rails 4.x
request.headers["Meat"] # => "I want to eat"
AlamofireでRequest Headerに AccessTokenなどを設定してGETで通信して、Rails4.x でそれらを受け取る
忘れていたので、復習の意味でメモ。
AlamofireでCustom HeadersでGET
let URL = NSURL(string: "https://onedari.please")! let mutableURLRequest = NSMutableURLRequest(URL: URL) let message = "tabetai" mutableURLRequest.HTTPMethod = "GET" mutableURLRequest.setValue(message, forHTTPHeaderField: "Oniku") let manager = Alamofire.Manager.sharedInstance manager.request(mutableURLRequest) .response { request, response, data, error in } . . .
Rails4でHeaderの要素を受け取る
request.headers["Oniku"] # => "tabetai"
How to use URL including dot (decimal point) in Rails 4.x
What I want to do
GET http://domain.jp/api/2.1.1/users
or
GET http://domain.jp/meats/score/21293.02
(You may say URL with parameter including dot is not good....)
How I failed
config/routes.rb
get 'meats/score/:score' => 'meats#score'
routing_spec
it "routes to #score" do expect(:get => "/meats/score/5.4").to route_to("meats#score", score: "5.4", format: "json") end
And start rspec
No route matches "/meats/score/5.4"
Like above, I got No route matches
Rails does not permit to use dot in URL without any configuration
As this article says、Rails does not permit it.
By default the :id parameter doesn't accept dots - this is because the dot is used as a separator for formatted routes. If you need to use a dot within an :id add a constraint which overrides this - for example id: /[^\/]+/ allows anything except a slash.
Then how to resolve - Using constraints
, set restriction as regular expression
Constraints mean....
something that limits your freedom to do what you want [= restriction]
constraint against parameter
example of constraints
resources :photos, constraints: { id: /[A-Z][A-Z][0-9]+/ }
Line above means /photos/AB1
Very easy way to use dot in URL
get 'meats/score/:score' => 'meats#score', score: /[^\/]
This permit any character except slash /
Permit to use dot with limited format
Number + dot + Number
get 'meats/score/5.1' => 'meats#score', constraints: { score: /\d+\.\d+/ }
like 2.2.2.2.2.2.2.2
get 'meats/score/5.1' => 'meats#score', constraints: { score: /\d+(\.\d+)*/ }
like api/v2.1.1/foo
(You may say this is bad way of api versioning....)
You can use constraint below
, constraints: { api_version: /v\d+(\.\d+)*/ }