うちのいぬ Tech Blog

Tech Blog of Uchinoinu/My dog

Three.js入門 1

👇のチュートリアルから入門してみました。

codepen.io

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にしたいディレクトリに移動して、👆のコマンドを叩くだけ。 最初は👇なアラートが出ます。 f:id:susanne:20161227102103p:plain

そのディレクトリ直下にあるindex.htmlが表示されます。 index.htmlがない場合は、ディレクトリリストが表示されます。

f:id:susanne:20161227102050g:plain (イメージです)

  • ログはこんな感じに出力 f:id:susanne:20161227102059p:plain

他の言語でも

RubyPHP、JS(Node.js)などでも同様のHTTP Serverを立ち上げるモジュールがあるようですが、今のところ pythonのこのやりかたが一番しっくりくるので、とりあえずこれで。

ベクトルの線形補間について

全然わからないので、まずは言葉の意味から

補間とは

wikipedia引用

内挿(ないそう、英: 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+)*/ }

References