Iwao Dev

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

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

WebGL

JavaScript module Three.js

投稿日 2021/08/05 15:19 by Iwao Comment

前回 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 人がこの 投稿 は役に立ったと言っています。

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


WebGL three.js r111

投稿日 2019/12/05 21:48 by Iwao Comment

WebGL three.js の r111
その中に 3MF テクスチャ があった．
three.js r111 3mf テクスチャ
3mf を自前のファイルに差替えて試したがうまく表示できなかった．

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

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


WebGL three.js OBJLoader ‘l’

投稿日 2019/10/30 18:15 by Iwao Comment

以前 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 人がこの 投稿 は役に立ったと言っています。

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


WebGL three.js r91 – r109

投稿日 2019/10/16 18:41 by Iwao Comment

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 人がこの 投稿 は役に立ったと言っています。

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


three.js で表示できない

投稿日 2018/10/16 22:42 by Iwao Comment

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

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

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

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

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


https 対応

投稿日 2018/06/26 11:41 by Iwao Comment

サーバが対応していれば，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 人がこの 投稿 は役に立ったと言っています。

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


Cardboard と WebGL

投稿日 2018/04/02 23:24 by Iwao Comment

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

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

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

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

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

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


iframe を右下に

投稿日 2017/07/06 17:11 by Iwao Comment

左上を指定して下や右をフィットさせるのが意外と面倒だったので…

<!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 人がこの 投稿 は役に立ったと言っています。

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


moto g5

投稿日 2017/06/08 21:17 by Iwao Comment

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

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

moto g5

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

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


threejs requestAnimationFrame

投稿日 2017/02/28 22:28 by Iwao Comment

使い方が間違ってた？

　　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 人がこの 投稿 は役に立ったと言っています。

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



    top

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