IwaoDev

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

WebGL

WebGL Three.js r144

投稿日 by Iwao

久しぶりに Three.js を更新しようかと…
いつものデータを r144 に書き換えて…

r131 と比べると,オブジェクトが暗い.


サンプルのデータを見ると mtl が変更されている.


ライブラリの変更履歴 を見ると 136 → 137 で変更されている.
r136 までにして,この辺りが更新された時に見直すこととするか?

three.js   r144 と r131

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


Edge で WebGL が表示できない?

Edge で three.js を利用したデータが表示できなかった.
WebGL Cube
デバッガで追いかけると,WebGL を利用できない様なエラー.


Edge を再起動すると,うまく表示できるようになった.
何だったのだろう?


この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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 をコピーして,その行をコメントに.
script src=".../canvas_.js"
それを import を使用した方法に.
main.js を直接 body 内に記述したもの.
script type="module"


*.js をどちらの場合も同じものとしたいが,方法は?


2021/06/06
Three.js で,同じ OBJLoader.js を使っているのかと思ったが,違った.
example/js/OBJLoader.js と example/jsm/OBJLoader.js が存在している.


ある程度 module を使うための変更内容がわかったので,既存のデータを変更してみた.
データはいつもの.http://mish.work/i_Tools/Doc/blog/3D_Data/Cube_2021_07.htm
r109 を利用している.それを r131 に変更.
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" ;

type module , import
実行すると幾つかのエラー.

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

Uncaught TypeError: THREE.OrbitControls is not a constructor
OrbitControls などクラスの利用部分が違う.THREE. の部分を削除.
THREE. 部分を削除
module を使用した方法に変更
表示されている QR コードは,以前 WebGL が動作しない環境の時の区別のためのもの.
これはうまく使えないみたいなので,その部分は削除.他に “use strict”; なども削除.
module を使用


html の script の部分で type="module" が指定されていないと,

Uncaught SyntaxError: import declarations may only appear at top level of a module Cube_2021_08_E2.htm:19:3

type="module" が指定されていない時のエラー

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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/
three.js OBJ 内の Line element

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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) ;

WebGL three.js r109 への対応

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


three.js で表示できない

ipl を WebGL で表示できる形式に変換しても,表示できないデータができてしまった.

本当は次の様に表示されなければならない.


vt と vn がない時にうまくない.
f 1// 2// 3// の様になってしまっていて,これをうまく処理してくれない.

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


Cardboard と WebGL

Cardboard で撮った画像を,WebGL の背景として利用してみた.

もう少しうまく貼れればと思うが,方法がわからない.
球に貼っているため縦方向に引き伸ばされてしまう.


以下,画像は 横:縦 = 2:1 に編集している.
このすぐ下は,SceneJS を使用したもの.


2018/04/27 画像をアップロードできるページ
360度パノラマ画像の表示

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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/

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


moto g5

MR03LN も 2 年になったのと,107SH の調子が…
内蔵メモリが足りなくて,AP の更新ができなかったり,SMS が受信できないなど.
それと丁度のタイミングで,3GB でもシェア SIM が利用できる様になったので,Moto G5 追加.


107SH だったこともあるが,やはり大きい.
今は当たり前なのかもしれないが,指紋認証センサの使い勝手が良い.
WebGL(three.js)のデータの表示が,思ったより遅い.
私の使い方では,バッテリーは 24 時間持つ.

moto g5

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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 リソースが食われる.


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

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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 は,テクスチャサポートなし?

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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 .

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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: … で指定する?

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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 サイトの構築

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


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 で表示可能です.

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。


three.js

three.js の動作環境の作成のメモ
three.js の左の github から.
Usage の Download the minified library and …. の minified library を右クリックするなどしてダウンロード.
C:\Users\Public\Documents\WebGL\Three_js\three.min.js として保存.
This code creates a scene, …… in the document.body element. の下のスクリプトを Test3js.htm などとして保存.
その html の前の方と後ろの方を編集.
<!DOCTYPE html>
<html lang=”ja”>
<head><meta charset=”UTF-8″></head>
<body>
<script src=”three.min.js”> </script>
<script>
var camera, scene, renderer;

function init() {

renderer.render( scene, camera );
}

</script>
</body>
</html>


107SH で,192.168.x.x/Test/…/Test3js.htm にアクセスすると,

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。



top