Manipulate the dimensions of an item in Three.js

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!

Answer №1

If you're looking to achieve parallel projection, the OrthographicCamera could be a valuable tool in your arsenal. This allows you the flexibility to customize the scaling of objects to suit your specific requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to use lodash to group objects that contain nested objects?

Currently utilizing Typescript in conjunction with Lodash! Upon retrieving data from the database, here is the resulting output: [ { "unitPrice": 0.01, "code": "92365524", "description": "Broto gr ...

Exploring the shine: implementing reflection in THREE.js

Is there a way to achieve a material that reflects other shapes from the scene? I attempted to use the reflectivity property but had no success in seeing any reflection. I found an example demonstrating this effect It seems like non-standard materials we ...

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place. My app was built using: t3-stack: v6.2.1 - T3 stack Next.js: v12.3.1 jest: v29.3.1 Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-j ...

Verify the presence of plain ASCII text

I need to verify if the file uploaded is in ascii plain text format. Can you suggest a method? $("#my_file").change(function(){ //alert if file is not ascii plain text }); <input type="file" name="my_file" id="my_file" /> ...

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

Finding the perfect pairing: How to align counters with objects?

public counter = 0; x0: any; x1: any; x2: any; x3: any; x4: any; next(){ this.counter += 1; this.storage.set("Count", this.counter); console.log(this.counter); this.logic(); } logic(){ //automatic counter here var xNum = JSON.parse(JSON.stri ...

Tips for resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on th ...

Vue composable yields a string value

I am currently using a Vue composable method that looks like this: import { ref } from 'vue'; const useCalculator = (num1: number, num2: number, operation: string) => { const result = ref(0); switch (operation) { case 'add& ...

The calculation of Value Added Tax does not involve the use of jQuery

My form setup is as follows: <form method="post" action="" id="form-show"> <table class="table table-bordered table-striped table-hover" id='total' style="width:100%;"> ...

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

PHP variable missing "+" sign at the end after post operation

I have encountered a unique problem that I cannot seem to find anywhere else. My issue lies in adding grades ending with a plus sign, such as B+, C+ or D+. I am able to add grades like A-, B-, C- and D- without any problem, but when it comes to adding a g ...

Have the functionality of right clicking and selecting Paste work in the input field using style=text and a button

Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#submit').prop('disabled', true); $('#links').change(function() { $('#submit').prop('disabled ...

Encountering issues when making API calls from a .NET program

I'm encountering an error when trying to call an API from a .NET application: "Script7002:XMLhttpREQUEST:Network Error 0x80070005, Access Denied." Interestingly, I am able to get the correct response when testing the API with the "Advanced Rest Cl ...

Nested Async await within a timer is failing to provide the expected result

Currently, I am working on testing the responses of endpoints using Mocha and Chai tests. Below you can find the code snippet for the same: async function fetchUserData (userId) { let response; let interval = setInterval(async () => { ...

The getter method in the Vuex store object seems to be returning varying values when accessing nested properties

Currently, my Vuex store is being used to store a user object. This code snippet is a getter function for the user object: getters: { user: (state) => state, isAuthenticated: state => { console.log("user object", state); ...

Tips for preparing an application to be compatible with the 'ovrweb' protocol for viewing in Gear VR

I've been working on a web app that utilizes ThreeJS and I'm currently in the process of trying to integrate WebVR for use with Gear VR. My understanding is that in order to open my web app in Gear VR, I need to utilize the ovrweb protocol. Howe ...

Expo running into issues with recognizing .jsx files when using Jest

I'm encountering an issue with running jest to execute its test suite on .jsx files within my Expo project. Here is my babel.config.js: module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], }; ...

Logging entire line syntax along with string output for debugging purposes

In my Vue.js application, there is a method that I have implemented. It goes like this: methods: { searchFunction(helper) { //helper.addFacetRefinement('deal', 'deal').search(); helper.addFacetRefinement('pri ...

To ensure the next line only runs after the line above has finished executing, remember that the function is invoked in HTML

my.component.html <button (click)="refresh()">Refresh</button> my.component.ts refresh() { let self = this; self.isRefresh = true; //1st time self.getfun().then(() => { self.isRefresh = false; ...

Reconnecting the bone: A guide to reestablishing the mesh skeleton in Three.js after rebind

I am facing a challenge where I need to independently rotate bones on a rigged hand mesh along the global axis using direction vectors to calculate their orientation. To tackle this, I have developed the following code: function boneLookAtLocal(bone, posit ...