Dividing a model using three.js

Imagine you have a basic raycaster set up. When you hover over it, the model illuminates.

In this scenario, the model is broken down into separate parts, each its own "model" within the larger whole. For instance, think of a car model - when you hover over the hood, it lights up; when you hover over the door, it lights up, and so on. I couldn't find an example of this type of setup in the three.js examples.

Is there a method in three.js to split a complete .obj model into various individual yet interconnected models?

javascriptthree.js

Answer №1

Although I have amassed considerable experience with threejs, I believe that achieving this particular task may not be feasible solely with threejs itself (perhaps WebGL offers some tools that could be useful, but even then, rendering a complex model like a car may still yield subpar results). That being said, there are a few workarounds to consider.

  1. Within threejs, construct your model from smaller components. This approach works well for simple shapes (for example, creating two hemispheres instead of a single sphere and positioning them side by side).

  2. Instead of relying on a raycaster, utilize a point light. By directing the light onto an area rather than the object itself, you can selectively illuminate different parts of a large object based on the point light's intensity and distance.

  3. For intricate models like a car, import the model into a 3D modeling program (such as Blender) and divide it into smaller parts. Save each part individually, then in your threejs code, load and position each part to create the illusion of a unified object (a method that may be the most practical solution for this scenario).

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

Adjusting canvas size to match content dimensions

I posed a similar inquiry and it was categorized as a duplicate even though the suggested duplicate did not provide an answer to my question. Edit: The purported duplicate was [stackoverflow.com/questions/17211920/make-canvas-height-auto][1] I am utilizi ...

javascriptjqueryhtmlcanvas

Issue with jQuery selector not updating when variable changes

'I am attempting to create a functionality where a function is triggered upon clicking the "hit" class, but only when the correct parent "box" id is selected. var currentSelection = 1; $('#box-' + currentSelection + ' .hit'). ...

javascriptjquery

Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Here is an example of an array of objects: "followers": [ { "id": "1be87842-2f7f-4e3b-8fde-9a998feb3a01", "bug_id": "4ae2707b-07ef-4e07-95da-77855c67fece", "user_id": "e9e81aa2-4994-483d-a3a7-3b88491f1fda", ...

javascriptvue.jsecmascript-6vuejs2vuex

The Threejs Raycaster detects collisions with objects even when the ray is just grazing the surface

Within my Vue component, I have integrated a threejs scene and I am facing an issue with selecting objects using the mouse. I am currently using the OnPointerDown event and raycaster to locate objects under the mouse pointer. However, it seems like the ray ...

typescriptvue.jsthree.js

Using DefaultSeo does not override NextSeo in every component

I am looking to dynamically change the Head tag using next-seo. While browser validation will show NEXTSeo for individual pages, Twitter, Firebase's card validation tool, and others will default to next-seo-config.js. Does anyone have a solution? S ...

javascriptreactjsnext.jsmeta-tags

What is the best way to calculate the days, exact hours, and exact minutes between two dates using JavaScript?

I need assistance with calculating the number of days, hours, and minutes between a start date time and an end time. For example: Start Date Time = "09-06-2017 10:30" End Date Time = "10-06-2017 11:45" I am looking for the result to be 1 day, 1 ...

javascriptjqueryangularjsmomentjs

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

The AJAX request fails to trigger following the onbeforeunload event except when the page is manually refreshed

I'm currently working on implementing a solution for handling the onbeforeunload event to display a custom message when the user tries to close the browser tab. I want a prompt like: Are you sure you want to leave this page? (I don't want to use ...

javascriptjqueryajax

Display/Conceal Dropdown Menu for Combobox Using only Javascript

In my asp.net user control, I am generating markup that looks like this: <div id="combobox1"> <div id="combobox1_text"><span>combobox 1</span></div> <div id="combobox1_ddl"> <input type="checkbox" id="combobo ...

javascriptasp.netcomboboxuser-controls

Tips for accessing the initial element of an array, storing it in a state, and sending it to a component

Is there a way to access and store the first object from the response data in a state? I attempted to achieve this by utilizing setData and assigning the first object of the data to it: export default function BuildingsDetail({buildingId}) { const [data ...

javascriptarraysreactjsreact-nativeobject

The Kendo grid row mysteriously vanished while trying to edit it immediately after inserting a new row

I have configured a Kendo grid in the following manner, but I am encountering an issue where after adding a row, it disappears when I attempt to edit it before sending the changes to the server. However, upon refreshing the page, the row reappears. Any i ...

javascriptkendo-uikendo-grid

The player clicks once and the game is played two times

Struggling with a coding issue here. I've got some code where you click on an image and if it can be moved to the next cell, it should move. function changecell(a){ var moved=false; if(a%3 !=0) { if(ij[a-1]==0) { moved=true; ...

javascripthtml

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

Is there a way to trigger a tag when the user shares their location with the browser? I attempted using the following code within a custom JavaScript variable in my GTM Container, but it didn't seem to work. navigator.permissions && navigator ...

javascriptgoogle-tag-manager

Exploring the intersection of JavaScript and PostgreSQL: Leveraging timezones and timestamps

I'm a bit confused about how to properly use timestamps. For example, when a user creates an article, they can choose a PublishDate, and the system also automatically stores a CreateDate. a. Should I make both PublishDate and CreateDate timestamps wi ...

javascriptnode.jspostgresqldatetimetimestamp

Disallowing selection on input text field

I am seeking to disable selection on an input field while still allowing for focusing, with the following criteria: Preventing selection via mouse Preventing selection via keyboard (including Ctrl+A, shift+arrows) Permitting focus on the field using both ...

javascriptcss

Obtain the total number of result entries

I'm working on a project involving JS and PHP. My goal is to call a PHP file using Ajax and have it return the count of result lines. I use echo for this: $connection = new PDO($source, $user); $query = "SELECT * FROM scores WHERE username = '" ...

javascriptphpajax

Does the webworker function as a multi-thread?

For example: worker.postMessage(data1); worker.postMessage(data2); If there are multiple issues to be dealt with inside the web worker, would worker.postMessage(data2) block before completing data1? ...

javascripthtml

The absence of PHP GET variable being set

I am encountering an issue with my registration php class. It is designed to display a form and upon clicking the registration button, it triggers a function in a login javascript file. This JavaScript file utilizes ajax to send data to an index.php file. ...

javascriptphpjqueryajaxhtml

Would it be beneficial to upload and download an image using the same ajax call?

I recently made a change to my web app's image upload feature. Previously, the process involved uploading an image, retrieving the image URL, and then making a second request to download the image from the URL. Now, I have streamlined it so that when ...

javascriptjqueryajaximageserver

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...

javascripthtmljavascript-objects