Restrict the movement of an object in Three.js to stay on the surface of another

My goal is to be able to drag an object and have it snap to the surface of another. Whether it snaps upon release or updates live doesn't matter to me.

The ultimate objective is to create a smooth shape in Blender, import it, and enable snapping while dragging it. While I know how to achieve this with procedurally generated surfaces using some math, I am interested in applying this to non-procedurally generated surfaces that I haven't figured out how to generate yet.

I experimented with modifying the 'click' effect from this example: to a 'drag' effect. I then integrated it with this example:

The current setup allows me to drag cubes across the sphere and highlights the face as expected.

However, when trying to snap the dragged objects to the face of the sphere using the following flawed logic:

SELECTED.position.x = intersectsRay[0].face.normal.x;
SELECTED.position.y = intersectsRay[0].face.normal.y;
SELECTED.position.z = intersectsRay[0].face.normal.z;

The issue arises as the dragged objects always snap to the center of the sphere...

This is likely because the face 'normal' represents the center of the sphere in this scenario.

If anyone has any suggestions on how to determine the x,y,z coordinates of the FACE (regardless of its shape) or any alternative approaches to implement this idea, please let me know.

Answer №1

To simplify the process, consider using the vertex index instead of the local face normal when working with geometry.

Here is an example:

intersectedOBJ.geometry.vertices[intersect.face.a]

By doing this, you can align your object with one of the vertices of the face being interacted with.

In addition to this approach, you have the option of utilizing the face's "centroid" or calculating the center of the face manually.

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

Tips for aligning the text of a typography element in Material-UI when its parent is fixed

Introduction to Home Component const HomeComponent = ({ mode, setMode }) => { return ( <Box m={-1} sx={{overflowX:'hidden'}}> <Navber/> <Stack direction="row" spacing={2} justifyContent="space-be ...

The API is only returning three records, but the backbone collection is not syncing up with

I am working with an API that provides a JSON object of "Groups". Below is the PHP code for this: public function index() { $teams = new Team; $clients = new Client; $organisations = new Organisation; // Get the organisations $org = O ...

Utilizing Semantic-UI-React and Webpack to Set the Path for an Image

I am currently developing a ReactJS application using webpack. This basic example is supposed to display an <img> tag with a specified URL in the src attribute. How can I bundle the image resource using webpack and process it with the appropriate l ...

Recent Google algorithm changes impact websites built on AngularJS and JavaScript

Exciting news from Google today (May 28, 2014) - JavaScript content will now be rendered by the Googlebot itself! This means there's no need to worry about serving pre-rendered pages just for crawling purposes. You can find out more details on this an ...

Fetch operates based on the specified categoryId

Hey there, I'm currently in the process of learning JS and trying to fetch data from an API. I've successfully fetched all the work from api/works and displayed them in a div. Now, I'm looking to create 3 buttons that represent 3 categories ...

Ways to add stylistic elements to variables using JavaScript

I'm currently working on an API and I've managed to get it up and running, but now I'd like to add some style to it. I've been attempting to change the style for variables such as title, country, status, and summary but haven't ha ...

Ways to verify if the scroll bar of a user is not visible

Is there a method to detect if the user has forcibly hidden the scroll bar in the operating system? 1. Automatically based on mouse or trackpad 2. Always 3. When scrolling I want to adjust the width of an HTML element if the scroll bar is visible, which c ...

Executing axios within a JavaScript function without relying on global variables

I am currently exploring the usage of axios (https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js) in a function to communicate with my backend and retrieve data. The snippet of code provided is functional. Instead of relying on a global variable ...

Spinner Vue Displays while Loading Image from a URL

I am trying to display a loader spinner while an image is loading, but I am having trouble implementing this. Even after debugging and getting true and false values in the console, the spinner is still not showing up. <template> <div class=&q ...

Teaching how to utilize Express to send a blob object as a response

Currently, I am utilizing Express and TrueVault to store images on my server. When I receive a blob object from the TrueVault API, it appears as follows: { blob: Blob { [Symbol(type)]: 'image/png', [Symbol(buffer)]: <Buffer 89 . ...

Creating a Duplicate of the Higher Lower Challenge Game

To enhance my comprehension of React, I am constructing a replica of the website: Instead of utilizing Google searches, I opted for a dataset containing Premier League stadiums and their capacities. Up to this point, I have crafted the subsequent script: ...

Embed a script into an iframe from a separate domain

While experimenting, I attempted to inject a script inside an iframe element using the following method. However, since the child and parent elements do not belong to the same domain (and I am aware that XSS is prevented in modern browsers), I was wonder ...

Setting line chart data for Chart.js

Can you help me troubleshoot an issue I'm facing with creating a dataset for a line chart in Chart.js? Despite having an array of objects, the dataset isn't rendering correctly and I end up with two line charts instead of one. What could be causi ...

Using the THREE.js OrthographicCamera with the CanvasRenderer

I have recently started exploring THREE.js and I am currently experimenting with various combinations of renderers and cameras. So far, I have been able to successfully render a simple animation using either the WebGLRenderer with the OrthographicCamera o ...

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

Script for Grunt build that analyzes an XML document to identify the files that need to be duplicated

copy: { build: { cwd: 'app', src: ['**', '!**/vendors/**', '!**src/js/*.js',], dest: 'dist', expand: true } } When utilizing Grunt build scripts to create a distribution folder for the ...

There seems to be a problem with the text-to-speech API: It looks like there's a ReferenceError stating that

Currently, I am developing a program using the Quasar framework which is based on Vue and can be compiled for mobile using Cordova. However, I am encountering some issues when trying to run it on mobile. Below is the function causing problems: activat ...

Unable to call an object that may be 'undefined': Utilizing a function with a return object that includes asynchronous functions as properties

I have a function exported in my adapter.ts file: import type { Adapter } from "@lib/core/adapters"; export default function MyAdapter (): Adapter { return { async createUser (user: User) { ... }, async findUserByEmail (email ...

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

I have been working with the Responsive Slides jQuery plugin and made some custom modifications. Everything is going smoothly, but I am facing an issue with getting the pager and next/prev controls to fade in when hovering over the container. Although I s ...

What is the distinction between revealing environment variables in Next.js using the next.config.js as opposed to utilizing the NEXT_PUBLIC prefix?

As stated in the nextjs documentation, to make my environment variables accessible in the browser, I can simply prepend them with NEXT_PUBLIC in my .env.local file, like this: NEXT_PUBLIC_VAR=7 However, it seems that another approach is available where I ...