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
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
labris
April 10, 2025, 4:14am
4
Without texture offsets it is more easy for one’s eyes 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
labris
April 11, 2025, 2:10pm
6
First one needs to understand what are trying to accomplish and how to use it and what for
3 Likes
roland
April 21, 2025, 1:51pm
10
@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…
-