CODEWITHSUNDEEP
three.js
tolyan
tolyan

Reputation: 879

How place texture to a side of extruded geometry in ThreeJS?

In ThreeJS I make geometry by load svg (I using SVGLoader) and extrude it. Also I use materials for face and side.

Here is materials:

  const texture = new THREE.TextureLoader()
      .load('https://mail.dolodom.com/sendimg/admin/face2.jpg')
  var material = new THREE.MeshBasicMaterial( {
    map: texture,
  } );

  const texture2 = new THREE.TextureLoader()
      .load('https://mail.dolodom.com/sendimg/admin/side2.jpg')
  var material2 = new THREE.MeshBasicMaterial( {
    map: texture2,
  } );

Geometry:

    let extrGeometry = new THREE.ExtrudeGeometry(shape, {
      depth: 20,
      bevelThickness: 2,
      bevelSize: 0.5,
      bevelEnabled: true,
      bevelSegments: 3,
      curveSegments: 12,
      material: 0,
      extrudeMaterial: 1,
      UVGenerator: THREE.ExtrudeGeometry.BoundingBoxUVGenerator
    })

    var uvs = extrGeometry.faceVertexUvs[0];
    for (var i = 0; i < uvs.length; i++) {
      uv = uvs[i];
      for (var j = 0; j < uv.length; j++) {
        u = uv[j];
        u.x = (u.x - 0) / 700;
        u.y = (u.y - 0)  / 700;
      }
    }

    var mesh = new THREE.Mesh( extrGeometry, [material, material2] );

    group.add( mesh );

Face texture is OK, but side texture is not. You can see face and side textures

How map second texture to a side of extruded geometry?

You can see full project on codepen

Upvotes: 1

Views: 376

Answers (1)

Mugen87
Mugen87

Reputation: 31026

How map second texture to a side of extruded geometry?

Of course this depends on your use case. One approach to improve the texture quality is to use THREE.RepeatWrapping on your side texture like so:

texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.y = 24;

Check out this approach in the updated codepen: https://codepen.io/anon/pen/XGqypY?editors=1010

BTW: I've seen in your code that you create an instance of TextureLoader for each texture. That is actually not necessary. The intended usage is to use a single loader instance for all requests.

Upvotes: 3

Related Questions