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 リソースが食われる.
一先ずここまで.
本当は,完全にロードが終わったタイミングが取れれば良いのだが…
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 では意図した動作になっている.
他にも幾つか動作を見直し中.
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 .
2023/08
https://dev.mish.work/wordpress/category/webgl/
https://itl.mish.work/_lib/js/i_lib/threejs/r131/c_3js_10.js
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: … で指定する?
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 をインストール.
Win7 x86 に IIS
今回は Win7 環境で 3D データをダウンロード可能とするための設定.
「コントロールパネル」-「プログラムと機能」から
「Windows の機能の有効化または無効化」.
「インターネットインフォメーションサービス」にチェック.
localhost にアクセスすると,
ローカルから http://win7-mg-/ も可能.
他の PC から接続すると,
接続がタイムアウトしました
win7-mg- のサーバーからの応答が一定時間以内に返ってきませんでした。
このサイトが一時的に利用できなくなっていたり、サーバーの負荷が高すぎて接続できなくなっている可能性があります。しばらくしてから再度試してください。
他のサイトも表示できない場合、コンピューターのネットワーク接続を確認してください。
ファイアーウォールやプロキシでネットワークが保護されている場合、Firefox によるウェブアクセスが許可されているか確認してください。
他の PC からも可能にする場合は,ファイアウォールの設定が必要.
「IIS マネージャー」の「サイト」-「右クリック」で「Web サイトの追加…」.
サイト名や物理パスを指定して「OK」.
—————————
Web サイトの追加
—————————
バインド ‘*:80:’ は別のサイトに割り当てられています。このサイトに同じバインドを割り当てると、いずれか一方のサイトしか開始できなくなります。重複するバインドを追加しますか?
—————————
はい(Y) いいえ(N)
—————————
「バインド ‘*:80:’ は…」と出るがそのまま「はい」.
「Default Web Site」-「右クリック」-「バインドの編集…」.
「ポート」を「80」でない,「8000」などに.
状態が停止しているので「開始」を「クリック」.
まだファイルなどが存在しないので,localhost にアクセスすると,
他の PC からは,「403 – 許可されていません: アクセスが…」
最終的には「無効」にするが,「ディレクトリの参照」を「有効」に.
3D データを web に展開.
localhost/3D_Data/ を開くと,
localhost/3D_Data/three_js/ThreeIMO.htm を開くと,
動作はしているが,データが表示されない.
localhost/3D_Data/three_js/Cube.imo を開くと,
MIME マップの追加が必要で,
「MIME の種類」をどう指定するべきかは不明だが,
「application/IMO」として追加.
これらの幾つかの情報は TechNet にもある.
TechNet IIS での静的な Web サイトの構築
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');
imo は,OBJとMTL を拡張した個人的な形式です.
i3DV で表示可能です.
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 等の様に /* */ .
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