Linking an image to the spotlight of an object on an object // Spotlights images // Projectors images

I wanted to find a demo with a picture spotlight so that when an object is moved, the picture on another object moves, but I couldn’t find anything, so I decided to program my own versions of it.

In this code, you drag the ball with the mouse and the pictures move on the plane.

Linking an image to the object’s spotlight (Version 1 - multi-image movement) | Babylon.js Playground

In this code, you drag the ball with the mouse and only one picture moves on the object.

Linking an image to the object’s spotlight (Version 2 - one-image movement) | Babylon.js Playground

However, I need the picture to change not only in xz but also in y so that when the ball is moved, the picture scales with a proportional change in height.

Linking an image to the object’s spotlight (Version 3 - one-image with proportional height change) | Babylon.js Playground

Let’s make this version with lots of pictures.

Linking an image to the object’s spotlight (Version 4 - multi-image with proportional height change) | Babylon.js Playground

Dimasic’s spheres.

Linking an image to the object’s spotlight (Version 5 - Dimasic’s spheres) | Babylon.js Playground

Displaying many textures on a single object.

Linking an image to the object’s spotlight (Version 6 - Displaying many textures) | Babylon.js Playground

A set of multidimensional textures where there is not 1 texture but 2 multidimensional textures. On the same plane.

Linking an image to the object’s spotlight (Version 7 - multi-image with proportional height change many textures) | Babylon.js Playground

When the ball is moved, the object switches to a new texture in a certain order.

Linking an image to the object’s spotlight (Version 8 - By texture switching) | Babylon.js Playground

The image is anchored to the object, but when moving, a random object is randomly switched to a random texture in a random order.

Linking an image to the object’s spotlight (Version 9 - But when moving, there is a random switch to a random texture) | Babylon.js Playground

The movement of different images obliquely on different objects when moving an object.

Linking an image to the object’s spotlight (Version 10 - The movement of different images obliquely when moving) | Babylon.js Playground

LIST №2

Generating different images on different circles on different objects when moving the ball.

Linking an image to the object’s spotlight (version 11 — movement of different images in a circle when moving) | Babylon.js Playground

A plume of images when moving a ball object.

Linking an image to the object’s spotlight (version 12 — plume of images when moving) | Babylon.js Playground

A plume of images emanating from a moving ball with a fade timer where each image fades after 4 seconds, but some do not fade.

Linking an image to the object’s spotlight (version 13 — a plume of images with a fade timer, but some do not fade) | Babylon.js Playground

A plume of different images when the ball is moved by the user.

Linking an image to the object’s spotlight (version 14 — plume of different images when moving) | Babylon.js Playground

When moving ball, all textures on all objects change randomly.

Linking an image to the object’s spotlight (version 15 — When moving ball, all textures on all objects change randomly) | Babylon.js Playground

When moving ball, all textures on all objects change in order.

Linking an image to the object’s spotlight (version 16 — When moving ball, all textures on all objects change in order) | Babylon.js Playground

GL_CAMP_TO_EDGE on different objects as on the same object.

Linking an image to the object’s spotlight (version 17 - GL_CAMP_TO_EDGE on different objects as on the same object) | Babylon.js Playground

Multiple images as one image on different objects as on one object.

Linking an image to the object’s spotlight (Version 18 - multi-image as one image on different objects) | Babylon.js Playground

Multiple images as one image on different objects as on one object with proportional height change many textures.

Linking an image to the object’s spotlight (Version 19 - Multi-image as one image on different objects XYZ version) | Babylon.js Playground

Similar to the previous one, but with a mirror image.

Linking an image to the object’s spotlight (Version 20 - one image GL_MIRRORED_REPEAT with proportional height change) | Babylon.js Playground

Is this topic really not interesting to anyone!? Am I not the first to do something like this? You always need to Google it first and then get to work if no one has done this.You can use all these works of mine as you wish. I will only be glad if the project develops and someone has their own further ideas for implementation…

LIST №3

Examples of UV-texture movement when moving with camera!

Linking an image to the object’s spotlight (Version 21-Multi-image with proportional height change linked to the camera) | Babylon.js Playground

GL_CLAMP_TO_EDGE version with one-image.

Linking an image to the object’s spotlight (Version 22-One-image with proportional height change linked to the camera) | Babylon.js Playground

When the camera is removed, the magnification increases when approaching a lot.

Linking an image to the object’s spotlight (Version 23-Multi-image with linked to the camera but reverse perspective) | Babylon.js Playground

When an object hits an object, a picture is activated on one object. To do this, move the red cube onto the plane.

When an object hits an object, an image is activated on one object | Babylon.js Playground

When a red cube object is hit, a random texture on another object is activated.

Linking an image to the object’s spotlight (Version 25 - When an object hits, a random texture is activated) | Babylon.js Playground

When a red cube object hits a plane, there is no constant generation of a random texture.

Linking an image to the object’s spotlight (Version 26 - There is no random texture generation when an object is hit) | Babylon.js Playground

When gizmo is changed on the plane, the texture stretches, contracts, etc.

Linking an image to the object’s spotlight (Version 27 - gizmo version) | Babylon.js Playground

The reverse version of gizmo, which shrinks when compressed and stretches when stretched.

Linking an image to the object’s spotlight (Version 28 - gizmo not reversed version) | Babylon.js Playground | Babylon.js Playground

The version with an empty gizmo and also with a multidimensional image where non-reverse stretching and displacement is used.

Linking an image to the object’s spotlight (Version 29 - gizmo multi-image not reversed version) | Babylon.js Playground

One-image with linked to the camera but reverse perspective.

Linking an image to the object’s spotlight (Version 30-One-image with linked to the camera but reverse perspective) | Babylon.js Playground

Without texture offsets it is more easy for one’s eyes :slight_smile: - https://playground.babylonjs.com/#LADQJJ#1

1 Like

If I’m reinventing something, then let me know because I didn’t find it in the search.

1 Like

First one needs to understand what are trying to accomplish and how to use it and what for :slight_smile:

3 Likes

LIST №4

I finally found the right example - Drawing HTMLCanvasElement as Decal | Babylon.js Playground, Drawing HTMLCanvasElement as Decal 2 | Babylon.js Playground! And I think where did I see it!? I thought I found it on the Playground search page but it turned out he was in Examples from the playground

Now we can create a version with gizmo so that when you click on the plane, a vertical picture is created!

Linking an image to the object’s spotlight (Version 31 - Create a vertical image with gizmo by clicking on a plane!) | Babylon.js Playground

@MakarovDs777 I would kindly describe your short PGs more as tutorials or tips. If you wouldn’t mind, would you please consider adding similar small code snippets to the dedicated Tutorials and Tips category instead? This category is generally intended for larger projects. Thank you so much for your understanding!

1 Like

Then it would be possible to write this in the Babylon documentation.js isn’t there such a thing!? It doesn’t seem to be… Then, at the same time, it would be nice to add procedural generation on my behalf with all the examples…