CODEWITHSUNDEEP
three.jsrotation
Martin Pineault
Martin Pineault

Reputation: 89

three.js mesh rotate material

I wanna align the material so it looks like one piece of wood instead of several. [piece of wood][1]

How do I rotate the texture/material to do so? Or can I set this object3d to the material instead of each individual geometries?

I have tried this, but with no luck! Image load with a random color.

var material;
var loader = new THREE.TextureLoader;
var onLoad = function(_texture) {
    var imgWidth = imgHeight = 128;
    var mapCanvas = document.createElement( 'canvas' );
    mapCanvas.width = mapCanvas.height = 128;

    // document.body.appendChild( mapCanvas );
    var ctx = mapCanvas.getContext( '2d' );
    var img = new Image;
    img.onload = function() {
        ctx.translate( imgWidth / 2, imgHeight / 2 );
        ctx.rotate( Math.PI / 4 );
        ctx.translate( -imgWidth / 2, -imgHeight / 2 );
        ctx.drawImage( img, 0, 0, imgWidth, imgHeight );
    }
    img.src = 'http://remote.plancher2000.com:82/1-2-2-5-Bois.jpg';

    var texture = new THREE.Texture( mapCanvas );
    texture.needsUpdate = true;
    material = new THREE.MeshBasicMaterial({map : texture, side:THREE.DoubleSide});
    material.needsUpdate = true;
};
...
mesh[no] = new THREE.Mesh( geometry, material ); 
loader.load(image, onLoad, onProgress, onError);

Upvotes: 0

Views: 1440

Answers (1)

Martin Pineault
Martin Pineault

Reputation: 89

UVs were missing.

function assignUVs(geometry) {
    geometry.faceVertexUvs[0] = [];
    var faceno = 0;

    geometry.faces.forEach(function(face) {
        var components = ['x', 'y', 'z'].sort(function(a, b) {
            var truthy = (Math.abs(face.normal[a]) > Math.abs(face.normal[b]));
            return truthy;
        });
        var v1 = geometry.vertices[face.a];
        var v2 = geometry.vertices[face.b];
        var v3 = geometry.vertices[face.c];
        geometry.faceVertexUvs[0].push([
            new THREE.Vector2(v1[components[0]], v1[components[1]]),
            new THREE.Vector2(v2[components[0]], v2[components[1]]),
            new THREE.Vector2(v3[components[0]], v3[components[1]]),
        ]);
        faceno++;
    });
    geometry.uvsNeedUpdate = true;
}

Upvotes: 1

Related Questions