I want to create hotspots to add to the scene, I know the width and height of the texture that I use for the hotspot
How can I set the mesh scale to visually have exact texture size regardless of the camera position or distance, I am using the perspective camera.
Thank you!
Roughly:
get the bounds Box3 of the object, use its min max props as world coordinates. Compute the world to screen coords. Get the screen width height, divide both widths and heights to get a ratio, multiply scalar to scale
Thank you, your suggestion work great as long as the camera distance from the target is 1 if it is larger or smaller the hotspot will be smaller or larger, what I am missing, below is the code snippet that I use, I can’t upload on code pen, the project is too large…
// Get the bounding box of the hotspot in world coordinates
var boundingBox = new THREE.Box3().setFromObject(hotspot);
// Get the min and max world coordinates
var minWorld = boundingBox.min.clone();
var maxWorld = boundingBox.max.clone();
// Convert world coordinates to screen coordinates
minWorld.project(camera);
maxWorld.project(camera);
// Calculate the screen width and height
var screenWidth = Math.abs(maxWorld.x - minWorld.x) * rendererWidth;
var screenHeight = Math.abs(maxWorld.y - minWorld.y) * rendererHeight;
// Empirical scale factor (experiment with different values)
var scaleFactorX = 1.1;
var scaleFactorY = 1.09;
// Calculate the scale based on texture size, screen size, and the scale factor
hotspot.scale.x = (this.iconWidth / screenWidth) * 2 * scaleFactorX;
hotspot.scale.y = (this.iconHeight / screenHeight) * 2 * scaleFactorY;
When working on things like this you should build a tiny project scene just in threejs working on the issue, that way you can use codepen or glitch.com or others.
You are getting there, I dont think you need my help right this second, its very near.
However from reading your q, are you wanting to make meshes clickable as hotspots?
Search through the examples for interactive or raycast
this is one of them
https://threejs.org/examples/?q=rayca#webgl_interactive_cubes
You can then parent the mesh to the camera like a HUD item
Thank you for your answer, please check the example on glitch, I am adding a Sprite and adding it to a bone so that it can animate with the model, the position is set using a raycaster…
What I need is to be able to set a custom size in px for example.
const markerWidth = 24;
const markerHeight = 31;
When the model scales the marker should have the same size visually…
I have spent a few days on this, but my skills are not there yet, I really need help guys.
Thank you!
AH! you’re are making labels! You can do in 3d and 2d. Typically these are done in 2d and matched to the screen cause 2D is MUuuuuch better at Text support and sharpness
https://threejs.org/examples/css2d_label.html
https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer.setSize
If you dont get it tonight I will look at it untill someone else does later tonight
Thank you for your help.
I already solved the 2d version, I need to solve the 3d as well, it is difficult to explain why… is a big project… I will show you when is done.
All I need is to have a size in px for the grpup that contains the Sprite and this size visually to have the same when the camera is moved/scaled.
The marker can be addes in the scene or in a bone to be animated with the bone or remain static in the scene…
for 3d:
You need to get the distance of the camera as a unit. And then a Base scale of the object. And then find the difference of the camera distance to the view and the object and a fudge scalar. You can do this with pen and paper or in console. This can be solved in linear algebra
I will give it a try…
I have recorded a video for a friend who is good with threejs to explain the issue, I am trying a different approach and it works, the only issue that remains is the y position if the registration point of the marker is down, please watch the video maybe you can point me in the right direction,I can’t upload that code on glitch is a huge project and it will make no sense to read all the code…
Thank you!
As a word of advice for questions. Think of your issue in the smallest form when working out a thing and sharing for devs to help.
Here is a tiny demo for you to poke at
https://boom-iron-fisher.glitch.me/
view source for code. mouse controls are in for scroll and pan
the global deriveScalar is the value to change
You can try to derive the scale you need but otherwise that value works
Its not perfect, its based on the distance of the camera, not the computation difference of the bounds of the cube, but its near enough for me
math thinking.
If at:
If your screen size cube needs to be 100px
The 3d cube scale is 1
and the camera is z 10
the scalar should be 1, so 1 * 1 = 1
from there camera 20 scale should be 2, so 2 * 1 = 2
and camera 5, scale 0.5 * 1 = 0.5
var dis = camera.position.distanceTo(cube.position);
var gg = (baseScale / unit) * dis * deriveScalar;
cube.scale.setScalar(gg);
anyhoo!!
Thank you, but this is not good enough for the project that I do it has to be px perfect, and also the math should work if the marker is added in a bone or mesh, belive me it seams like an easy task but it is not.
About the example I can’t post the project is huge I posted an example that can be modified and easy to understand, I did my best in this regard.
A friend is trying to help me he has 20 years of experience with 3D and it is a difficult task for him as well…
I will post it here asap, if someone can help more with the example that I posted it would be great.
I cant help you any more than that. It a simple step from here to use bounds of a mesh and pixels to compute the difference and box fit. But its still work.
I understand and thank you for your help.