从Blender导出到Three.js并携带纹理

3
我如何从带有纹理的Blender中以JSON格式导出至Three.js?如果我勾选“纹理”复选框,我的JSON文件将无法在浏览器中加载。以下是勾选纹理复选框时我的材质外观: "materials": [{ "transparent": false, "DbgIndex": 0, "mapDiffuseRepeat": [1,1], "mapDiffuseAnisotropy": 1, "specularCoef": 50, "colorEmissive": [0,0,0], "colorDiffuse": [0.64,0.64,0.64], "wireframe": false, "visible": true, "blending": "NormalBlending", "DbgColor": 15658734, "mapDiffuse": "w.jpg", "DbgName": "Material.005", "opacity": 1, "depthWrite": true, "mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"], "depthTest": true, "shading": "phong", "colorSpecular": [0.5,0.5,0.5], "colorAmbient": [0.64,0.64,0.64] },... 如果我不勾选该复选框,则无法加载纹理但可以加载对象。这是我的材料。
"materials": [{
    "blending": "NormalBlending",
    "specularCoef": 50,
    "colorEmissive": [0,0,0],
    "DbgName": "Material.005",
    "colorDiffuse": [0.64,0.64,0.64],
    "DbgIndex": 0,
    "opacity": 1,
    "colorSpecular": [0.5,0.5,0.5],
    "shading": "phong",
    "wireframe": false,
    "colorAmbient": [0.64,0.64,0.64],
    "depthTest": true,
    "transparent": false,
    "visible": true,
    "depthWrite": true,
    "DbgColor": 15658734
},...

这是我的Json加载器。
    loader.load('oddo.js', function(geometry, materials) {
        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.x = x;
        mesh.scale.y = y;
        mesh.scale.z = z;
        mesh.opacity=1;
        var model = new THREE.Object3D();
        model.add(mesh);
        model.position.set(0,0,0);
        //mesh.translation = THREE.GeometryUtils.center(geometry);
        group.add(model);
    });

这里是来自Blender对象和导出器的图像

谢谢!

2个回答

2

致相关人员

对我来说,解决方案如下:

  1. 在blender中将您的对象从“对象模式”切换到“编辑模式”
  2. 按下“u”键
  3. 选择“智能UV投影”
  4. 按下确定
  5. 检查我的图像中的选项

0

我认为@Iraklis-Bekiaris建议您没有布置好UV。如果是这种情况,也许这个视频教程会有所帮助。https://www.youtube.com/watch?v=kDAxLvtpH0Y

不过,我认为您的纹理可能没有正确链接。w.jpg是您的漫反射贴图。您需要确保w.jpg的副本与您从中启动HTML页面的同一目录中。

检查页面上是否有任何错误的一种方法是检查您的控制台。在Chrome中加载您的HTML页面。如果您无法右键单击页面并“检查元素”(有时三个点会禁用右键单击),则应该能够从菜单栏中选择“视图”>“开发人员”>“Javascript控制台”。

希望这可以帮到您!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接