three.js 向 JSON 对象添加纹理答案

【问题标题】：three.js add texture to JSON objectthree.js 向 JSON 对象添加纹理
【发布时间】：2018-05-13 07:20:55
【问题描述】：

我在 Blender 中创建了一个 3D 模型。比我用 Three.js 导出器导出它并在 JavaScript 中加载它。除了未显示纹理外，一切正常。我在 Blender 中添加了纹理作为图片。

JSON 文件：

{
"normals":[0,-1,0,...]
"vertices":[-0.0101738,1.5,6.55678,-0.0101738,1.5,...]
"materials":[{
    "DbgIndex":0,
    "blending":1,
    "colorSpecular":[1,1,1],
    "opacity":1,
    "colorDiffuse":[0.8,0.554325,0.316799],
    "mapDiffuseWrap":["repeat","repeat"],
    "transparent":false,
    "wireframe":false,
    "DbgColor":15658734,
    "depthWrite":true,
    "specularCoef":50,
    "mapDiffuse":"parket.jpg",
    "mapDiffuseRepeat":[1,1],
    "visible":true,
    "mapDiffuseAnisotropy":1,
    "shading":"phong",
    "depthTest":true,
    "doubleSided":false,
    "colorEmissive":[0,0,0],
    "DbgName":"Les"
},{
    "DbgIndex":1,
    "blending":1,
    "colorSpecular":[1,1,1],
    "opacity":1,
    "colorDiffuse":[0.287043,0.0523764,0.0102247],
    "transparent":false,
    "wireframe":false,
    "DbgColor":15597568,
    "depthWrite":true,
    "specularCoef":50,
    "visible":true,
    "shading":"phong",
    "depthTest":true,
    "doubleSided":false,
    "colorEmissive":[0,0,0],
    "DbgName":"\u010crna"
},{
    "DbgIndex":2,
    "blending":1,
    "colorSpecular":[1,1,1],
    "opacity":1,
    "colorDiffuse":[0.8,0.136903,0.018619],
    "transparent":false,
    "wireframe":false,
    "DbgColor":60928,
    "depthWrite":true,
    "specularCoef":50,
    "visible":true,
    "shading":"phong",
    "depthTest":true,
    "doubleSided":false,
    "colorEmissive":[0,0,0],
    "DbgName":"Rjava"
}],
"metadata":{
    "materials":3,
    "uvs":0,
    "generator":"io_three",
    "type":"Geometry",
    "vertices":276,
    "normals":109,
    "faces":241,
    "version":3
},
"faces":[35,22,0,1,2,0,0...]
"uvs":[]

}

JSON 加载器：

                var loader = new THREE.JSONLoader();
                loader.load( 'samosteza.json', function ( geometry, material ) {
                    mesh = new THREE.Mesh( geometry, material);
                    mesh.scale.x = mesh.scale.y = mesh.scale.z = 30;
                    mesh.translation = THREE.GeometryUtils.center(geometry);
                    mesh.translateY(-150);
                    scene.add( mesh )
                }, 'parket.jpg');

有人知道如何显示纹理吗？我的纹理（'parket.jpg'）与 index.html 文件位于同一文件夹中。

编辑：

我刚刚发现纹理显示了，但不正确。我有木质纹理，我看到的只是棕色。我尝试用不同的纹理更改纹理，但我总是在对象上得到一种颜色，而不是完整的纹理。

质地：

【问题讨论】：

标签： javascript json html three.js

【解决方案1】：

这对你有帮助吗？

mesh.material.map = THREE.ImageUtils.loadTexture( src );
mesh.material.needsUpdate = true;

【讨论】：

不，结果还是一样。
基于文档 "threejs.org/docs/index.html#api/loaders/JSONLoader" 不应该有第三个参数......而且它在文档中看起来他们有材料 [0].. 你能再检查一下来源吗？另外，您在哪里添加了上述 2 行？
还要交叉检查您从搅拌机中的导出。示例 json 文件看起来与您所拥有的不同。github.com/mrdoob/three.js/blob/master/examples/models/animated/…
我刚刚发现纹理显示了，但不正确。我有木质纹理，我看到的只是棕色。我尝试用不同的纹理更改纹理，但我总是在对象上得到一种颜色，而不是完整的纹理。
你可以尝试在你的代码中使用threejs社区提供的示例json和他们的纹理。看看它的颜色是如何出现的。如果仍然是这样，那么它可能是一个代码其他部分的灯或材料更换问题..请提供工作示例，以便我们为您提供帮助..