Ich teile eine Textur 1024 x 1024 auf 32 x 32 Kacheln * 32 auf. Ich bin mir nicht sicher, ob es möglich ist, die Textur mit einem Versatz zu teilen, oder ob ich für jede Kachel mit dem Versatz eine neue Textur erstellen muss.

Um den Versatz zu erstellen, verwende ich einen einheitlichen Wert = 32 * i und aktualisiere die Einheit durch jede Schleifeninstanz zum Erstellen einer Kachel. Alle Kacheln scheinen den gleichen Versatz zu haben. Im Grunde möchte ich, dass ein Bild so aussieht wie ein Bild, das nicht in kleine Kacheln zerlegt ist. Die aktuelle Ausgabe ist jedoch der gleiche x, y-Versatz auf allen 32 Kacheln. Verwenden Sie den Vertex-Shader mit three.js r71 ...

Muss ich für jede Kachel mit dem Versatz eine neue Textur erstellen?

      for ( j = 0; j < row; j ++ ) {

           for ( t = 0; t < col; t ++ ) {

                customUniforms.tX.value = tX; 
                customUniforms.tY.value = tY;
                console.log(customUniforms.tX.value);
                customUniforms.tX.needsUpdate = true;
                customUniforms.tY.needsUpdate = true;
                mesh = new THREE.Mesh( geometry,mMaterial);// or new material
           }
       }

       //vertex shader :
       vec2 uvOffset = vUV + vec2( tX, tY) ;    

Beispiel:

Jedes Bild sollte einen Versatz von 10 0r 20 px haben, aber sie sind alle gleich. Dies ist von der Verwendung einer Textur.

Wie vorgeschlagen, habe ich versucht, das UV auf jedem Objekt ohne Glück zu manipulieren, es scheint, dass alle gleichen Scheitelpunkte die gleiche Position haben, zum Beispiel 10x10-Segmant-Ebene, alle Flächen werden gleich sein

    var geometry = [
    [ new THREE.PlaneGeometry( w, w ,64,64),50 ],
    [ new THREE.PlaneGeometry( w, w ,40,40), 500 ],
    [ new THREE.PlaneGeometry( w, w ,30,30), 850 ],
    [ new THREE.PlaneGeometry( w, w,16,16 ), 1200 ]
];

    geometry[0][0].faceVertexUvs[0] = [];

    for(var p = 0; p < geometry[0][0].faces.length; p++){ 
        geometry[0][0].faceVertexUvs[0].push([
        new THREE.Vector2(0.0, 0.0),
        new THREE.Vector2(0.0, 1),
        new THREE.Vector2( 1, 1 ), 
        new THREE.Vector2(1.0, 0.0)]);  
    }

Bild dieses Ergebnisses, Sie werden feststellen, dass alle Eckpunkte die gleichen sind, wenn sie nicht sein sollten

Update nochmal: Ich muss alle Eckpunkte von Gesichtern durchgehen, während zwei Dreiecke ein Quad ergeben, um das oben genannte Problem zu vermeiden. Ich denke, ich habe dieses Problem möglicherweise gelöst. Wird aktualisiert.

Letztes Update Hoffentlich: Unten ist der Quellcode, aber ich bin verloren, den Algorithmus die Textur wie erwartet anzuzeigen.

            /*
            j and t are rows & columns looping by 4x4 grid
            row = 4 col = 4;
            */

            for( i = 0; i < geometry.length; i ++ ) {
            var mesh = new THREE.Mesh( geometry[ i ][ 0 ], customMaterial);
            mesh.geometry.computeBoundingBox();
            var max     =  mesh.geometry.boundingBox.max;
            var min     =  mesh.geometry.boundingBox.min;
            var offset  = new THREE.Vector2(0 - min.x*t*j+w, 0- min.y*j+w);//here is my issue
            var range   = new THREE.Vector2(max.x - min.x*row*2, max.y - min.y*col*2);
            mesh.geometry.faceVertexUvs[0] = [];
            var faces =  mesh.geometry.faces;

            for (p = 0; p <  mesh.geometry.faces.length ; p++) {
                var v1 =  mesh.geometry.vertices[faces[p].a];
                var v2 =  mesh.geometry.vertices[faces[p].b];
                var v3 =  mesh.geometry.vertices[faces[p].c];
                mesh.geometry.faceVertexUvs[0].push([
                new THREE.Vector2( ( v1.x + offset.x ) / range.x , ( v1.y + offset.y ) / range.y ),
                new THREE.Vector2( ( v2.x + offset.x ) / range.x , ( v2.y + offset.y ) / range.y ),
                new THREE.Vector2( ( v3.x + offset.x ) / range.x , ( v3.y + offset.y ) / range.y )
                ]);

            }

Sie werden bemerken, dass das Bild unten in Rot nahtlos ist, da die anderen Kacheln nicht an der Textur ausgerichtet sind.