久しぶりに Three.js を更新しようかと…
いつものデータを r144 に書き換えて…
r131 と比べると，オブジェクトが暗い．
サンプルのデータを見ると mtl が変更されている．
ライブラリの変更履歴 を見ると 136 → 137 で変更されている．
r136 までにして，この辺りが更新された時に見直すこととするか？
Iwao myds
dev.mish.work へ移行しました．
この画面は、簡易表示です
WebGL
Edge で WebGL が表示できない？
Edge で three.js を利用したデータが表示できなかった．
デバッガで追いかけると，WebGL を利用できない様なエラー．
Edge を再起動すると，うまく表示できるようになった．
何だったのだろう？
JavaScript module Three.js
前回 Three.js の バージョンを更新 した時に気づいていたがそのままになっていたので少し調べてみた．
きっかけは，今まで r109 だったものを r131 にしようかと …
three.module.js は r83 ぐらい？ example が module 対応になったのは r105 の頃か？
r105 と r106 の ./example/js/loaders/OBJLoader.js の内容は同じ．
./webgl_loader_obj_mtl.html は import 部分と THREE が異なる．JavaScript のコードとしては同じ？
次の所を参考に，いろいろと…
JavaScript モジュール
そこにある basic-modules を，import でない方法で書き直し．
main.js を html 内の body に取り込み．
最初，間違って head 内に書いたら create でエラー（document.body が null）．
また，canvas.js 内に export が存在するとうまくいかず，js をコピーして，その行をコメントに．
それを import を使用した方法に．
main.js を直接 body 内に記述したもの．
*.js をどちらの場合も同じものとしたいが，方法は？
2021/06/06
Three.js で，同じ OBJLoader.js を使っているのかと思ったが，違った．
example/js/OBJLoader.js と example/jsm/OBJLoader.js が存在している．
ある程度 module を使うための変更内容がわかったので，既存のデータを変更してみた．
データはいつもの．http:/
r109 を利用している．それを r131 に変更．
c_3js_10.js の先頭に次のもの追加．
import * as THREE from '/_lib/js/webgl/threejs/r131/build/three.module.js';
import { OrbitControls } from '/_lib/js/webgl/threejs/r131/examples/jsm/controls/OrbitControls.js';
import { MTLLoader } from '/_lib/js/webgl/threejs/r131/examples/jsm/loaders/MTLLoader.js';
import { OBJLoader } from '/_lib/js/webgl/threejs/r131/examples/jsm/loaders/OBJLoader.js';最後に以下を追加．
export { ThreeStart10 } ;
export { ThreeStartF } ;html を type="module" と import …/c_3js_10.js に．
<script type="module">
import { ThreeStart10 } from "./c_3js_10.js" ;
実行すると幾つかのエラー．
Uncaught TypeError: THREE.OrbitControls is not a constructor
Set_orbit http://mish.work/i_Tools/Doc/blog/3D_Data/c_3js_10.js:137
ThreeStart10 http://mish.work/i_Tools/Doc/blog/3D_Data/c_3js_10.js:47
<anonymous> http://mish.work/i_Tools/Doc/blog/3D_Data/Cube_2021_08.htm:42
OrbitControls などクラスの利用部分が違う．THREE. の部分を削除．
表示されている QR コードは，以前 WebGL が動作しない環境の時の区別のためのもの．
これはうまく使えないみたいなので，その部分は削除．他に “use strict”; なども削除．
html の script の部分で type="module" が指定されていないと，
Uncaught SyntaxError: import declarations may only appear at top level of a module Cube_2021_08_E2.htm:19:3
WebGL three.js r111
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 へのアクセスが半分程度の比率になった？
google
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/