Enhance Your Scene with Three.js Object Layering

Currently, I am showcasing three objects on the screen that can be selected by a click (I am only changing their color upon clicking at the moment). My goal is to have the selected object come to the forefront of the camera when left-clicked (including rotating and scaling it in a smooth animation). Alternatively, when the user right-clicks on the screen, the object should return to its default position.

I have tried searching online for terms like zoom object and focus object, but haven't found any solutions that fit my specific scenario as described above.

If anyone could provide me with some basic concepts on how to achieve this using THREE.js, I would greatly appreciate it.

Thank you, ZB

javascriptwebglthree.js

Answer №1

The issue you're facing is the inability to zoom in on the object. You have two possible solutions: either zoom in the camera or move the object closer to the camera. First Option "Zoom In Camera":

if ( intersects.length > 0 ) {
    // adjust camera position with some margin
    camera.position.z = intersects[0].object.position.z - 100;
    camera.position.x = intersects[0].object.position.x;
    camera.position.y = intersects[0].object.position.Y;
}

Second Option "Bring Object Forward":

if ( intersects.length > 0 ) {
    // reposition the object
    intersects[0].object.position.z = camera.position.z - 100;
    intersects[0].object.position.x = camera.position.x;
    intersects[0].object.position.y = camera.position.y;
}

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

How can I seamlessly combine CoffeeScript and TypeScript files within a single Node.js project?

When working on a server-side node project utilizing the standard package.json structure, what is the best way to incorporate both Coffeescript and Typescript files? It's crucial that we maintain the availability of npm install, npm test, and npm sta ...

javascriptnode.jscoffeescripttypescriptpackage.json

What steps should I take to create a React component in Typescript that mimics the functionality of a traditional "if" statement?

I created a basic <If /> function component with React: import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | nul ...

javascriptreactjstypescript

Customizing the start and end dates of months in PHP: A step-by-step guide

My pay cycle starts on the 26th of the previous month and ends on the 25th of the current month. For example, for February 2016, the pay cycle would be from January 26 to February 25. I am looking for the following output: $date = '2014-02-27'; ...

javascriptphpmysql

Ways to detect when the window printing process has been completed

Within my application, I attempted to generate a voucher page for the user using the following code: var htm ="<div>Voucher Details</div>"; $('#divprint').html(htm); window.setTimeout('window.print()',2000); The &apo ...

javascriptjquery

Guide to resetting all ReactiveVars to false in Meteor JS

I am currently working on a recipe template where I am using {{#each recipes}} to render the recipes. I have implemented ReactiveVar to toggle the edit form of each recipe from hide to show. Everything is functioning correctly, but I want to ensure that ...

javascriptmeteor

Ways to display varied JSON information on a component in Angular 4

I am facing a challenge with a reusable component that fetches data from a JSON file. I want to customize the data displayed when this component is used as a subcomponent within other components. For example, let's say we have a Banana component: @U ...

javascriptjsonangular

Transforming Attribute Directives into Elements in Angular 2

I've been trying to wrap my head around this Attribute Directive feature in Angular 2. Initially, I thought that directives could only be created using Attributes, but after some experimentation, I realized that I can also create directives using Ele ...

javascriptangularangular-directive

Exports for Express Router Module/Functions

I am currently working on exporting a function and an express router from the same file. The function is intended to verify certificates, while the route is meant to be mounted on my main class for other routes to use. I want to encapsulate both functional ...

javascriptnode.jsexpressexpress-router

Using regular expressions, you can locate and replace the second-to-last instance of a dot character in an email address

I'm looking to replace the second last occurrence of a character in a given string. The length of the strings may vary but the delimiter is always the same. Here are some examples along with my attempted solutions: Input 1: james.sam.uri.stackoverflo ...

javascriptjavaregextypescriptalgorithm

JavaScript form not working on submission

When my form is submitted, a function is called that successfully redirects users on desktop to either the download-confirmation or download-failure page. However, when testing on mobile devices such as iOS and iPad, the redirection does not seem to work. ...

javascripthtmljqueryajaxforms

What occurs when the update function returned by React.useState() is invoked?

Just recently, I delved into the world of React hooks and decided to implement a small feature using them. The feature enables hidden texts to be displayed when users click on hyperlinks. Although I managed to make the code work, it appears that there are ...

javascriptreactjsreact-hooks

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

javascripthtml

Ensuring the Presence of Component Props in Styled Components

I have a dilemma with a component that accepts a prop to render another component. Here is the setup: const IconBase = styled.div` // CSS Styles Here `; const Icon = props => ( <IconBase> <props.name /> </IconBase> ); This ...

javascriptreactjsstyled-componentsreact-component

"Set a timeout for an HTML markup to be displayed in an AJAX

Is there a way to automatically hide the success message that appears after an AJAX request is successful? For example, after 2 seconds of displaying the message, I want it to disappear. Here's the code I have: $.ajax({ url : 'process/regis ...

javascriptajax

How to Use Javascript to Dynamically Calculate Table Heading Widths (Assigning PHP Data to Javascript Variables)

I'm currently working on a project to create a dynamic table with headings that are split equally across the required number of columns (stored in the PHP variable "$numberofcolumns"). Could someone assist me in adding the necessary code to calculate ...

javascriptphpdynamicwidth

Choosing a button value from a form in Selenium: Best practices

I am looking to streamline the process of registering for classes. The snippet of HTML code on the page appears as follows: <form id="SearchClasses" name="selectedStatusForm" action="/more/SearchClasses.action" method=&quo ...

javascriptpythonselenium

How to bypass CORS restrictions in XMLHttpRequest by manipulating HTTP headers?

Currently experimenting with the (deprecated) Twitter API 1.0 For instance, I am interested in retrieving data from the API utilizing AJAX browser requests on cross-origin web pages. This could be a new tab, a local HTML file, or any established website. ...

javascriptajaxhttp-headerscross-domaincors

Assign a class to an element depending on its position using JavaScript/jQuery

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> How can I use jQuery to add a class to the second li element in the list without using an existing class or id? ...

javascriptjqueryhtml

Manually update the DOM rather than depending on React's reconciliation process

Creating a React component that wraps a complex rendering API is my current goal. This specific API has the ability to render a plot into HTML+SVG and also offers functionality to update the plot with new data efficiently. I am keen on utilizing this updat ...

javascriptreactjs

Javascript - How to manipulate double values without using floating points?

What kind of variable is recommended for performing calculations on double values without floating point errors? For example, if we have x = 0.6; We want to ensure that x*3/4 will result in 0.45 instead of 0.44999999999999996. ...

javascriptjavascript-objects