CODEWITHSUNDEEP
javascript3dthree.jstexturesoverlapping
user2337969
user2337969

Reputation: 703

Three.JS: How to make textures overlap each other?

TL;DR: How do i make textures appear bigger than the faces they are attached to, with a fading effect, so that all textures overlap each other?

-

Learning three.js by trying to recreate the Game Warzone 2100. :)

I'm loading a default texture for the ground with:

var texture = THREE.ImageUtils.loadTexture('tile-53.png'); // Specify file
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // Make the texture repeat
texture.repeat.set(map_width, map_height); // Repeat for every face
texture.anisotropy = 100; // Disable anisoptropy

At the moment it looks like this. Now compare it to this.

Warzone 2100 finally started looking good with the new renderer especially because they made the textures show bigger than the faces and overlap each other, making the sharp borders vanish. Is it possible to reach the same effect with three.js and if so, how would i go there?

Upvotes: 2

Views: 1415

Answers (1)

Alex Under
Alex Under

Reputation: 1489

Texture is something that is attached to it's geometry in the first place (speaking about 3D), so to make just the texture itself overlap other textures is not quite possible. You can perfectly make your geometries overlap each other, though.

For your textures looking "bigger", try looking here.

Upvotes: 2

Related Questions