JavaScript module Three.js

投稿日 by Iwao

前回 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技術ブログへ



コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください