Iwao Dev

気付いたことをメモしています.

この画面は、簡易表示です

2017 / 2月

threejs requestAnimationFrame

使い方が間違ってた?


  function three_start() {
    init() ;
    loop() ;
    }
  function loop() {
    controls.update();
    renderer.clear();
    renderer.render( scene, camera );
    requestAnimationFrame( loop );
    }


正しくは loader / babylon
  function init() {
    // …
    animate() ;
    // …
    }
  function animate() {
    requestAnimationFrame( animate );
    render();
    }
  function render() {
    controls.update();
    renderer.render( scene, camera );
    }
この方法でも,環境により CPU リソースが食われる.


一先ずここまで
本当は,完全にロードが終わったタイミングが取れれば良いのだが…


  にほんブログ村 IT技術ブログへ


threejs OrbitControls

以前(r58)調べた時,動作が変だったが…
  var controls = new THREE.OrbitControls( Camera, Renderer.domElement );
  controls.addEventListener( ‘change’, ThreeRender );
  controls.target.set(w/2,d/2,h/4) ;
  controls.update();
r84 では意図した動作になっている.


他にも幾つか動作を見直し中


r84 で
 3MFLoader は,うまく動作しない.
 AMFLoader は,テクスチャサポートなし?


  にほんブログ村 IT技術ブログへ


three.js OBJMTLLoader

以前調べた時と OBJMTLLoader の扱いが異なっているので,
 サンプルの該当部分を抽出.


r58
 var loader = new THREE.OBJMTLLoader();
 loader.addEventListener( ‘load’, function ( event ) {
  var object = event.content;
  object.position.y = – 80;
  scene.add( object );
  });
 loader.load( ‘obj/male02/male02.obj’, ‘obj/male02/male02_dds.mtl’ );


r66
 var loader = new THREE.OBJMTLLoader();
 loader.load( ‘obj/male02/male02.obj’, ‘obj/male02/male02_dds.mtl’, function ( object ) {
  object.position.y = – 80;
  scene.add( object );
  } );


r84
 var onProgress = function ( xhr ) {
  if ( xhr.lengthComputable ) {
   var percentComplete = xhr.loaded / xhr.total * 100;
   console.log( Math.round(percentComplete, 2) + ‘% downloaded’ );
   }
  };
 var onError = function ( xhr ) { };
 THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
 var mtlLoader = new THREE.MTLLoader();
 mtlLoader.setPath( ‘obj/male02/’ );
 mtlLoader.load( ‘male02_dds.mtl’, function( materials ) {
  materials.preload();
  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials( materials );
  objLoader.setPath( ‘obj/male02/’ );
  objLoader.load( ‘male02.obj’, function ( object ) {
   object.position.y = – 95;
   scene.add( object );
   }, onProgress, onError );
  });


r74 から変更されていて,OBJMTLLoader が削除されたらしい.
https://github.com/mrdoob/three.js/releases?after=r75
Improved OBJLoader and MTLLoader and made OBJMTLLoader obsolete.
それで参考にさせてもらったのがここ
http://stackoverflow.com/questions/35380403/how-to-use-objloader-and-mtlloader-in-three-js-r74-and-later


他にも,OBJLoader のデータのチェックが厳しくなったみたいで,
r84 OBJLoader.js 632 行目で
 throw new Error( "Unexpected line: '" + line + "'" );


クラスによっては前からみたいだが,position が readonly .
position のメンバに対して代入すれば OK .


  にほんブログ村 IT技術ブログへ


SceneJS

Cube.imo (0,0,0)-(1000,1000,1000) のデータに対して,
 translate X:-500 , y:-500 , z:500


spinYaw で,回転.spinPitch は上下方向.
yaw , pitch で最初の位置(角度で単位は度?).
zoom が中心までの相対位置?
zoomSensitivity は拡大率.
 yaw : 30 ,
 pitch : -10 ,
 zoom : 2500,
 zoomSensitivity : 100 ,
 spinYaw : 0.3 ,
cube_imo.html


yaw : 90 で右から.180 で後ろから.
pitch : -20 としているので,
 translate の y は中心でなく高さの 30% の位置にしている.
どうも材質の指定(obj の mtl など)は,効いてないみたい.
 script 内の type:”texture” , src: … で指定する?


  にほんブログ村 IT技術ブログへ


B65/R 追加

dynabook B65/R 追加.
はじめに.pdf にある通り,次の作業.
 リカバリーメディアの作成.
 PC 引越ナビ.


Win 10 のメディアは付属していたが,Win 7 が入っている状態.
セットアップで 32 / 64 ビットの選択があり,
 メモリが 4 G なので 32 を選択.
DVD-ROM ドライブのため,BRD-UT16WX を接続して作成.
DVR-R 4.7G メディアは 4 枚で,作成時間は 1 時間程度.
よく知らなかったが,
 DVD-ROM ドライブでも DVD-R のメディアは読めるみたい.


旧 PC は TXE/68HE で,USB メモリと LAN ケーブルを使う方法で.
USB メモリは空きが 50 MB 程度のものを利用.
LAN は旧 PC の制限で 100 M bps みたい.
転送されたデータは 100 G 程度で,6 時間位かかった.


その後 Web に接続して,MSSE をインストール.


  にほんブログ村 IT技術ブログへ


Win7 x86 に IIS

今回は Win7 環境で 3D データをダウンロード可能とするための設定.
three_js_imo


「コントロールパネル」-「プログラムと機能」から
  「Windows の機能の有効化または無効化」.
「インターネットインフォメーションサービス」にチェック.
win7_iis_check
localhost にアクセスすると,

ローカルから http://win7-mg-/ も可能.


他の PC から接続すると,
接続がタイムアウトしました
win7-mg- のサーバーからの応答が一定時間以内に返ってきませんでした。
このサイトが一時的に利用できなくなっていたり、サーバーの負荷が高すぎて接続できなくなっている可能性があります。しばらくしてから再度試してください。
他のサイトも表示できない場合、コンピューターのネットワーク接続を確認してください。
ファイアーウォールやプロキシでネットワークが保護されている場合、Firefox によるウェブアクセスが許可されているか確認してください。

他の PC からも可能にする場合は,ファイアウォールの設定が必要.
win7_iis_80_enable


「IIS マネージャー」の「サイト」-「右クリック」で「Web サイトの追加…」.
win7_iis_site_add
サイト名や物理パスを指定して「OK」.
win7_iis_add_site
—————————
Web サイトの追加
—————————
バインド ‘*:80:’ は別のサイトに割り当てられています。このサイトに同じバインドを割り当てると、いずれか一方のサイトしか開始できなくなります。重複するバインドを追加しますか?
—————————
はい(Y) いいえ(N)
—————————
win7_iis_add_80
「バインド ‘*:80:’ は…」と出るがそのまま「はい」.
「Default Web Site」-「右クリック」-「バインドの編集…」.
win7_iis_edit_bind
「ポート」を「80」でない,「8000」などに.
状態が停止しているので「開始」を「クリック」.
win7_iis_start_new_site


まだファイルなどが存在しないので,localhost にアクセスすると,
win7_iis_error_403_14
他の PC からは,「403 – 許可されていません: アクセスが…」
最終的には「無効」にするが,「ディレクトリの参照」を「有効」に.
win7_iis_dir_list
win7_iis_dir_enable
win7_iis_local_empty


3D データを web に展開.
win7_iis_3d_data
localhost/3D_Data/ を開くと,
win7_iis_local_3d_data
localhost/3D_Data/three_js/ThreeIMO.htm を開くと,
win7_iis_three_js_empty
動作はしているが,データが表示されない.
localhost/3D_Data/three_js/Cube.imo を開くと,
win7_iis_cube_imo_404_3
MIME マップの追加が必要で,
win7_iis_mime_
「MIME の種類」をどう指定するべきかは不明だが,
win7_iis_mime_imo
「application/IMO」として追加.


これらの幾つかの情報は TechNet にもある.
TechNet IIS での静的な Web サイトの構築


  にほんブログ村 IT技術ブログへ


three.js obj

three.js の OBJMTLLoader で,imo を使用できそう.

   var loader = new THREE.OBJMTLLoader();
   loader.addEventListener('load', function (event) {
    var object = event.content;
    object.rotation.set(90 * Math.PI / 180, 0, 0);
    Scene.add(object);
   });
   loader.load('Cube.imo');

ThreeIMO.htm


imo は,OBJとMTL を拡張した個人的な形式です.
i3DV で表示可能です.


  にほんブログ村 IT技術ブログへ


html style

今まで HTML の範囲としていたので次の様にしていたが,
 static Xml_E img   (c_tstring& src) {
   Xml_E img_(HTM_img) ;
     img_.AddAttribute(HTM_src,src) ;
   return img_ ;
   }

 static Xml_E img_b  (c_tstring& src) {
   Xml_E img = HtmOut::img(src) ;
     img.AddAttribute(HTM_border,_T("1")) ;
   return img ;
   }
 static Xml_E img_b_at_w (c_tstring& src,c_tstring& name,c_tstring& width) {
   Xml_E img = HtmOut::img_b(src) ;
     img.AddAttribute(HTM_alt, name) ;
     img.AddAttribute(HTM_title, name) ;
    if (!width.empty()) {
     img.AddAttribute(HTM_width, width) ;
     }
   return img ;
   }

css を利用することにより,もう少し簡単にできそう.


ここの記述で,タブサイズを指定したが,
<code style=” -o-tab-size: 4 ; -moz-tab-size: 4 ; tab-size: 4 ;”>
Blogger では,記事を書いて「保存」すると” “(半角スペース)に置換えられてしまう.


css のコメントは,C 等の様に /* */


  にほんブログ村 IT技術ブログへ


index.htm が開かれない

DS115j で,WordPress でない\\DS115j\web\以下の index.htm が開かれなくなった.
http://itl.mydns.jp/3D_Data/ の様な指定.
http://itl.mydns.jp/3D_Data/index.htm と指定すれば OK .
パーソナルWebサイトの方は OK みたい.
http://itl.mydns.jp/~…/


原因は,「Web Station」の「全般設定」で「Apache…」から「Nginx」に変更したため.
index.html を置くことで様子見.
DSM > ヘルプ > Web Station


  にほんブログ村 IT技術ブログへ



    top

    %d人のブロガーが「いいね」をつけました。