Posts tagged with javascript


タイトルの通り。 とりあえず下記サイト様の方法で問題なく実現できる。 WebGL対応のライブラリThree.jsを爆速にする方法 ただしこの方法は少し古いらしく、コンソールには「mergeというメソッドはGeometryUtilsクラスからGeometryクラスに移動しました。」的な表示がされてしまう。 原文は「THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.」 暫定最新版の仕様通りに実装してこのアラートを消す方法のメモ。 以下では上記サイトのコード内容に沿って進めます。 //Geometryオブジェクト var geometry; //Meshオブジェクト var meshItem; まずはアラートに従って素直に THREE.GeometryUtils.…

以前Three.jsを触り始めた頃に、2次元ではブロック崩しが定番なように、3次元ならルービックキューブが定番だろと勝手に決めつけてチャレンジしたことがある。 しかし結局ルービックキューブを完成させることはできず、妥協して違うものを作ったという半年ほど前の苦い過去。 そのときどうしても解決できなかったのがブロックの回転。 クォータニオンという概念を初めて知ったのもあって解決策が全く分からなかった。 状況としては、大体以下のような感じ。 ルービックキューブなのだからブロックの回転は常にx,y,zの3軸に対して行いたい。 となればまぁ普通にこんな風な回転用のクォータニオンオブジェクトを作成する。 //操作対象メッシュ var mesh; /* メッシュ等の作成部分省略 */ //3軸 var Axis = { "x" : new THREE.Vector3(1, 0, 0).normalize(), "y" : new THREE.Vector3(0,…

前回 の記事でDataTablesが内部的に持っているデータを取得できるはずと書いたが、やはりというか当然というかもちろん実装されていた。 普通に日本語の解説サイトで便利機能が網羅されている。 ただこのページの右下には 「Last-modified: Tue, 12 Jun 2012 23:16:16 JST (1043d)」 とあるからちょっっと古い雰囲気。 やはり本家さんのが最新バージョンでの使い方なのかな。 ということで今回は本家のマニュアルを参考したプロパティ設定でやってみる(引き続き@DataTables 1.10.6)。 とりあえず列定義用のオブジェクトはこんな風でいける。 var colDef = [ { "title" : "お名前", "data" : "name" }, { "title" : "出席", "data" : "attend", "render"…

タイトルの通り。 json突っ込めばそのまま表示してくれるDataTablesだけど、 少しだけデータの表示を変えたいという場面がちょくちょくある。 例えばチェックフラグをデータとしては0or1で保存するが、テーブルでは「✔」で表示したいときなど。 json側をちょこっと編集してからテーブルに突っ込めばそれで済むわけだけど、きっと何か便利機能があるはずと思ってマニュアル読んでたら案の定実装済だった。 使い方はこんな感じ。 var colDef = [ { "sTitle" : "title", "mData" : "name" }, { "sTitle" : "✔", "mData" : "check", "render" : function(data, type, row) { if (data == 1) { return "✔"; } return ""; }, } ]; マニュアル にも普通に掲載されてるからそっち見たほうが速いかも。 ところで列定義パラメータってどれが最新版なのだろうか。 マニュアルとは違うけど、とりあえず今回は自分が知っているパラメータで紹介(@DataTables 1.…

ajaxでjsonとjsonpの違いを調べていたら驚愕したことメモ。 例えば以下のようにajaxでjsonp取得リクエストをする。 jsonp callback([ { "no" : 0, "name" : "零郎" }, { "no" : 1, "name" : "一郎" }, { "no" : 2, "name" : "二郎" } ]); jsコード // コールバック var callback = function(json){ console.log(json); }; $.ajax({ url : 'jsonpの場所', type : 'GET', dataType : 'jsonp', timeout : 10000, jsonpCallback…