Encase a threejs mesh within another mesh

Having recently delved into the world of three.js, I find myself faced with a unique challenge. I need to wrap one mesh around another, which happens to have a curve. In my scene, I have three meshes named plane1, plane2, and the base mesh (ellipsoid) respectively.

https://i.sstatic.net/HbEFP.png

https://i.sstatic.net/H7uN1.png

I am seeking a way to project plane1 and plane2 onto the base mesh so that they conform to its curved surface. If the base were simply a cuboid, positioning the planes on its flat surfaces would suffice. However, due to the curvature of the base mesh, I am encountering difficulties. Is it feasible in three.js to project meshes onto another mesh in this manner?

https://i.sstatic.net/npfxi.png https://i.sstatic.net/cfgBt.png

javascriptthree.jsmesh

Answer №1

If you want to "project" a mesh onto another mesh's surface, you'll need to utilize raycasting to trace from the exterior towards the ellipsoid's center. By using a raycaster, you can determine the intersection position. Assuming the ellipsoid is situated at coordinates (0, 0, 0), you can implement the following:

// Define the desired outer position vector
var startPoint = new Vector3(10, 5, 0);

// Normalized vector pointing towards the ellipsoid center 
// (inversely proportional to startPoint)
var endDirection = new Vector3(-10, -5, 0).normalize();

raycaster.set(startPoint, endDirection);
var intersects = raycaster.intersectObjects( ellipsoid );
console.log(intersects);

The variable intersects will contain an object in this format showing the resulting interception point (x, y, z).

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

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

I'm facing a challenge that I need help with: My HTML/CSS layout currently looks like this: Screenshot of how my CSS/HTML appears on the screen upon page load: As I scroll down, I encounter a green element: While scrolling down -> Upon further s ...

javascriptjqueryhtmlscrollscreen

How can I implement the dynamic loading of components using the Vue 3 composition API?

My goal is to dynamically load a component with the name retrieved from the database, however, I keep encountering the error [Vue warn]: Component is missing template or render function. import SimpleQuestions from '@/components/SimpleQuestions.vue&ap ...

javascriptvue.jsvuejs3vue-component

Modal feature malfunctioning in web browser

My function is not working in the mobile browser, but it works on desktop. I'm not sure why this is happening. Has anyone experienced this before? $('body').on('click touchstart', '.show_range', function(event) { alert(" ...

javascriptphpjquery

JS Equal Heights is a JavaScript plugin designed to ensure

Good evening, A while back, I implemented a JavaScript code snippet to create equal height columns on my website. The initial script looked like this: <script type="text/javascript"> var maxHeight = 0; $(".level").each(function(){ maxHe ...

javascriptphpjquery

Choose an option using jQuery with the ability to navigate to the previous or next

I encountered a bug when I tried to click the next or previous button. Below is the HTML code snippet: $("#nextPage").click(function() { $('#pagination option:selected').next().attr('selected', 'selected'); console.log( ...

javascriptjqueryselecthtml-select

What is the process for accomplishing a Node.js redirection with an HTTP POST request?

I have set up app.js to route all requests to my controller.js. Here is an example of what my controller.js code looks like. router.all('/Controller/:id', controller); function controller(req, res){ // Check database using the ID in the URL ...

javascriptnode.jsexpress

How can I craft a customized lightbox with dynamically generated content?

I am currently developing a Twitter fetcher application and have encountered some issues with the scrolling functionality, particularly due to oversized images. I would like to implement image restrictions similar to what Twitter uses. https://i.sstatic.n ...

javascriptjqueryhtmlcsslightbox

When navigating the website with Playwright, facing the issue of not being able to utilize storageState

Trying to utilize playwright setup and pre-authenticated users for running tests, encountered an issue where the storage file is set but not being utilized by playwright. Below are the codes used: auth.setup.ts import { test as setup, expect } from " ...

javascriptnext.jsplaywrightplaywright-testplaywright-typescript

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

javascripthtmlreactjsascii

The Meteor update is unsuccessful on the Mongo Sub Collection and will not continue

I am currently facing an issue with updating a specific object within an array in my object based on a value. Whenever I try to add the update code, the function gets stuck at that point without proceeding further. None of the console.log calls after the u ...

javascriptnode.jsmongodbmeteor

Executing two asynchronous functions successfully

I encountered a scenario where I initiate the creation of a new user through an ajax call, and once the user is successfully created (server responds with 200), I immediately proceed to update the user using another ajax request. Currently, my approach in ...

javascriptjqueryajax

Discovering the names of files in a directory with Angular

Looking for a solution in Angular JS within a ModX app to retrieve file names from the gallery package every time it is updated. Is there a way to achieve this using Angular? I've been searching for Javascript solutions to this issue, but most of the ...

javascriptangularjsmodx

Validate in React whether a key pair exists in the state based on a given parameter

I'm grappling with the challenge of optimizing my application by consolidating multiple dialog window functions into a single function. Currently, I have separate functions for each dialog window that toggle their state: toggleSettingsDialogue = () = ...

javascriptreactjsecmascript-6babeljs

Populate various input fields upon choosing an option from a dropdown list

I'm trying to set up a dropdown menu with multiple options, where selecting an option triggers certain input fields. However, I haven't been able to achieve the desired outcome. Can someone assist me with this, preferably using VanillaJS? Thank ...

javascripthtmlselectinputdropdown

AngularJS: Tips for bypassing filtering when inputting values outside of the range [1,2,3,4]

Is there a way to prevent filtering when entering certain numbers in the text box, like 0 or 5? <div ng-app=""> <input type="text" ng-model="search"> <div ng-repeat='val in [1,2, 3, 4] | filter:search'> {{val}} </div> ...

javascriptangularjs

The local server is having trouble loading JavaScript

I've been troubleshooting a sleek menu design, and I'm puzzled by why it's not working on my localhost. It functioned perfectly when tested on this Codepen. However, after transferring the code to my localhost, it stopped functioning. I&apos ...

javascriptcssvue.js

Experience the seamless integration of Restful APIs with AngularJS and Querystring parameters

I am currently in the process of developing a web application that includes edit functionality. Currently, I have created a page with a list of records, each containing an ID. When I click on the edit button, it triggers the following: $state.go ...

javascriptangularjsexpress

Enhancing IntelliJ IDEA's autocomplete functionality with JavaScript libraries

Is there a way to add my custom JavaScript library to IntelliJ IDEA 10.5 or 11 for autocomplete functionality? I want to specify that IDEA should recognize and suggest auto-completions for objects from my library. While it sometimes works automatically, ...

javascriptintellij-idea

Tips on maintaining the Parent menu in a hovered state when the mouse is over the child menu within a Dropdown Menu

I have been working on creating a dropdown menu that functions correctly. However, I am facing an issue where the top menu, when hovered, turns white, but as soon as I move down to the submenus, the top menu reverts back to its original color. Is there a ...

phpjavascriptjquerycss

How can I modify certain attributes within an array of objects?

https://i.sstatic.net/TKkcV.jpgI need help with updating properties within an object array. Below is my code for reference. I have an object array consisting of two arrays, where the first one contains attribute "first" and the second one contains "last". ...

javascriptcssarraysreactjsobject