I am a beginner in Three.js and I am looking to create a 3D scene with multiple objects floating in the sky and a scale displayed on the screen.
The scale should be movable up and down to bring the objects closer or further away, creating the illusion of moving through space and passing by stars.
Although I have been using Three.js to achieve this effect, I am encountering an issue where as the objects get closer to the camera, their size increases drastically. I need a way to control the size of the objects based on certain parameters, so that they do not become overly large when approaching the screen. How can I implement this?
Below is the code snippet responsible for rendering the objects:
function renderobjects() {
if(speed != 0) {
if(textArray.length > 0 && textArray[0].material.opacity == 1) {
for(var i = 0; i <textArray.length; i++) {
textArray[i].material.opacity = 0;
}
}
camera.position.y += -mouseY * 0.01;
if (camera.position.y > 60) {
camera.position.y = 60;
}
if (camera.position.y < 35) {
camera.position.y = 35;
}
camera.position.z = (camera.position.z + 8 * speed);
}
I would appreciate any guidance on how to restrict the size of the objects in the scene. Thank you!