Spotlight.map rotation

Questions
, ,
1

Hello.

I implemented a technique from https://github.com/mrdoob/three.js/pull/20290

I wonder is it possible to rotate spotlight or texture? Specifically i need to rotate around Z axis (blue) to fit the texture with 3D model. As you can see now it doesn’t.

1
11974×1152 987 KB

2
22450×1095 1.08 MB

I tried to rotate: camera, spotlight, spotLight.map, spotLight.shadow.camera, but nothing does the job. Or do i need to do something other to perform the task?

1 Like
2

Hi, I’m wondering about the same thing :smile: Were you able to figure it out?

3

Nope, i wasn’t.

4

After I was also unable to achieve rotation by manipulating the texture via .rotation or .matrix, I couldn’t think of anything else but to adjust the actual image to my needs. For this, I wrote a method that places the image within a circle and allows it to rotate around the center. Then, I use the newly generated image as a texture, and voila, it works. I hope this helps someone who encounters the same problem. I’d be happy if someone has a better idea! Best regards

image
image549×545 54.9 KB

private drawRotatedImageInCircle(imageUrl: string, rotation: number = Math.PI / 4) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const image = new Image();

  image.src = imageUrl;
  image.onload = () => {
    const size = Math.max(image.width, image.height);
    const width = (canvas.width = size);
    const height = (canvas.height = size);
    const radius = Math.min(width, height) / 2;

    ctx.clearRect(0, 0, width, height);

    // Calculate the scale to fit the image within the circle
    const imageDiagonal = Math.sqrt(image.width * image.width + image.height * image.height);
    const scale = (radius * 2) / imageDiagonal;
    const imageWidth = image.width * scale;
    const imageHeight = image.height * scale;

    // Draw image with rotation and scaling
    ctx.save();
    ctx.translate(width / 2, height / 2);
    ctx.rotate(rotation);
    ctx.drawImage(image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
    ctx.restore();
  };
  return canvas;
}
1 Like