Tips for concealing protruding sections of 3D shapes behind intricate 3D models

Currently, I am working on rendering a complex 3D mesh using Three.js (an iliac bone) and including some simple spheres to mark specific points on the surface where muscles would attach.

However, I have encountered an issue where the markers protrude out the back in areas where the mesh is thin.

In this scenario, I can assume that the marker coordinates are always closer to the front face of the mesh than the back face. Additionally, the spheres will display more surface area/volume on the front of the mesh compared to the back.

Is there a way to automatically hide the parts of the markers that extrude from the back without manually adjusting them for each marker?

Edit: One potential solution I thought of involves several steps. I would appreciate feedback on the viability of this approach as well as guidance or code examples to implement it:

  • For each marker sphere:
    • Determine all faces of the mesh that intersect with the sphere
    • Calculate outward-facing normal vectors of those faces (vertex-normals? face-normals?)
    • Compute distances from the center of the face to the center of the sphere
    • Combine all normal vectors, weighted by their respective distances
    • Based on the normalized result vector, conceal the hemisphere pointing in that direction

I am unsure about how to proceed with coding these steps and whether this proposed method is practical. Any advice or suggestions would be greatly appreciated.

javascript3dthree.jsintersectionmesh

Answer №1

Instead of creating full spheres, try drawing hemispheres instead. Utilize the phiStart and phiLength parameters within the SphereGeometry constructor.

Ensure that the centers of the spheres remain on the bone surface (a vertex).

Define the orientation of a sphere using the calculated normal at the sphere origin.

In Three.js, normals are automatically computed for meshes to determine how light interacts with them. To visualize normals in your mesh, utilize the VertexNormalsHelper:

var bone = ...; // bone mesh
var scene = ...; //your THREE.Scene
scene.add(new THREE.VertexNormalsHelper(bone));

The source code for VertexNormalsHelper can be accessed here: VertexNormalsHelper

To align your sphere perpendicular to the local bone surface, calculate the angle difference between the normal vector and the oZ axis to obtain difX and difY. These angles represent the necessary rotations in the X and Y directions.

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

Blackberry Browser's Window.Opener Feature

Does anyone else experience issues with the blackberry browser(5.0) and the javascript window.opener function? I couldn't find much help on Google regarding this problem. We have a pre-existing website that successfully populates parent window form f ...

javascriptmobileblackberrycross-browser

Verification of user input field

For this mini deposit app, I needed to implement validation for the input field to check for three different conditions: no blank entries, only numerical values, and no negative numbers. Despite having the functionality, my attempts at implementing validat ...

javascriptreactjsbootstrap-4

Explore the extensive JSON link for redirecting

I have an issue with accessing the HATEOS link example on PayPal. My browser is showing a syntax error when I try to access the link. SyntaxError: missing ) after argument list [Break On This Error] alert(links.1.href); (line 32, col 15) The JSON d ...

javascriptjqueryjsonpaypal

Using Selenium webdriver to assign a JSON object to a paragraph element

What is the correct way to insert a JSON object into a p tag inside an iframe? I attempted the following approach but it displayed the text "[object Object]" rather than the actual content of the object... This is my implemented code: var arrJSON = [ ...

javascriptjsonselenium

Utilize SCSS values within TypeScript by applying them on a class level

let changeClassDisplay = document.getElementsByClassName('sidebar'); for (var i = 0; i < changeClassDisplay.length; i += 1) { changeClassDisplay[i].style.display = 'block'; } I encountered an issue with this code whe ...

javascripthtmlcsstypescriptsass

What is the best way to incorporate my CSS file into an HTML file when using Express?

When I try to host my html file using Express, it seems that my CSS is not getting applied. Why is this happening and what is the best way to include my CSS file with Express? const express = require('express'); const bodyParser = require('b ...

javascriptnode.jsexpressbackend

What is the best way to execute operations on two distinct datasets within a single function using RxJS?

Is there a way to perform operations on two separate data collections within a single function in RxJS, returning an observable instead of void? This function is located within a service and I intend to subscribe to it from my component. I believe some re ...

javascriptangularrxjsrxjs-observables

It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue. <div class="progressbar"> <div class="progressvalue" data-percent="50"></div> </d ...

javascriptjqueryhtmlcss

Looking to attach a listener to an element within a modal once it has finished rendering?

Upon clicking a button, a modal window appears. The controller assigned to the modal contains a list of element IDs that need listeners assigned. However, when the controller initializes, the modal has not yet rendered, causing the elements requiring liste ...

javascriptangularjsbootstrap-modal

Utilizing Node Js and Selenium webdriver, what is the process of dragging and dropping an element from its current position to a new position just below it?

After multiple attempts, I have come to realize that the following code is ineffective. driver.findElement(By.xpath(xpath)).then(function (element1) { driver.findElement(By.xpath(xpath)).then(function (element2) { ...

javascriptnode.jsselenium-webdriver

Halt execution of routes using backbone.js

Is it feasible to halt route execution within backbone.js solely using the router? I understand there is a callback function for each route where I could verify if routing is permitted, but I am unsure how to prevent execution based on a property (such as ...

javascriptmodel-view-controller

Leveraging backstretch.js in combination with blur.js (or equivalent)

Query Update I provided a response to the query below, however, I am experiencing some lag and a noticeable stepped transition between images. Can anyone offer advice on how to optimize this issue? Perhaps it would be better to go back to using a static ...

javascriptjquerycssbackground-image

Angular/JS encountered a premature end of program unexpectedly

I am taking my first steps in the world of web development with Angular (and JavaScript in general). I have been trying to rewrite some basic and common examples using Angular. One thing I attempted was to display a simple message using data binding. This ...

javascriptangularjs

Transfer a GET parameter from the URL to a .js file, then pass it from the .js file to a

Hey there, I'm currently using a JavaScript file to populate my HTML page with dynamic data. The JS file makes a call to a PHP file, which then fetches information from my SQL database and echoes it as json_encode to populate the HTML page. The issue ...

phpjavascriptjqueryhtmlajax

How can we use SWR to fetch user data conditionally based on their logged-in state?

I am facing an issue with setting the UI state based on whether a user is logged in or not. The UI should display different states accordingly. I am currently using SSG for page generation and SWR for user data retrieval. However, I noticed that when call ...

javascriptreactjsauthenticationnext.jsswr

How can I pan/move the camera in Three.js using mouse movement without the need to click?

I am currently working on panning the camera around my scene using the mouse. I have successfully implemented this feature using TrackballControls by click and dragging. function init(){ camera = new THREE.PerspectiveCamera(45,window.innerWidth / windo ...

javascriptthree.js

What is the best way to retrieve a variable from MySQL in a Node.js environment?

var result; function getName(id) { //Retrieve name from database connection.query(`SELECT name FROM users WHERE id = "${id}"`, function (err, rows, fields) { if (err) console.log(err); result = rows[0].name; }); console.lo ...

javascriptmysqlnode.js

Unable to locate the identifier 'BrowserWindow'

In the providers folder of electron.service.ts, I have the following code: import { Injectable } from '@angular/core'; // If you import a module but never use any of the imported values other than as TypeScript types, // the resulting javascrip ...

javascriptangularelectron

What steps can be taken to resolve the delay in transition when clicking on "read less

I implemented a transition effect for the Read More and Read Less buttons, however, there seems to be a delay on the transition when clicking on the Read Less button. This delay was not intentionally set by me. How can I resolve this issue and also apply a ...

javascriptcssreactjs

Is it possible to transfer a value when navigating to the next component using this.props.history.push("/next Component")?

Is there a way I can pass the Task_id to the ShowRecommendation.js component? recommend = Task_id => { this.props.history.push("/ShowRecommendation"); }; Any suggestions on how to achieve this? ...

javascriptreactjsroutesurl-routingreact-props