Adding Texture to a Json Buffer Geometry

Questions
1

I have created a Json Buffer geometry as follows:

var myJson = {
    "metadata": {
        "version": 3,
        "type": "Geometry",
        "position": 8,
        "generator": "io_three"
    },
    "data": {
        "index": {
            "array": [0, 1, 2, 0, 2, 3, 1, 2, 5, 2, 5, 6, 3, 2, 6, 3, 6, 7, 0, 3, 4, 3, 4, 7, 0, 1, 5, 0, 4, 5, 4, 5, 6, 4, 6, 7],
            "type": "Uint16Array",
            "itemSize": 1
        },
        "attributes": {
            "position": {
                "array": [0, 0, 0, 1, 0, 0, 1, 0, 3, 0, 0, 3, 0, -10, 0, 1, -10, 0, 1, -10, 3, 0, -10, 3],
                "type": "Float32Array",
                "itemSize": 3
            }
        },
    }
};

To load and add a texture to the geometry I used the following:

var loader = new THREE.BufferGeometryLoader();
var mygeometry = loader.parse(myJson);
mygeometry.computeVertexNormals(true);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
cubeMaterial.map = new THREE.TextureLoader().load("img/lava.png")

It does not show any texture. However if I replace the above Geometry with a basic cube geometry as follows, It works perfectly:

var cubeGeometry = new THREE.BoxBufferGeometry(2, 2, 2);

Am I missing something in my Json Geometry?

2

Yes, your geometry has no uv or texture coordinates. These are necessary for using textures.

1 Like
3

Is there any way or algorithm on UV calculation (or Automatic calculation method like Normals). Now texture is showing up but it is kind of stretched. I have just added the following lines to my geometry:

"uv": {
    "array": [0.5, 0.5, 0.1, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
    "type": "Float32Array",
    "itemSize": 2
4

I think this simple picture is very helpful, however since one vertex could have different UVs, I should revise the geometry:

image

5

In most cases texture coordinates are added manually in a DCC tool like Blender. There are some algorithms for automatic uv generation but non of them is implemented in three.js. The only uv-generation that happens is in context of geometry generators like e.g. BoxGeometry or PlaneGeometry. Computing uvs for such concrete shapes is easier than doing something generic.

6

Agree, but the issue is the concrete panel (in reality) does not have a perfect cubic shape. In other words, 4 vertices in each side in each side do not locate in a geometric plane. Do you know any solution for this kind of irregular cubes?

7

No, unfortunately not. Generating uvs for irregular shapes is problematic in general. In most cases, the texture projection will look best if you do not compute them on the fly but define them during the design phase.

1 Like