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

javascriptのクラス取得

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

jsでクラス名を取得するときこんな感じ。
document.getElementsByClassName(className [, parentElement])

これだと、そのクラス名の要素配列がかえってくる。
jsでクリエイトしたdivとかのクラス名を取得/指定したい場合は
element.className='hoge';

みたいなかんじでやればできる。

SVGのclass名変更

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

SVGのpath要素のクラス名を途中で変更したりする場合
hoge.className="new";
みたいな書き方ではダメだった。

調べるとjQueryを使っている場合でも
addClassではなくattrで行わないと
うまくいかないみたい。

なので、classNameに代入とかではなく
getAttribute/setAttributeを使う事で解決。

こんな感じ。
logoSvg[i].getAttribute("class")
logoSvg[i].setAttribute("class","新しいclass値。追加の場合は古い値も含む");

参考URL
element.setAttribute
SVG 要素のクラス操作は addClass()/removeClass() ではなく attr() で。 - べにやまぶろぐ

canvasが濁るのを回避

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

html5のcanvasでdrawを繰り返すとcanvasで
drawした文字などが汚く濁る。

これを回避する為に色々やってみた。
今回はパーティクルを実装しているときに
その現象が起きたので、
パーティクルを描画する回数を少なくする処理として
getImageData/putImageDataを利用した。

簡単にいうと、それぞれのパーティクルに
位置情報をもたせて、imageDataの中の情報を差し替え
描画自体は1回で対応させる。

厳密にいうと、パーティクルさせていない部分も
描画しているので、1回ではないけど
だいぶこの対応でましになった。

メモ。

claptaps project[4]

lightwaveで単位プリミティブのcubeを
作ってflashへ移植。

ball同様、uv反転したので
オブジェクトをz軸で上下逆にしてobj書き出し。

マッピングするテクスチャのサイズが
ある程度の高さと幅がないと
描画が荒れる。

一面のサイズが等倍より少し小さいくらいだから
いけるかと思ったが、全然綺麗さがちがった。

右の方は、photoshopでむりやり引き延ばしているので
少し緩いのはそのため。

img_150121_3.jpg