Display non-stretchable texture

Question

I display with the help of three.js 3d object from 3DSMax. I put the texture on the 3D object. This texture stretches across the entire surface of the 3d object. How to make so that the texture does not stretch, and was of a certain size, which I myself will indicate? Those. if the img.jpg texture file has a size of 250x250 pixels, then on the object this texture will occupy only 250x250 pixels, and not stretched to the entire surface of the object.

Here is the code:

loader = new THREE.OBJLoader(); loader.load('3d/women.obj', function (geometry) { if (mesh) scene.remove(mesh); var material = new THREE.MeshPhongMaterial({ color: 0xffffff }); var texture = THREE.ImageUtils.loadTexture("3d/texture.png"); material.map = texture; geometry.children[0].material = material; mesh = geometry; geometry.scale.set(15, 15, 15); geometry.position.y = -150; scene.add(geometry); });

But it stretches the texture.png image over the entire surface of the 3d object women.obj, and I need it not to stretch.

With the help of the test coordinates, you can get any part of the texture (image)
Roughly speaking, I have a Teapot from 3dsmax, I need to put a photo on the side surface of this kettle, but the method I indicated above stretches the photo onto the entire surface of the kettle.
How to make that only on the side of the kettle and only with the size of the photo?

Answer 1 · 2016-09-21T11:30:42

You can specify the offset and scale of the texture:

 texture.repeat.set(2, 2); // отобразить текстуру уменьшенную в 2 раза texture.offset.set(0.25, 0.25); // сдвинуть текстуру на 25%

Here is a complete reference ( http://threejs.org/docs/#Reference/Textures/Texture )

Andrew B Andrew B 1.605 four sixteen · Answer 2 · 2016-10-20T09:33:11

The texture mapping depends on the texture coordinates you configure. You can use texture files of any size, however, in my experience with threejs r71, the texture will be automatically scaled if its size does not match 2 в степени n , i.e. texture 600x600 will be scaled to 512x512 and a warning will be displayed on the console.

To create texture coordinates in 3DS Max you can use, for example, the "Unwrap UVW" modifier.

An example of how it looks in 3DMax ( I do not do Max, so please do not judge strictly for an example. ):

In the upper right corner, I placed what I do not need.

Texture example (in this case for bump, but the essence is the same):

After that, you export your 3D model, for example, in the format * .obj

With a tick "Texture coordinates". Also, you can set up "Export materials" (the texture and * .mtl file with color settings and several other parameters will be exported)

In this case, I use a 512x512 texture, however, you can choose a different size (1024x1024, 2048x2048, 256x256). The texture will still be used according to the texture coordinates, and its size will affect the quality of the result (I did not fit 256, because it was of poor quality, and 1024x1024 had a large weight in kilobytes).

The final result on the site (only the upper part is covered with pimples):

Display non-stretchable texture

2 answers 2

More articles: