@@ -38,19 +38,19 @@ Three.js로 프로젝트를 진행할 때, 3D 모델 파일을 불러와 사용
3838하나, ` DirectionalLight ` 하나가 있는 셈입니다. 또 GUI 관련 코드와 정육면체,
3939구체 관련 코드도 지웁니다.
4040
41- 다음으로 먼저 ` OBJLoader2 ` 모듈을 스크립트에 로드합니다.
41+ 다음으로 먼저 ` OBJLoader ` 모듈을 스크립트에 로드합니다.
4242
4343``` js
44- import { OBJLoader2 } from ' ./resources/threejs/r122/examples/jsm/loaders/OBJLoader2 .js'
44+ import { OBJLoader } from ' ./resources/threejs/r122/examples/jsm/loaders/OBJLoader .js'
4545```
4646
47- ` OBJLoader2 ` 의 인스턴스를 생성한 뒤 .OBJ 파일의 경로와 콜백 함수를 넘겨
47+ ` OBJLoader ` 의 인스턴스를 생성한 뒤 .OBJ 파일의 경로와 콜백 함수를 넘겨
4848` load ` 메서드를 실행합니다. 그리고 콜백 함수에서 불러온 모델을 장면에
4949추가합니다.
5050
5151``` js
5252{
53- const objLoader = new OBJLoader2 ();
53+ const objLoader = new OBJLoader ();
5454 objLoader .load (' resources/models/windmill/windmill.obj' root ) => {
5555 scene .add (root);
5656 });
@@ -130,25 +130,26 @@ map_Ns windmill_001_base_SPEC.jpg
130130
131131이제 .MTL 파일에서 사용할 텍스처를 생성했으니 .MTL 파일을 불러오도록 합시다.
132132
133- ` MTLLoader ` 와 ` MTLObjBridge ` 모듈을 불러옵니다.
133+ ` MTLLoader ` 모듈을 불러옵니다.
134134
135135``` js
136136import * as THREE from ' ./resources/three/r122/build/three.module.js'
137137import { OrbitControls } from ' ./resources/threejs/r122/examples/jsm/controls/OrbitControls.js'
138- import { OBJLoader2 } from ' ./resources/threejs/r122/examples/jsm/loaders/OBJLoader2 .js'
138+ import { OBJLoader } from ' ./resources/threejs/r122/examples/jsm/loaders/OBJLoader .js'
139139+ import { MTLLoader } from ' ./resources/threejs/r122/examples/jsm/loaders/MTLLoader.js'
140- + import { MtlObjBridge } from ' ./resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js'
141140```
142141
143- 우선 .MTL 파일을 불러와 ` MtlObjBridge ` 로 재질을 만듭니다. 그리고 ` OBJLoader2 `
142+ {{{warning msgId="badTranslation"}}}
143+
144+ 우선 .MTL 파일을 불러와 ` MtlObjBridge ` 로 재질을 만듭니다. 그리고 ` OBJLoader `
144145인스턴스에 방금 만든 재질을 추가한 뒤 .OBJ 파일을 불러옵니다.
145146
146147``` js
147148{
148149+ const mtlLoader = new MTLLoader ();
149- + mtlLoader .load (' resources/models/windmill/windmill.mtl' mtlParseResult ) => {
150- + const materials = MtlObjBridge . addMaterialsFromMtlLoader (mtlParseResult );
151- + objLoader .addMaterials (materials );
150+ + mtlLoader .load (' resources/models/windmill/windmill.mtl' mtl ) => {
151+ + mtl . preload ( );
152+ + objLoader .setMaterials (mtl );
152153 objLoader .load (' resources/models/windmill/windmill.obj' root ) => {
153154 scene .add (root);
154155 });
@@ -171,9 +172,9 @@ import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoa
1711721 . 모든 재질을 불러온 뒤 반복문으로 처리한다.
172173
173174 const mtlLoader = new MTLLoader();
174- mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult ) => {
175- const materials = MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult );
176- for (const material of Object.values(materials)) {
175+ mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl ) => {
176+ mtl.preload( );
177+ for (const material of Object.values(mtl. materials)) {
177178 material.side = THREE.DoubleSide;
178179 }
179180 ...
@@ -188,18 +189,26 @@ import { OBJLoader2 } from './resources/threejs/r122/examples/jsm/loaders/OBJLoa
188189 양면 속성을 설정할 수도 있을 겁니다.
189190
190191 const mtlLoader = new MTLLoader();
191- mtlLoader.load('resources/models/windmill/windmill.mtl', (mtlParseResult ) => {
192- const materials = MtlObjBridge.addMaterialsFromMtlLoader(mtlParseResult );
193- materials.Material.side = THREE.DoubleSide;
192+ mtlLoader.load('resources/models/windmill/windmill.mtl', (mtl ) => {
193+ mtl.preload( );
194+ mtl. materials.Material.side = THREE.DoubleSide;
194195 ...
195196
1961973 . .MTL 파일의 한계에 굴복하고 직접 재질을 만든다.
197198
198- const materials = {
199- Material: new THREE.MeshPhongMaterial({...}),
200- windmill: new THREE.MeshPhongMaterial({...}),
201- };
202- objLoader.setMaterials(materials);
199+ objLoader.load('resources/models/windmill/windmill.obj', (root) => {
200+ const materials = {
201+ Material: new THREE.MeshPhongMaterial({...}),
202+ windmill: new THREE.MeshPhongMaterial({...}),
203+ };
204+ root.traverse(node => {
205+ const material = materials[node.material?.name];
206+ if (material) {
207+ node.material = material;
208+ }
209+ })
210+ scene.add(root);
211+ });
203212
204213뭘 선택하든 그건 여러분의 선택입니다. 1번이 가장 간단하고, 3번이 가장
205214확장성이 좋죠. 2번은 그 중간입니다. 지금은 2번 해결책을 사용하도록 하죠.
@@ -375,7 +384,7 @@ function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
375384
376385` ` `
377386{
378- const objLoader = new OBJLoader2 ();
387+ const objLoader = new OBJLoader ();
379388 objLoader .load (' resources/models/windmill_2/windmill.obj' root ) => {
380389 scene .add (root);
381390+ // 모든 요소를 포함하는 육면체를 계산합니다
@@ -524,15 +533,15 @@ illum 2
524533` ` `
525534
526535텍스처의 용량을 최적화했으니 이제 불러올 일만 남았습니다. 먼저 아까 했던 것처럼
527- 재질을 불러와 ` OBJLoader2 ` 에 지정합니다.
536+ 재질을 불러와 ` OBJLoader ` 에 지정합니다.
528537
529538` ` `
530539{
531540+ const mtlLoader = new MTLLoader ();
532- + mtlLoader .load (' resources/models/windmill_2/windmill-fixed.mtl' mtlParseResult ) => {
533- + const objLoader = new OBJLoader2 ();
534- + const materials = MtlObjBridge . addMaterialsFromMtlLoader (mtlParseResult );
535- + objLoader .addMaterials (materials );
541+ + mtlLoader .load (' resources/models/windmill_2/windmill-fixed.mtl' mtl ) => {
542+ + mtl . preload ();
543+ + const objLoader = new OBJLoader ( );
544+ + objLoader .setMaterials (mtl );
536545 objLoader .load (' resources/models/windmill/windmill.obj' root ) => {
537546 root .updateMatrixWorld ();
538547 scene .add (root);
0 commit comments