简体   繁体   中英

three.js add texture to JSON object

I've created a 3D model in Blender. Than I exported it with Three.js exporter and load it in JavaScript. Everything works fine except texture is not shown. I added texture in Blender as picture.

JSON file:

{
"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 Loader:

                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');

Anyone know how to display texture? I have my texture ('parket.jpg') in the same folder as index.html file.

EDIT:

I just found out that the texture is shown, but not propperly. I have wood texture and all i see is brown color. I tried to change the texture with different one but I always get one color on the object and not the full texture.

在此处输入图片说明

Texture:

在此处输入图片说明

May be this would help you ?

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM