THREE.js 导入的模型不应用面部纹理 [英] THREE.js Imported model doesn't apply face textures

问题描述

我正在尝试使用 THREEJS 导出器导入从 Blender 导出的模型.到目前为止，模型加载并出现在我的场景中，并且正确应用了材质(汽车应该是黄色的，玻璃是透明的.)

但它并没有将我的纹理应用于以 .tga 形式保存的汽车.

如果我不在模型所在的服务器目录中包含纹理，我将收到此错误:

http://novsstudio.com/race/model//wheel.tga 404(未找到)

注意它在模型后面有两个/.我不确定这是不是我的问题，也不知道如何解决.

但是，当我将纹理上传到/race/model/时，所有纹理都已下载，如 Chrome 的网络"选项卡中所示，但并未应用于模型.我相信可能 Threejs 找不到它们，因为它在/race/model//中寻找它们?

这是我导入模型的代码:

var jsonLoader = new THREE.JSONLoader();jsonLoader.load( "model/car.js", addModelToScene );//模型加载完成后回调 addModelToScene 函数varambientLight = new THREE.AmbientLight(0xFFFFFF);场景.添加(环境光)；环境光.position.set(0, 500, 200);函数 addModelToScene(几何，材料){var material = new THREE.MeshFaceMaterial(材料);android = new THREE.Mesh(几何体，材料);android.scale.set(10,10,10);场景添加(安卓)；}

要查看实际示例，请访问 http://novsstudio.com/race您也可以在那里查看源代码以获取完整源代码，您还可以浏览我的目录以查看我在 http://novsstudio.com/race/model

感谢您的帮助，如果您需要更多信息，请告诉我.

提示:您可以在我的网站上通过单击并按住/拖动以查看整个模型来移动相机.

解决方案

请参阅位于 examples/js/loaders 目录中的 TGALoader.

示例:http://threejs.org/examples/webgl_materials_texture_tga.html.>

或者，您可以将 TGA 文件转换为 PNG 并相应地修改 JSON 文件.

更新为three.js r.68

I'm trying to import a model that was exported from blender using the THREEJS exporter. So far the model loads and appears in my scene with the materials being applied correctly (Car is yellow as it's supposed to be and the glass is transparent as it's supposed to be.)

But it's not applying my textures to the car which are saved in .tga form.

If I DO NOT include the textures in my server directory where the model is i will get this error:

http://novsstudio.com/race/model//wheel.tga 404 (Not Found) 

Notice it has two /'s after model. I'm not sure if this is my problem, and I don't know how to fix it.

But when I upload my textures to /race/model/ all the textures are DOWNLOADED as seen in the Network tab in Chrome but are not applied to the model. I believe maybe threejs cant find them because it's looking for them in /race/model//?

Here's my code to import the model:

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "model/car.js", addModelToScene );
// addModelToScene function is called back after model has loaded

var ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
ambientLight.position.set(0, 500, 200);



function addModelToScene( geometry, materials ) 
{
    var material = new THREE.MeshFaceMaterial( materials );
    android = new THREE.Mesh( geometry, material );
    android.scale.set(10,10,10);
    scene.add( android );
}

To see a live example of what it looks like now go to http://novsstudio.com/race You can also view the source there too to get the full source and you can also browse my directories to see where i have all my files at http://novsstudio.com/race/model

Thank for the help let me know if you need more information.

Tip: You can move the camera at my website by clicking and holding/dragging to see the whole model.

解决方案

See the TGALoader located in the examples/js/loaders directory.

Example: http://threejs.org/examples/webgl_materials_texture_tga.html.

Alternatively, you can convert you TGA files to PNGs and modify the JSON file accordingly.

EDIT: Updated to three.js r.68

这篇关于THREE.js 导入的模型不应用面部纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！