fix three-load-obj.md to use OBJLoader because three.js is removing OBJLoader2

build/templates/warning.template

@@ -0,0 +1 @@
+<div class="warning">{{{msg}}}</div>

threejs/lessons/ja/threejs-load-gltf.md

@@ -66,10 +66,11 @@ OBJとは異なり、gLTFではマテリアルはフォーマットの直接的
 以前のOBJコードは
 
 ```js
-const objLoader = new OBJLoader2();
-objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materials) => {
-  materials.Material.side = THREE.DoubleSide;
-  objLoader.setMaterials(materials);
+const mtlLoader = new MTLLoader();
+mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
+  mtl.preload();
+  mtl.materials.Material.side = THREE.DoubleSide;
+  objLoader.setMaterials(mtl);
   objLoader.load('resources/models/windmill/windmill.obj', (event) => {
     const root = event.detail.loaderRootNode;
     scene.add(root);
@@ -93,11 +94,11 @@ objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materia
 
 自動フレーミングのコードは以前のままです。
 
-また `OBJLoader2` を取り除き `GLTFLoader` を含める必要があります。
+また `OBJLoader` を取り除き `GLTFLoader` を含める必要があります。
 
 ```html
 -import {LoaderSupport} from './resources/threejs/r122/examples/jsm/loaders/LoaderSupport.js';
--import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+-import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 -import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
 +import {GLTFLoader} from './resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
 ```

threejs/lessons/ja/threejs-load-obj.md

@@ -29,17 +29,17 @@ blendファイルをダウンロードし[Blender](https://blender.org)で読み
 [ライティングの記事](threejs-lights.html) にあるディレクショナルライティングの例から始めて、半球ライティングの例と組み合わせて `HemisphereLight` と `DirectionalLight` を1つ作る事にしました。その結果として `HemisphereLight` は1つ、`DirectionalLight` は1つになりました。
 また、ライトの調整に関連する全てのGUIを削除しました。シーンに追加していたキューブとスフィアも削除しました。
 
-まず最初に `OBJLoader2` のローダーをコードに含める必要があります。
+まず最初に `OBJLoader` のローダーをコードに含める必要があります。
 
 ```js
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 ```
 
-次にOBJファイルをロードするために `OBJLoader2` のインスタンスを作成し、OBJファイルのURLを渡し、ロードされたモデルをシーンに追加するコールバックを渡します。
+次にOBJファイルをロードするために `OBJLoader` のインスタンスを作成し、OBJファイルのURLを渡し、ロードされたモデルをシーンに追加するコールバックを渡します。
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill/windmill.obj', (root) => {
     scene.add(root);
   });
@@ -115,25 +115,24 @@ blenderで **File->External Data->Unpack All Into Files** を選択し、これ
 <div class="threejs_center"><img style="width: 757px;" src="resources/images/windmill-exported-files-with-textures.png"></div>
 
 テクスチャを利用できるようになったのでMTLファイルをロードします。
-`MTLLoader` と `MtlObjBridge` をimportする必要があります。
+`MTLLoader` をimportする必要があります。
 
 ```js
 import * as THREE from './resources/three/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 +import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-+import {MtlObjBridge} from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 ```
 
 まず、MTLファイルをロードします。
-読込後にロードしたマテリアルを `MtlObjBridge` を通して `OBJLoader2` をロードしOBJファイルをロードします。
+読込後にロードしたマテリアルを `OBJLoader`に設定して、`OBJLoader` でOBJファイルをロードします。
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
++    mtl.preload();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       scene.add(root);
     });
@@ -156,9 +155,9 @@ MTLファイルを簡単に修正する方法はありません。
 1. マテリアルの読込後、全てのマテリアルをループさせて両面を適用する
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          for (const material of Object.values(materials)) {
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload()
+          for (const material of Object.values(mtl.materials)) {
             material.side = THREE.DoubleSide;
           }
           ...
@@ -172,18 +171,26 @@ MTLファイルを簡単に修正する方法はありません。
   試行錯誤の結果、風車の羽根は `"Material"` というマテリアル名を使う事が分かりました。
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          materials.Material.side = THREE.DoubleSide;
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.perload();
+          mtl.materials.Material.side = THREE.DoubleSide;
           ...
 
 3. MTLファイルには制限がある事に気付き、MTLファイルを使わず自前でマテリアルを作成する
 
-        const materials = {
-          Material: new THREE.MeshPhongMaterial({...}),
-          windmill: new THREE.MeshPhongMaterial({...}),
-        };
-        objLoader.setMaterials(materials);
+        objLoader.load('resources/models/windmill/windmill.obj', (root) => {
+          const materials = {
+            Material: new THREE.MeshPhongMaterial({...}),
+            windmill: new THREE.MeshPhongMaterial({...}),
+          };
+          root.traverse(node => {
+            const material = materials[node.material?.name];
+            if (material) {
+              node.material = material;
+            }
+          })
+          scene.add(root);
+        });
 
 どれを選ぶかはあなた次第です。
 1が1番簡単です。3が最も柔軟です。2はその中間で今回は2を選びます。
@@ -354,7 +361,7 @@ function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
     scene.add(root);
 +    // compute the box that contains all the stuff
@@ -511,15 +518,15 @@ illum 2
 ```
 
 MTLファイルが適度なサイズのテクスチャを指しているので、それをロードする必要があります。
-上記で行ったようにまずマテリアルをロードしてから `OBJLoader2` に設定します。
+上記で行ったようにまずマテリアルをロードしてから `OBJLoader` に設定します。
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtlParseResult) => {
-+    const objLoader = new OBJLoader2();
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtl) => {
++    const objLoader = new OBJLoader();
++    mtl.preload();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       root.updateMatrixWorld();
       scene.add(root);

threejs/lessons/kr/threejs-load-gltf.md

@@ -71,10 +71,11 @@ glTF는 특정 목적으로 고안되었기에 대부분의 경우 glTF 파일
 아래의 기존 코드를
 
 ```js
-const objLoader = new OBJLoader2();
-objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materials) => {
-  materials.Material.side = THREE.DoubleSide;
-  objLoader.setMaterials(materials);
+const mtlLoader = new MTLLoader();
+mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
+  mtl.preload();
+  mtl.materials.Material.side = THREE.DoubleSide;
+  objLoader.setMaterials(mtl);
   objLoader.load('resources/models/windmill/windmill.obj', (event) => {
     const root = event.detail.loaderRootNode;
     scene.add(root);
@@ -98,12 +99,12 @@ objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materia
 
 자동으로 카메라의 시야를 조정하는 코드는 그대로 두었습니다.
 
-모듈이 바뀌었으니 import 문도 변경해야 합니다. `OBJLoader2`를 제거하고 `GLTFLoader`를
+모듈이 바뀌었으니 import 문도 변경해야 합니다. `OBJLoader`를 제거하고 `GLTFLoader`를
 추가합니다.
 
 ```html
 -import { LoaderSupport } from './resources/threejs/r122/examples/jsm/loaders/LoaderSupport.js';
--import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+-import { OBJLoader } from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 -import { MTLLoader } from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
 +import { GLTFLoader } from './resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
 ```

threejs/lessons/kr/threejs-load-obj.md

@@ -38,19 +38,19 @@ Three.js로 프로젝트를 진행할 때, 3D 모델 파일을 불러와 사용
 하나, `DirectionalLight` 하나가 있는 셈입니다. 또 GUI 관련 코드와 정육면체,
 구체 관련 코드도 지웁니다.
 
-다음으로 먼저 `OBJLoader2` 모듈을 스크립트에 로드합니다.
+다음으로 먼저 `OBJLoader` 모듈을 스크립트에 로드합니다.
 
 ```js
-import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import { OBJLoader } from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 ```
 
-`OBJLoader2`의 인스턴스를 생성한 뒤 .OBJ 파일의 경로와 콜백 함수를 넘겨
+`OBJLoader`의 인스턴스를 생성한 뒤 .OBJ 파일의 경로와 콜백 함수를 넘겨
 `load` 메서드를 실행합니다. 그리고 콜백 함수에서 불러온 모델을 장면에
 추가합니다.
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill/windmill.obj', (root) => {
     scene.add(root);
   });
@@ -130,25 +130,26 @@ map_Ns windmill_001_base_SPEC.jpg
 
 이제 .MTL 파일에서 사용할 텍스처를 생성했으니 .MTL 파일을 불러오도록 합시다.
 
-`MTLLoader`와 `MTLObjBridge` 모듈을 불러옵니다.
+`MTLLoader` 모듈을 불러옵니다.
 
 ```js
 import * as THREE from './resources/three/r122/build/three.module.js';
 import { OrbitControls } from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import { OBJLoader } from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 +import { MTLLoader } from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-+import { MtlObjBridge } from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 ```
 
-우선 .MTL 파일을 불러와 `MtlObjBridge`로 재질을 만듭니다. 그리고 `OBJLoader2`
+{{{warning msgId="badTranslation"}}}
+
+우선 .MTL 파일을 불러와 `MtlObjBridge`로 재질을 만듭니다. 그리고 `OBJLoader`
 인스턴스에 방금 만든 재질을 추가한 뒤 .OBJ 파일을 불러옵니다.
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
++    mtl.preload();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       scene.add(root);
     });
@@ -171,9 +172,9 @@ import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoa
 1. 모든 재질을 불러온 뒤 반복문으로 처리한다.
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          for (const material of Object.values(materials)) {
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload();
+          for (const material of Object.values(mtl.materials)) {
             material.side = THREE.DoubleSide;
           }
           ...
@@ -188,18 +189,26 @@ import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoa
   양면 속성을 설정할 수도 있을 겁니다.
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          materials.Material.side = THREE.DoubleSide;
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload();
+          mtl.materials.Material.side = THREE.DoubleSide;
           ...
 
 3. .MTL 파일의 한계에 굴복하고 직접 재질을 만든다.
 
-        const materials = {
-          Material: new THREE.MeshPhongMaterial({...}),
-          windmill: new THREE.MeshPhongMaterial({...}),
-        };
-        objLoader.setMaterials(materials);
+        objLoader.load('resources/models/windmill/windmill.obj', (root) => {
+          const materials = {
+            Material: new THREE.MeshPhongMaterial({...}),
+            windmill: new THREE.MeshPhongMaterial({...}),
+          };
+          root.traverse(node => {
+            const material = materials[node.material?.name];
+            if (material) {
+              node.material = material;
+            }
+          })
+          scene.add(root);
+        });
 
 뭘 선택하든 그건 여러분의 선택입니다. 1번이 가장 간단하고, 3번이 가장
 확장성이 좋죠. 2번은 그 중간입니다. 지금은 2번 해결책을 사용하도록 하죠.
@@ -375,7 +384,7 @@ function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
     scene.add(root);
 +    // 모든 요소를 포함하는 육면체를 계산합니다
@@ -524,15 +533,15 @@ illum 2
 ```
 
 텍스처의 용량을 최적화했으니 이제 불러올 일만 남았습니다. 먼저 아까 했던 것처럼
-재질을 불러와 `OBJLoader2`에 지정합니다.
+재질을 불러와 `OBJLoader`에 지정합니다.
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtlParseResult) => {
-+    const objLoader = new OBJLoader2();
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtl) => {
++    mtl.preload();
++    const objLoader = new OBJLoader();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       root.updateMatrixWorld();
       scene.add(root);

threejs/lessons/langinfo.hanson

@@ -24,6 +24,10 @@
      [Here's the original English article for now]({{{origLink}}}).
   `,
   contribTemplate: 'Thank you <a href="${html_url}"><img src="${avatar_url}"> ${login}</a><br>for <a href="https://github.com/${owner}/${repo}/commits?author=${login}">${contributions} contributions</a>',
+  translations: {
+    badTranslation: 'Sorry, the translation of this area is out of date. <a href="{{packageJSON.homepage}}/blob/master/{{contentFileName}}">Please consider helping to fix it</a>.',
+    updateNeeded: 'The translation of this article is out of date.  <a href="{{packageJSON.homepage}}/blob/master/{{contentFileName}}">Please consider helping to fix it</a>.',
+  },
   toc: 'Table of Contents',
   categoryMapping: {
     'basics': 'Basics',

threejs/lessons/resources/lesson.css

@@ -18,6 +18,11 @@ table {
     margin-bottom: 1em;
 }
 
+.warning {
+  padding: 1em;
+  background: red;
+}
+
 .footnote {
   font-size: smaller;
   vertical-align: baseline;
@@ -545,6 +550,9 @@ pre.prettyprint.lighttheme .fun { color: #900; }  /* function name */
   a {
     color: #56d3fd;
   }
+  .warning {
+    background: darkred;
+  }
   pre.prettyprint, code.prettyprint, .dos {
     box-shadow: 10px 10px 0px #292929;
   }

threejs/lessons/threejs-load-gltf.md

@@ -72,10 +72,11 @@ for loading .OBJ and replaced it with code for loading .GLTF
 The old .OBJ code was
 
 ```js
-const objLoader = new OBJLoader2();
-objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materials) => {
-  materials.Material.side = THREE.DoubleSide;
-  objLoader.setMaterials(materials);
+const mtlLoader = new MTLLoader();
+mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
+  mtl.preload();
+  mtl.materials.Material.side = THREE.DoubleSide;
+  objLoader.setMaterials(mtl);
   objLoader.load('resources/models/windmill/windmill.obj', (event) => {
     const root = event.detail.loaderRootNode;
     scene.add(root);
@@ -99,11 +100,11 @@ The new .GLTF code is
 
 I kept the auto framing code as before
 
-We also need to include the `GLTFLoader` and we can get rid of the `OBJLoader2`.
+We also need to include the `GLTFLoader` and we can get rid of the `OBJLoader`.
 
 ```html
 -import {LoaderSupport} from './resources/threejs/r122/examples/jsm/loaders/LoaderSupport.js';
--import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+-import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 -import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
 +import {GLTFLoader} from './resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
 ```

threejs/lessons/threejs-load-obj.md

@@ -43,19 +43,19 @@ the hemispherical lighting example so I ended up with one
 related to adjusting the lights. I also removed the cube and sphere
 that were being added to the scene.
 
-From that the first thing we need to do is include the `OBJLoader2` loader in our script.
+From that the first thing we need to do is include the `OBJLoader` loader in our script.
 
 ```js
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 ```
 
-Then to load the .OBJ file we create an instance of `OBJLoader2`,
+Then to load the .OBJ file we create an instance of `OBJLoader`,
 pass it the URL of our .OBJ file, and pass in a callback that adds
 the loaded model to our scene.
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill/windmill.obj', (root) => {
     scene.add(root);
   });
@@ -140,26 +140,25 @@ file to.
 
 Now that we have the textures available we can load the .MTL file.
 
-First we need to include the `MTLLoader` and the `MtlObjBridge`;
+First we need to include the `MTLLoader`;
 
 ```js
 import * as THREE from './resources/three/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 +import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-+import {MtlObjBridge} from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 ```
 
 Then we first load the .MTL file. When it's finished loading we add
-the just loaded materials on to the `OBJLoader2` itself via the `MtlObjBridge`
+the just loaded materials on to the `OBJLoader` itself via the `setMaterials`
 and then load the .OBJ file.
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
++    mtl.preload();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       scene.add(root);
     });
@@ -184,9 +183,9 @@ head I can think of 3 ways to fix this.
 1. Loop over all the materials after loading them and set them all to double sided.
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          for (const material of Object.values(materials)) {
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload();
+          for (const material of Object.values(mtl.materials)) {
             material.side = THREE.DoubleSide;
           }
           ...
@@ -203,19 +202,30 @@ head I can think of 3 ways to fix this.
    that one specifically 
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          materials.Material.side = THREE.DoubleSide;
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload();
+          mtl.materials.Material.side = THREE.DoubleSide;
           ...
 
 3. Realizing that the .MTL file is limited we could just not use it
-   and instead create materials ourselves 
-
-        const materials = {
-          Material: new THREE.MeshPhongMaterial({...}),
-          windmill: new THREE.MeshPhongMaterial({...}),
-        };
-        objLoader.setMaterials(materials);
+   and instead create materials ourselves.
+
+   In this case we'd need to look up the `Mesh` object after
+   loading the obj file.
+
+        objLoader.load('resources/models/windmill/windmill.obj', (root) => {
+          const materials = {
+            Material: new THREE.MeshPhongMaterial({...}),
+            windmill: new THREE.MeshPhongMaterial({...}),
+          };
+          root.traverse(node => {
+            const material = materials[node.material?.name];
+            if (material) {
+              node.material = material;
+            }
+          })
+          scene.add(root);
+        });
 
 Which one you pick is up to you. 1 is easiest. 3 is most flexible.
 2 somewhere in between. For now I'll pick 2.
@@ -391,7 +401,7 @@ larger size.
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
     scene.add(root);
 +    // compute the box that contains all the stuff
@@ -550,15 +560,15 @@ illum 2
 ```
 
 Now that the .MTL file points to some reasonable size textures we need to load it so we'll just do like we did above, first load the materials
-and then set them on the `OBJLoader2`
+and then set them on the `OBJLoader`
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtlParseResult) => {
-+    const objLoader = new OBJLoader2();
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtl) => {
++    mtl.preload();
++    const objLoader = new OBJLoader();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       root.updateMatrixWorld();
       scene.add(root);
@@ -675,5 +685,5 @@ This is one of the main reasons why .OBJ is not really a good format. If I was t
 is because it's simple and doesn't support many features it works more often than not. Especially if you're making something still like
 an architectural image and there's no need to animate anything it's not a bad way to get static props into a scene.
 
-Next up we'll try loading a gLTF scene. The gLTF format supports many more features.
+Next up we'll try [loading a gLTF scene](threejs-load-gltf.html). The gLTF format supports many more features.
 

threejs/lessons/zh_cn/threejs-load-obj.md

@@ -25,17 +25,17 @@ TOC: 加载 .OBJ 文件
 
 基于[光线文章](threejs-lights.html)中的定向光线（`DirectionalLight`）示例，结合半球光线（`HemisphereLight`）示例。相对于示例，我删除了所有与调整灯光相关的GUI内容，还删除了添加到场景中的立方体和球体。
 
-第一件要做的事就是将`OBJLoader2`添加到代码中。
+第一件要做的事就是将`OBJLoader`添加到代码中。
 
 ```js
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 ```
 
-然后创建`OBJLoader2`的实例并通过URL加载我们的.OBJ文件，并在回调函数中将已加载完的模型添加到场景（scene）里。
+然后创建`OBJLoader`的实例并通过URL加载我们的.OBJ文件，并在回调函数中将已加载完的模型添加到场景（scene）里。
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill/windmill.obj', (root) => {
     scene.add(root);
   });
@@ -106,24 +106,25 @@ map_Ns windmill_001_base_SPEC.jpg
 
 现在.MTL文件就能加载到这些纹理。
 
-首先要引用 `MTLLoader` 和 `MtlObjBridge`;
+首先要引用 `MTLLoader`;
 
 ```js
 import * as THREE from './resources/three/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 +import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-+import {MtlObjBridge} from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 ```
 
-然后我们先加载.MTL文件，在它加载完材质后利用`MtlObjBridge`将材质传给`OBJLoader2`，再加载.OBJ文件。
+{{{warning msgId="badTranslation"}}}
+
+然后我们先加载.MTL文件，在它加载完材质后利用`MtlObjBridge`将材质传给`OBJLoader`，再加载.OBJ文件。
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
++    mtl.preload();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       scene.add(root);
     });
@@ -145,9 +146,9 @@ import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoade
 1. 加载模型后，遍历所有材质，设置成双面。
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          for (const material of Object.values(materials)) {
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload();
+          for (const material of Object.values(mtl.materials)) {
             material.side = THREE.DoubleSide;
           }
           ...
@@ -159,18 +160,26 @@ import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoade
    看到.MTL里有两个材质，一个是`"windmill"`另一个是`"Material"`。经过反复尝试，发现可以单独设置一个材质。
 
         const mtlLoader = new MTLLoader();
-        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-          const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-          materials.Material.side = THREE.DoubleSide;
+        mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+          mtl.preload();
+          mtl.materials.Material.side = THREE.DoubleSide;
           ...
 
 3. 在.MTL文件上无法解决，可以不使用它而使用自行创建的材质。
 
-        const materials = {
-          Material: new THREE.MeshPhongMaterial({...}),
-          windmill: new THREE.MeshPhongMaterial({...}),
-        };
-        objLoader.setMaterials(materials);
+        objLoader.load('resources/models/windmill/windmill.obj', (root) => {
+          const materials = {
+            Material: new THREE.MeshPhongMaterial({...}),
+            windmill: new THREE.MeshPhongMaterial({...}),
+          };
+          root.traverse(node => {
+            const material = materials[node.material?.name];
+            if (material) {
+              node.material = material;
+            }
+          })
+          scene.add(root);
+        });
 
 采用哪个方案取决于你。1是最简单，3是最灵活，2是两者之间，现在我选择2 。
 
@@ -315,7 +324,7 @@ function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
 
 ```js
 {
-  const objLoader = new OBJLoader2();
+  const objLoader = new OBJLoader();
   objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
     scene.add(root);
 +    // compute the box that contains all the stuff
@@ -445,15 +454,15 @@ illum 2
 +bump windmill_normal.jpg 
 ```
 
-现在。mtl文件指向一些合理大小的纹理，我们需要加载它，所以我们就像上面做的那样，首先加载材质，然后将它们设置在`OBJLoader2`上。
+现在。mtl文件指向一些合理大小的纹理，我们需要加载它，所以我们就像上面做的那样，首先加载材质，然后将它们设置在`OBJLoader`上。
 
 ```js
 {
 +  const mtlLoader = new MTLLoader();
-+  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtlParseResult) => {
-+    const objLoader = new OBJLoader2();
-+    const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-+    objLoader.addMaterials(materials);
++  mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtl) => {
++    mtl.preload();
++    const objLoader = new OBJLoader();
++    objLoader.setMaterials(mtl);
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       root.updateMatrixWorld();
       scene.add(root);

threejs/threejs-load-obj-auto-camera-xz.html

@@ -23,7 +23,7 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -108,7 +108,7 @@ function main() {
   }
 
   {
-    const objLoader = new OBJLoader2();
+    const objLoader = new OBJLoader();
     objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
       root.updateMatrixWorld();
       scene.add(root);

threejs/threejs-load-obj-auto-camera.html

@@ -23,7 +23,7 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -105,7 +105,7 @@ function main() {
   }
 
   {
-    const objLoader = new OBJLoader2();
+    const objLoader = new OBJLoader();
     objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
       scene.add(root);
       // compute the box that contains all the stuff

threejs/threejs-load-obj-materials-fixed.html

@@ -23,9 +23,8 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-import {MtlObjBridge} from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -85,11 +84,11 @@ function main() {
 
   {
     const mtlLoader = new MTLLoader();
-    mtlLoader.load('resources/models/windmill/windmill-fixed.mtl', (mtlParseResult) => {
-      const objLoader = new OBJLoader2();
-      const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-      materials.Material.side = THREE.DoubleSide;
-      objLoader.addMaterials(materials);
+    mtlLoader.load('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
+      mtl.preload();
+      const objLoader = new OBJLoader();
+      mtl.materials.Material.side = THREE.DoubleSide;
+      objLoader.setMaterials(mtl);
       objLoader.load('resources/models/windmill/windmill.obj', (root) => {
         scene.add(root);
       });

threejs/threejs-load-obj-materials-windmill2.html

@@ -23,9 +23,8 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-import {MtlObjBridge} from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -111,10 +110,10 @@ function main() {
 
   {
     const mtlLoader = new MTLLoader();
-    mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtlParseResult) => {
-      const objLoader = new OBJLoader2();
-      const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-      objLoader.addMaterials(materials);
+    mtlLoader.load('resources/models/windmill_2/windmill-fixed.mtl', (mtl) => {
+      mtl.preload();
+      const objLoader = new OBJLoader();
+      objLoader.setMaterials(mtl);
       objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
         scene.add(root);
 

threejs/threejs-load-obj-materials.html

@@ -23,9 +23,8 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 import {MTLLoader} from './resources/threejs/r122/examples/jsm/loaders/MTLLoader.js';
-import {MtlObjBridge} from './resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -85,10 +84,10 @@ function main() {
 
   {
     const mtlLoader = new MTLLoader();
-    mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult) => {
-      const objLoader = new OBJLoader2();
-      const materials =  MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult);
-      objLoader.addMaterials(materials);
+    mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl) => {
+      mtl.preload();
+      const objLoader = new OBJLoader();
+      objLoader.setMaterials(mtl);
       objLoader.load('resources/models/windmill/windmill.obj', (root) => {
         scene.add(root);
       });

threejs/threejs-load-obj-no-materials.html

@@ -23,7 +23,7 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -83,7 +83,7 @@ function main() {
   }
 
   {
-    const objLoader = new OBJLoader2();
+    const objLoader = new OBJLoader();
     objLoader.load('resources/models/windmill/windmill.obj', (root) => {
       scene.add(root);
     });

threejs/threejs-load-obj-wat.html

@@ -23,7 +23,7 @@
 <script type="module">
 import * as THREE from './resources/threejs/r122/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader} from './resources/threejs/r122/examples/jsm/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -83,7 +83,7 @@ function main() {
   }
 
   {
-    const objLoader = new OBJLoader2();
+    const objLoader = new OBJLoader();
     objLoader.load('resources/models/windmill_2/windmill.obj', (root) => {
       scene.add(root);
     });