I have two problems
1 - I have a 3D object of a frame, where when applying a mesh with image, and trying to rotate it, it rotates around the bottom left corner. I solve this with ( onLoad.center.setScalar(0.5) )
however, when exporting the image, it remains oriented in relation to the lower left corner. Even though visually the image is displaced, when exporting the file and opening it in Blender the image is in the wrong place
2 - The Image does not repeat, however it stretched the image making it buggy. The black line under Minato’s foot. Image 2
How do I solve this??
Have you tried commenting out the texture rotation?
// onLoad.rotation = snap.model_image_config.rotate
But I have to manage, rotate, position and increase the size of the image
For issue 2 – without the possibility to debug online, it is just a guess. And my guess is that the marked line is responsible for the wrong image aspect. The repeat property of the texture might need two different values (...scale.x and ...scale.y) instead of only ...scale.x.
In truth no. Im scaling equally on both axes (x and y)
It’s just the nomenclature, why was I using the
onLoad.repeat.set(snap.model_image_config.scale.x, snap.model_image_config.scale.y)
both with the same value
I see. I would have never guessed by the posted code snapshots that they are equal. Then my next guess – the visual size of the texture image depends not only on its repeat, but also on the size of the mesh. Could you try adjusting the scales of the texture depending on the ratio of the mesh sizes?
1 Like
I want to be able to resize the image where I want it, with the desired size and rotation. If not, remove the center of the image from the left corner. At least I can get the image to look like this
I made this montage in paint, to get a visual idea
It depends on your objects and your setup. I cannot guess that much.
Here is an example of a texture that is rotated, scaled and moved (not Drei, but vanilla):
https://codepen.io/boytchev/pen/QWzbpoK
Edit: just for a quick test, try this (does the aspect change?):
onLoad.repeat.set(snap.model_image_config.scale.x, 0.8*snap.model_image_config.scale.y)
or this:
onLoad.repeat.set(snap.model_image_config.scale.x, 1.2*snap.model_image_config.scale.y)
Still continues. He’s trying to pull the texture and distort the image. The black line appears on Minato’s foot. The same goes for any image.
The black line at the feet is because the default image wrapS and wrapT are set to ClampToEdge wrapping which repeats the edge pixels. You can get rid of it by ensuring your image has a few pixels border of the transparent background color…
Or you can use a different wrap mode like…
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
Well, that won’t solve my problem. Because the user who will upload the image, so I have to do this via code. For any image that is uploaded, do not have this stretch. I will try to apply a margin to the image according to the background of the frame. Create an 2D canvas and apply to a mesh, I will back to tell if will work
1 Like
Yeah If you add a margin, try to make it configurable because you may end up needing up to a 16 pixel margin to really get rid of edge bleeding, due to mipmapping and texture filtering. You’ll notice this if you are zoomed far away the lines get more prominent… That’s because the filtering is pulling in more edge pixels since the image is being scaled down.
1 Like
I solved my problem 2. I created a 2D canvas, with 30px more width and height from my image. Then apply my image in the middle. After that i catch the url fro data canvas and apply in the texture with texture loader. Work as well.
Now, I can’t figured out how to fix the problem 1. Did u now? My friend who is pro in blender, tell me to manipulate the UV. But I can’t figured out how I do this. I tried useTexture(url, on load => {
onLoad.transformUv — but this don’t work
})
You can change the origin that it rotates around by manipulating the offset.
It might be that you have to set it based on the angle that you set in rotation… something like
offset.set( sin(angle) * -centerX,cos(angle) * -centerY)
But visually the image is positioned and rotational correctly right in the middle. If I use texture.center(0.5,0.5) the image rotate in the middle. But, when I export, the image is much more to the left. If i don’t use texture.center don’t matter where i put the image on the mesh. When i export the image, its at the same position. But the only problem, is when I’m rotating, the image don’t rotate at the middle the image
Yep. I understand that. That’s what I am trying to explain:
offset.set( sin(angle) * -centerX,cos(angle) * -centerY)
translates in the rotated coordinate frame…
multiplying the components by the sin and cos of the rotation make them happen in the rotated space…
1 Like
Where i apply this? texture.rotation ?
Ok i dug into it more and i was overthinking it…
just put this before you set rotation:
tex.center.set(.5,.5)
1 Like
