- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Three.js Loading .mtl and .obj - object stays white
I want to load an object with different textures on different places - so I looked at the examples provided by three.js at https://threejs.org/examples/webgl_loader_obj_mtl.html. The object is getting loaded but it has no different textures on it.
This is the code I typed:
// LOAD TREE Example
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath("Assets/Objects/Tree_V9_OBJ/");
mtlLoader.load("Tree_V9_Final.mtl", function(materials){
materials.preload();
console.log(materials);
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('Assets/Objects/Tree_V9_OBJ/');
objLoader.load('Tree_V9_Final.obj', function(object){
console.log(object);
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
scene.add(object);
});
});
My folder structure:
The result:
The console output
The Source of the object:
http://tf3dm.com/3d-model/tree-for-modification-v9-16618.html
I'm new to three.js so I don't know where I have to search for the bug.
There is no error thrown in the console.
How can I fix this so the object is getting loaded correctly with the textures?
Your code is correct. The model is broken (textures are not referenced in the .mtl = material file.)
Just add the texture paths into Tree_V9_Final.mtl :
# Blender MTL File: 'Tree_V9_Final.blend'
# Material Count: 4
newmtl bark_tree
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd bark_tree.jpg
newmtl leaves_01
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd leaves_01.jpg
newmtl leaves_02
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd leaves_02.jpg
newmtl leaves_03
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.000000
illum 2
map_Kd leaves_03.jpg
Note
Your model also provide normal maps and alpha maps for the leaves. I suggest you read the .mtl specification so you can add those inside the .mtl file.
[출처]
https://stackoverflow.com/questions/42470030/three-js-loading-mtl-and-obj-object-stays-white
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 8 | 제로보드 XE의 최근 게시글 5개를 DB에서 직접 조회 | 졸리운_곰 | 2020.08.04 | 456 |
| 7 | python 으로 XE mysql 쿼리로 자동 게시물 등록하기 | 졸리운_곰 | 2020.03.03 | 448 |
| 6 | [WP]외부 게시판을 IFRAME으로 넣기 | 졸리운_곰 | 2019.01.30 | 533 |
| 5 | XE(제로보드) 게시판 내 스크립트 사용하기 | 가을의곰 | 2017.06.18 | 734 |
| 4 | XE 새 템플릿 문법으로 원하는 위치(head, body)에 JS 선언하기. | 가을의곰 | 2017.06.18 | 308 |
| 3 | 예제를 통해 쉽게 읽어보는 XE모듈개발 시작하기 | 졸리운_곰 | 2016.05.10 | 585 |
| 2 | [시니시즘] 비회원에게 파일 다운로드 권한이 없다고 뜰 때 | 졸리운_곰 | 2016.04.14 | 766 |
| 1 | XE 템플릿 구문 | 졸리운_곰 | 2015.05.12 | 1135 |




