three.js light

  • 投稿日:
  • by
  • カテゴリ:

ライトの種類のメモ。
ライトの種類は色々あるけど、まずは「DirectionalLight(平行光源)」。
平行光源は、太陽光のような、一定方向から全体を照らす光源の事。

ただし、平行光源だけだと、光が当たらない影の部分が完全に真っ黒になってしまうので、
もう一つ「AmbientLight(環境光)」を合わせて使う。
環境光とは、自然光の乱反射を表現するもの。
環境光は、方向関係なく、ありとあらゆるものを照らす光。

SNS API メモ

  • 投稿日:
  • by
  • カテゴリ:

SNSのAPIでもろもろ仕様メモ

■twiter
・取得可能期間:過去1週間
・一度に取得可能な投稿数:100件

twitter:15〜180/15秒(※取得項目により違いがあります)

■Instagram
・取得可能期間:かなり昔まで(仕様にかいてないっぽい?)
・一度に取得可能な投稿数:90件
・一時間に可能なアクセス
 認証あり:1tokenごとに1時間5000コール 
 認証なし:1アプリごとに1時間5000コール

three.jsメモ5

  • 投稿日:
  • by
  • カテゴリ:
geometry/material/textureは
removeだけだと削除されずレンダラーのメモリに残る。

そんな時はdisposeで消えるらしい

scene.remove( mesh ); geometry.dispose(); material.dispose(); texture.dispose();

参考URL
http://qiita.com/yomotsu/items/7be847bf2fd08335e8b1

three.jsメモ4

  • 投稿日:
  • by
  • カテゴリ:

モーレツな勢いで作っていたので
あってるかわからないけど個人メモ。

pointCloudはnewしたらvertices増やせなかった。

それとgeometryとpointCloudを
二つつくるとカメラ移動中に消えてしまうバグが
でたのでgeometryとpointCloudを一つで対応。

たぶんどちらも解決できるんだろうが
すこし時間かかりそう。。。

three.jsメモ3

  • 投稿日:
  • by
  • カテゴリ:

three.jsは右手座標系でx:左、y:上、z:奥が正の向き。

flashと連動させるから、x、yにマイナスかけた。

geometry.needsUpdate

  • 投稿日:
  • by
  • カテゴリ:

嵌ったのでメモ。

three.jsでgeometry.verticesやgeometry.colorsの
値をレンダラーの中で更新する時は毎回
geometry.verticesNeedUpdate=true;
geometry.colorsNeedUpdate=true;
をレンダラの中で行う。

毎回falseに戻るらしい。

参考URL
http://threejs.org/docs/#Reference/Core/Geometry
http://fkef.hatenablog.com/entry/2015/03/10/014318
http://qiita.com/_nabe/items/b9cd5c2273eb19860d36

three.jsメモ2

  • 投稿日:
  • by
  • カテゴリ:

Three.jsのカメラは2種類。

透視投影:PerspectiveCamera
通常の空間におけるモノの見え方。
PerspectiveCamera( 視野角(0~90) , アスペクト比(縦横比) , カメラから視体積の手前までの距離 , カメラから視体積の奥までの距離);

正投影:OrthographicCamera
物体の見た目の大きさが視点からの距離によらず、どこから見ても同じ大きさに見える。
OrthographicCamera(カメラ中心座標からの左側の長さ , カメラ中心座標からの右側の長さ , カメラ中心座標からの上側の長さ , カメラ中心座標からの下側の長さ , カメラから視体積の手前までの距離 , カメラから視体積の奥までの距離 );

で、とりあえずperticleCloudでドットを敷き詰めて試した。

■perspectiveCameraの場合
横1000×縦500とかで縦横10pxのドットで敷き詰めたらば
perspectiveCameraでは左右の端の方になると、ドットとドットの
間に隙間ができた。cameraのz値を動かすとそれに合わせドットが拡大縮小する。

pointCloudMaterialのsizeAttenuationをtrueにすると隙間は出来ないが
cameraでよっていくと、ドットがスケールせず小さくなったように見える。
PointCloudMaterial( { size: size ,vertexColors: true,sizeAttenuation:false} );

particleCloudではなく爆重だけどPlaneでドットを量産した場合は
隙間が出来ない&カメラのズームも反映される。


■OrthographicCameraの場合
OrthographicCameraでは、隙間が出来ないかわりに
cameraのz値をいじってもドットが拡大縮小しない&寄っていくようにみえない。



ドットのスケーリング、カメラのより引きの反映などによって
決断する感じになりそう。

PerspectiveCameraで
視野角を50くらいで調整するとダイナミックさはなくなるけど
隙間は距離によってあまりかわらなかった。




解像度まとめ(レスポンシブ用)

  • 投稿日:
  • by
  • カテゴリ:

レスポンシブさせる際に、必要になったので
解像度を調べた。


■iPhone4S
デバイスピクセル:640×960
論理上のピクセル:320×480
ピクセル密度:326ppi
デバイス・ピクセル比:2.0

■iPhone5/5S
デバイスピクセル:640×1136
論理上のピクセル:320×568
ピクセル密度:326ppi
デバイス・ピクセル比:2.0

■iPhone6
デバイスピクセル:750×1334
論理上のピクセル:375×667
ピクセル密度:326ppi
デバイス・ピクセル比:2.0

■iPhone6 Plus
デバイスピクセル:1080×1920(1242×2208)
論理上のピクセル:414×736
ピクセル密度:401ppi
デバイス・ピクセル比:3.0

■iPad Air2
デバイスピクセル:1080×1920(1242×2208)
論理上のピクセル:768×1024

レスポンシブさせる際、ブレークポイントは
論理上のピクセルで決める。。。

まあ、個人的にはブレークポイントいらないサイトとかが
美しい気がするけどね。制作側の都合だけれども。

iPadに関しては、ブレークポイント3つつくってもいいけど
予算や工数によって、PC or  SPに合わせる感じか。
構成の段階で、本当にブレークポイント3つにするメリット
があるかかんがえないと。

参考URL
http://qiita.com/uebo/items/854c284ed11aca741d93
https://www.imd-net.com/blog/2015/02/24-002823/
http://lab.sonicmoov.com/markup/iphone-6-coding/

three.jsメモ1

  • 投稿日:
  • by
  • カテゴリ:

・mesh(物体)はgeometry(形状)とmaterial(材質)で作る

var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

・geometryはpushでplaneなど作るのと、geometry.verticesで頂点をつないで作る事が出来る。
setFaceCullingでカリング(表裏描画)設定もある。
参考
http://www.atmarkit.co.jp/ait/articles/1210/04/news142_2.html