将纹理附加到json对象

时间:2018-01-21 21:55:51

标签: three.js blender

我无法将纹理应用于加载的json文件。它适用于我放入场景的平面,但不是我正在加载的对象(虽然我可以更改金属等属性)。

以下是我的位置:

const towerObj = new THREE.ObjectLoader()

towerObj.load( "./3dassets/models/buiding.json",  function (object) {
    let tower = object
    scene.add(tower)

    const texture = new THREE.TextureLoader().load("./3dassets/materials/Concrete.png")
    const bumpMap = new THREE.TextureLoader().load("./3dassets/materials/Concrete_nrm.png")

    texture.wrapS = THREE.RepeatWrapping
    texture.wrapT = THREE.RepeatWrapping
    texture.repeat.set( 0.1, 0.1 )
    bumpMap.wrapS = THREE.RepeatWrapping
    bumpMap.wrapT = THREE.RepeatWrapping
    bumpMap.repeat.set( 0.1, 0.1 )

    tower.traverse( function (child) {
        if ( child instanceof THREE.Mesh ) {
            child.castShadow = true
            child.receiveShadow = true

            child.material = new THREE.MeshStandardMaterial()
            child.material.map = texture
            child.material.bumpMap = bumpMap
            child.material.needsUpdate = true
            child.material.roughness = 0.1
            child.material.metalness = 0
            child.color = 'rgb(244,244,244)'
            console.log(child.name)

        }
    });


});

这是对象的简化版本(我删除了对顶点,法线和面的大多数引用,否则会导致浏览器崩溃):

{
"metadata": {
    "version": 4.5,
    "type": "Object",
    "generator": "Object3D.toJSON"
},
"geometries": [
    {
        "uuid": "2920CDAB-6DEC-4BEB-9BFB-C794B33A5AFB",
        "type": "Geometry",
        "data": {
            "vertices": [0.720958,8.47758],
            "normals": [-0.448833,0.782579],
            "faces": [50,0,48,47,0,0,1,2,3,50,48,95,]
        }
    }],

"object": {
    "uuid": "EE10C174-4F45-45B3-80E6-8AA488B29F34",
    "type": "Mesh",
    "name": "tower",
    "castShadow": true,
    "receiveShadow": true,
    "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "geometry": "2920CDAB-6DEC-4BEB-9BFB-C794B33A5AFB",
}}

1 个答案:

答案 0 :(得分:0)

即使你没有在Blender中使用纹理,你也需要在导出之前在Blender中创建UV,以便以后能够添加纹理。

请参阅:

一旦你完成了这个,你应该在导出的JSON中看到这样的UV,并且能够在threejs中添加纹理:

"uvs":[[0,0,1,0,1,1,0,1]],