Jak powtórzyć mapę tekstury jak GL_REPEAT?

Mam model domu w mojej grze i mam kilka materiałów do geometrii domu. Jest materiał na ścianę domu i mam obraz tekstury-mapy, żeby pokazać cegły.Jak powtórzyć mapę tekstury jak GL_REPEAT?

var mat = new THREE.MeshPhongMaterial({ 
    ambient: 0x969696, 
    map: THREE.ImageUtils.loadTexture('textures/G/G0.jpg'), 
    overdraw: true,combine: THREE.MultiplyOperation 
});

W ten sposób powyżej, mapa tekstury wygląda jak GL_CLAMP chcę pokazać jak GL_REPEAT.

Co należy zrobić?

Jeśli nie widzisz obrazów, sprawdź: this.

Źródło

2012-07-03 user1497753

Nazywa się tam THREE.RepeatWrapping. Domyślnie loadTexture to THREE.ClampToEdgeWrapping (patrz funkcja ctor z poprzedniego linku). Nie wiem, czy można użyć callback (ponieważ this w JS jest nieco dziwne (wygląda na to, że wskazuje na utworzony Image, a nie utworzony Texture)). Podpis:

loadTexture: function (path, mapping, callback) {

Lepiej po prostu wymienić teksturę lokalnie i ustawić tryby oblewania ręcznie:

var t = THREE.ImageUtils.loadTexture('textures/G/G0.jpg'); 
t.wrapS = t.wrapT = THREE.RepeatWrapping;

Wygląda na to, że nie będziemy daleko z threejs bez patrzenia na rzeczywisty kod ...

Źródło

2012-07-03 06:48:47

Próbowałem ustawić wrapS i wrapT w ten sposób, ale to nie działa. Myślę, że może materiał jest niewłaściwy, teraz używam MeshPhongMaterial, czy powinienem użyć ShaderMaterial zamiast tego? – user1497753

Nie wiem, spróbowałbym jednak sprawić, żeby to działało. Tekstura musi być potęgą dwóch, zobacz [WebGLRenderer, l. 5721] (https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js). –

Miałem podobny problem, przeskalowałem kostkę i rozciągnięto teksturę. Aby temu zapobiec, musisz ustawić nowy rozmiar kostki w 'render()' w ten sposób: 'texture.repeat.set (2 * cWidth, 2 * cHeight);' (wtedy tekstura zachowuje się jak nieskalowany wzór). Nadzieja, która pomaga. –

Pisałem pełny przykład pracuje w: http://stemkoski.github.com/Three.js/Texture-Repeat.html

Odpowiedni fragment kodu jest na przykład:

// for example, texture repeated twice in each direction 
var lavaTexture = THREE.ImageUtils.loadTexture('images/lava.jpg'); 
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping; 
lavaTexture.repeat.set(2, 2); 
var lavaMaterial = new THREE.MeshBasicMaterial({ map: lavaTexture }); 
var lavaBall = new THREE.Mesh(THREE.GeometryUtils.clone(sphereGeom), lavaMaterial); 
scene.add(lavaBall);

Źródło

2012-07-04 12:16:35

Wielkie dzięki! Wiedziałem, jak zrobić powtórzenia tekstury na kostki i kuli.Ale mam inne pytanie, jak zrobić powtórzyć tekstury na materiałach geometrii? Mam jakiś załadowany model w mojej grze, geometria modelu ma pewne materiały, każdy z nich ma inny obraz tekstury, więc możesz dać mi jakieś sugestie lub przykład? Dziękuję! – user1497753

Mam to. To jest tak samo! Obraz, którego używałem ma rozmiar 120 * 120, zmieniam go na 128 * 128, więc problem został rozwiązany! Może rozmiar obrazu musi wynosić 128 * 128 lub 256 * 256 lub coś, jeśli chcesz zobaczyć "powtórzyć" – user1497753

Tak, aby funkcje powtarzania działały, wymiary obrazu muszą wynosić 2. –

Obraz musi być 8x8, 16x16, 32x32, 128x128, 256x256, 512x512 itp I wszystko działa. =)

Źródło

2014-11-24 12:02:14 Ilya

Zawijanie wymaga obrazów o mocy dwóch (POT), ale nie musi być kwadratowe. – WestLangley

@WestLangley masz na myśli, że 8x512 również będzie działał? – fuchs777

@ fuchs777 To prawda. – WestLangley

Jak powtórzyć mapę tekstury jak GL_REPEAT?

Odpowiedz

Powiązane problemy