THREE.js 的 Blender 导出

Question

我在 Blender 中导出 THREE.js 时遇到问题，即：materials 和纹理根本不会导出。

为了说明这个问题，我创建了一个简单的平面，其中包含一个 material 和一个纹理。

这是由 JSON 导出生成的整个文件：

{
"faces":[41,0,1,3,2,0,1,2,3,0,0,0,0],
"metadata":{
    "faces":1,
    "type":"Geometry",
    "uvs":1,
    "generator":"io_three",
    "normals":1,
    "version":3,
    "vertices":4
},
"uvs":[[0.0001,0.0001,0.9999,0.0001,0.9999,0.9999,0.0001,0.9999]],
"normals":[1,0,0],
"name":"PlaneGeometry",
"vertices":[-0,3e-06,16,1e-06,-4e-06,-16,-1e-06,32,16,0,32,-16]
}

相比之下，这个用于 OBJ/MTL Wavefront 格式导出（确认确实有一个 material 和模型的纹理集）

# Blender v2.76 (sub 0) OBJ File: 'wall_pipes.blend'
# www.blender.org
mtllib wall_pipes.mtl
o Plane
v -0.000000 0.000003 16.000002
v 0.000001 -0.000002 -15.999997
v -0.000001 32.000000 15.999997
v 0.000000 31.999996 -16.000002
vt 0.000100 0.000100
vt 0.999900 0.000100
vt 0.999900 0.999900
vt 0.000100 0.999900
vn 1.000000 0.000000 0.000000
usemtl Material.001
s off
f 1/1/1 2/2/1 4/3/1 3/4/1

...及其对应的mtl文件...

# Blender MTL File: 'wall_pipes.blend'
# Material Count: 1

newmtl Material.001
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.021739 0.021739 0.021739
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2
map_Kd E:\blender\models\library\textures\pk02_pipes01_C.png
map_Bump E:\blender\models\library\textures\pk02_pipes01_C.png

我正在考虑使用这些生成的 obj/mtl 文件，但是 THREE.js r73（我更喜欢它的影子格式而不是新格式）似乎有一些问题：

[.CommandBufferContext]RENDER WARNING: Render count or primcount is 0.

无论如何，我想使用 JSON 格式，因为它对我来说更自然，这也是其他人在别处建议的格式。如果这个缺少 material 的问题真的非常愚蠢，我深表歉意:)

这是 .blend 文件，也许我做错了什么或者某处的复选框未选中...？ https://github.com/Scharnvirk/wingmod/raw/blender_issue/models/wall_pipes.blend

提前致谢！

Answer 1

three.js 导出器有很多选项，检查每个 material/UV 选项是否打开。

启用以下选项

我得到以下 json

{
    "faces":[43,0,1,3,2,0,0,1,2,3,0,0,0,0],
    "metadata":{
        "version":3,
        "type":"Geometry",
        "uvs":1,
        "materials":1,
        "faces":1,
        "normals":1,
        "generator":"io_three",
        "vertices":4
    },
    "normals":[1,0,0],
    "name":"PlaneGeometry",
    "uvs":[[0.0001,0.0001,0.9999,0.0001,0.9999,0.9999,0.0001,0.9999]],
    "materials":[{
        "mapBumpAnisotropy":1,
        "mapDiffuseAnisotropy":1,
        "wireframe":false,
        "mapBumpWrap":["RepeatWrapping","RepeatWrapping"],
        "mapSpecularAnisotropy":1,
        "specularCoef":50,
        "visible":true,
        "mapSpecularRepeat":[1,1],
        "mapBumpScale":[2.05634,2.05634],
        "DbgColor":15658734,
        "mapSpecular":"pk02_pipes01_C.png",
        "mapDiffuse":"pk02_pipes01_C.png",
        "depthWrite":true,
        "mapBump":"pk02_pipes01_C.png",
        "mapDiffuseWrap":["RepeatWrapping","RepeatWrapping"],
        "shading":"phong",
        "depthTest":true,
        "DbgName":"Material.001",
        "opacity":1,
        "colorDiffuse":[0.8,0.8,0.8],
        "transparent":false,
        "mapSpecularWrap":["RepeatWrapping","RepeatWrapping"],
        "DbgIndex":0,
        "colorSpecular":[0.021739,0.021739,0.021739],
        "mapBumpRepeat":[1,1],
        "mapDiffuseRepeat":[1,1],
        "colorEmissive":[0,0,0],
        "blending":"NormalBlending"
    }],
    "vertices":[-0,3e-06,16,1e-06,-4e-06,-16,-1e-06,32,16,0,32,-16]
}

THREE.js 的 Blender 导出

Blender export for THREE.js

blender

three.js