- 전체
- 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
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 4 |
AWS Certified Solutions Architect - Associate 2018 후기
| 졸리운_곰 | 2018.10.31 | 661 |
| 3 |
AWS 자격증 준비하기
| 졸리운_곰 | 2018.10.31 | 994 |
| 2 |
AWS 자격증 (아키텍트) 준비요령
| 졸리운_곰 | 2018.10.31 | 777 |
| 1 |
AWS Certified Solutions Architect – Associate Exam 시험 후기
| 졸리운_곰 | 2018.10.31 | 819 |




