Three.js入門 2 - 開発環境を整える
👆をcloneして動かします。
とはいえ、yarnを入れる必要があったので、入れます。
yarnって何かいまいち言葉にできないので、それはこれから勉強します。
これでとりあえず、大枠は出来ました。
http://localhost:3355
にアクセスして、画面が表示されたら動いたということで。
階層を自分仕様に
いじるコードをsrcの中に入れる
- src -> src/js
- styles -> src/styles
.postcssrc.jsonを一部修正
"input": "src/styles/main.css",
webpack.config.jsを一部修正
module.exports = { entry: "./src/js/main.js",
テスト
$ yarn start
jade(pug)を使う
インストール
$ yarn add pug pug-cli -D
src/html/index.jade(pug)を作成
npm scriptを修正
"build:html": "pug --hierarchy -o public/ src/html/", "watch:html": "pug -w --hierarchy -o public/ src/html/",
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"