WebGL three.js r111
Iwao Dev
気付いたことをメモしています．
この画面は、簡易表示です
WebGL
WebGL three.js OBJLoader ‘l’
以前 OBJ 内の線の情報を使えないかと思い調べたが，その時はわからないでいた．
Wiki Wavefront .obj file を参考に OBJ ファイルを編集して three.js で読み込んだがうまく読めなかった．
ちょっと別件で詰まってしまったので気分転換に調べていたら…
次の様な指定だとうまくいきそうとわかった．
l 1/ 2/
l 1/ 2/ 2/ 3/ 3/ 4/ 4/ 1/
WebGL three.js r91 – r109
WebGL three.js の r91 以降の変更による影響のメモ
OBJ と MTL を使用しているので webgl_loader_obj_mtl.html の変更内容．
r91 → r96
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'models/obj/male02/' );
mtlLoader.load( 'male02_dds.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'models/obj/male02/' );
objLoader.load( 'male02.obj', function ( object ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
});
new THREE.MTLLoader()
.setPath( 'models/obj/male02/' )
.load( 'male02_dds.mtl', function ( materials ) {
materials.preload();
new THREE.OBJLoader()
.setMaterials( materials )
.setPath( 'models/obj/male02/' )
.load( 'male02.obj', function ( object ) {
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
} );
→ r97
js/Detector.js がなくなった．
→ r99
r97 var onError = function ( xhr ) { };
r99 var onError = function () { };
→ r101
jsm が追加されている．
→ r105
style が main.css に．
→ r106
module を使用する様に変更されている．
→ r109
setTexturePath が使えなくなったのでコメントに．
// mtlLdr.setTexturePath (imoPath) ; mtlLdr.setPath (imoPath) ;
three.js で表示できない
ipl を WebGL で表示できる形式に変換しても，表示できないデータができてしまった．
本当は次の様に表示されなければならない．
vt と vn がない時にうまくない．
f 1// 2// 3// の様になってしまっていて，これをうまく処理してくれない．
https 対応
サーバが対応していれば，http を https と書換えれば良さそう．
<script src="http://iwaomics.web.fc2.com/_lib/.../three.min.js"> </script>
https://iwaomics.web.fc2.com/_lib/.../three.min.js
https: などを付けないと言う考え方もあるが，js を利用したローカルファイルでうまく動作しなくなる．
fc2 は「設定」－「基本設定」の「SSL暗号化通信（HTTPS）の設定」で「SSLの設定」を「有効にする」．
Synology NAS DS116 の「SSL 証明書」の取得は，次の所を参考にさせてもらいました．
ホームネットワーク研究所 Let’s Encryptの無償のSSL証明書の取得方法
2018/07/30
1ヶ月位経って，検索から https へのアクセスが半分程度の比率になった？
yahoo
bing
DuckDuckGo
Cardboard と WebGL
Cardboard で撮った画像を，WebGL の背景として利用してみた．
もう少しうまく貼れればと思うが，方法がわからない．
球に貼っているため縦方向に引き伸ばされてしまう．
以下，画像は 横:縦 = 2:1 に編集している．
このすぐ下は，SceneJS を使用したもの．
2018/04/27 画像をアップロードできるページ
360度パノラマ画像の表示
iframe を右下に
左上を指定して下や右をフィットさせるのが意外と面倒だったので…
<!DOCTYPE html>
<html lang="ja" >
<head >
<meta charset="UTF-8" />
<title >iframe</title>
<style>
body {
margin : auto auto auto auto ;
overflow : hidden ;
}
</style>
</head>
<body >
Text<br/>
<i f r a m e
src=’/3D_Data/three_js/ThreeIMO.htm’
name=’ifrm’
style=’
position : absolute ;
width : 99% ;
height : 90% ;
bottom : 2pt ;
margin-left : 2pt ;
margin-right : 2pt ;
‘
>
</i f r a m e>
</body>
</html>
//iwao.synology.me/~Iwao/test6//
2017/07/10 さらに変更したもの
itl.mydns.jp/…/to_wgl/
moto g5
MR03LN も 2 年になったのと，107SH の調子が…
内蔵メモリが足りなくて，AP の更新ができなかったり，SMS が受信できないなど．
それと丁度のタイミングで，3GB でもシェア SIM が利用できる様になったので，Moto G5 追加．
107SH だったこともあるが，やはり大きい．
今は当たり前なのかもしれないが，指紋認証センサの使い勝手が良い．
WebGL（three.js）のデータの表示が，思ったより遅い．
私の使い方では，バッテリーは 24 時間持つ．
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 では意図した動作になっている．
他にも幾つか動作を見直し中．
r84 で
3MFLoader は，うまく動作しない．
AMFLoader は，テクスチャサポートなし？
%d人のブロガーが「いいね」をつけました。