February 2012
3 posts
THREE.js で Ray を使ってクリックとかを取得
Ray はクリックした点を near 面から far 面まで伸びる線として扱い、その線と 3D オブジェクトが接したかで判定する方法。
THREE.js は Ray を使うことができ、これによりどのオブジェクトをクリックしたなどを判定できる。
判定したい mesh を meshArray とかみたいな配列に入れる。全部の Mesh を判定するなら scene まるごとでもいける
THREE.Projector を用意 new THREE.Projector();
カーソル位置をとって 3次元ベクトルに変換する
3 の 3次元ベクトルとカメラの位置を Ray に渡す
そうすると RAY.intersectObjects(meshArray) あるいは ray.intersectScene( scene ) に判定の結果、Ray と交差した全ての Mesh...
IE9 だと table を block にできない
IE9 だと、
<table>
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>
に対して、
th,td{
display:block;
}
としても、横並びのままで意図した表示にならない。float を適用すると強制的に block になるので以下を試したところ、table-cell のような表示ではなくなった。
th,td{
float:left;
clear:both;
}
この方法でなら、media queries...
IE6,7 で a < div したとき img をクリックできない場合の対処
原因は、a の中で float や position を使うことにある。float が原因の場合は以下で解決可能
html
<a href="#">
<div class="imgContainer">
<img src="http://dummyimage.com/100" />
</div>
</a>
css
<style>
a{
/*some codes ...*/
}
div.imgContainer{
float:left; /* a element which is applying float */
background:url(transparent.png); /* applying transparent image for IE6, 7 when using float...