What is the best way to use Three.js to translate an object within a defined plane?

While exploring the example provided on the website (), I noticed that they are moving the selected cube along a plane relative to the camera using unprojection with raycaster. However, I am struggling to understand how to configure this setup so that the object always moves along the ground (plane) regardless of the angle of the camera. The main goal is to enable users to use the mouse to move the object along the ground even if the camera is not directly above it. Being new to Three.js, I would appreciate a detailed explanation of what I might be overlooking or missing. Feel free to ask clarifying questions if needed.

My current project resembles the following image, and my aim is to manipulate the boxes using the mouse:

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

javascript3dthree.js

Answer №1

The following code snippet demonstrates how to generate a plane and continuously adjust it based on the movement of the camera:

plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(plane.normal), INTERSECTED.position);

Rather than using the previous method, consider initializing the plane like this:

var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);

This will create the XZ plane centered at the origin.

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

JQuery Form Submission Failing to Trigger Controller Function

Attempting to submit a form in a JSP using JQuery/AJAX to call a method in a Spring Controller. The JSP structure is as follows: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> < ...

javascriptjqueryajaxspring-mvcajaxform

The "DELETE" method in ajax is malfunctioning

I encountered an "internal server error (500)" in the console. When checking my NodeJS console, I received a "ReferenceError: request is not defined" message. Below is the code snippet that caused the issue: $(document).ready(function(){ $('.dele ...

javascriptnode.js

fade out row upon successful deletion using ajax

My code includes an AJAX function to delete items by row. In my table, there is a column with the action to perform the deletion. Here is the AJAX function: //delete detail function deleteDetail(id_po_req_detail) { var tr = ...

javascriptjqueryajax

Fiddler is indicating that my JavaScript file cannot be found, despite the fact that it is present and functioning correctly as anticipated

In Default.aspx, I have added the following line to my javascript file: <script type="text/javascript" src="../../MyFiles/JavaScript/JavaScript.js" ></script> When testing the website using Fiddler, I repeatedly receive a 404 error indicatin ...

javascriptasp.netfiddler

Utilizing i18n's useTranslation and Redux's connect Higher Order Components to export components efficiently

My application has been utilizing Redux for quite some time, with the component exports structured like this: export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); Now, I am integrating an i18n translation library and would like to use ...

javascriptreactjsreact-reduxi18next

Basic math tool using JSP/Servlet combination and Ajax

I have a follow-up question to my previous inquiry on Stack Overflow. I believe this topic deserves its own discussion due to the thorough response I received. My goal is to develop a straightforward calculator using JSP. The calculator will include two t ...

javajavascriptajaxjspservlets

Troubleshooting: InnerText not being retrieved in Mozilla Firefox

Check out my JavaScript snippet: function chooseRow(objTR) { for (i = 0; i < ddlModalityList.options.length; i++) { if (ddlModalityList.options[i].text == objTR.cells[1].innerText.trim()) break; } ddlModalityList.options[i].selecte ...

javascriptasp.netfirefoxcross-browser

Is it achievable for a modal popup to automatically move to a specified location?

I need assistance with... Is it feasible to display an external webpage within a modal window and have that page automatically scroll to a specific section (such as an anchor point)? ...

javascriptjquery

This function is designed to only work under specific conditions

Looking for assistance with a function that takes an item ID as input and changes its border when pressed. The goal is to increase the border width by 2px when there is no border, and remove the border completely when pressed again. Currently, only the f ...

javascript

handlebars.js template to check the condition based on the last item in an array

I am currently utilizing handlebars.js as my templating engine and am interested in creating a conditional segment that will only display if it happens to be the final item within an array located in the templates configuration object. { columns: [{< ...

javascriptarrayshelperhandlebars.jstemplating

Different ways to initialize objects in JavaScript (constructor overloading)

Within my Account_Model.js model, I have a set of queries that handle creating, reading, updating, and deleting user accounts (CRUD operations). The constructor I currently have requires passing in parameters such as username, fullname, and password for cr ...

javascriptnode.jsoopexpress

The model.find operation is failing to retrieve the necessary fields from the database

When I execute console.log(correct.password), it returns undefined, even though the if condition results in false. app.post('/login' , async (req , res)=> { const correct = data.findOne({name : req.body.name}).select({name : 0}); if(!c ...

javascriptnode.jsmongodbmongoosefind

Issue with using Sinon FakeServer with Mocha

I'm currently in the process of setting up a test for an API call. In my attempt to create a fake server within the before method, I have encountered issues with testing the basic implementation using $.ajax compared to my actual api call. Strangely, ...

javascriptajaxmocha.jssinon

Sort columns in a MUI datatable

I am facing an issue with sorting in a column that represents an object. Although I can display the desired value, the sorting functionality does not seem to work for that particular column. Here is an example to provide better clarity: const [data, set ...

javascriptreactjstypescriptmaterial-uimui-datatable

The use of pattern fill in fabric.js is causing a decrease in rendering speed

I recently attempted to create a clip mask effect on a large image by using the picture as a pattern and setting it to the svg paths that support the desired shape. You can view the slow-loading jsfiddle example here: http://jsfiddle.net/minzojian/xwurbw ...

javascripthtmlsvgfabricjs

Leverage the power of jQuery datetime picker in an ASP.NET content page with a repeater control

Can anyone help me with adding a javascript tag to a content page of my asp.net application? The script is working fine with html tags, but it's not functioning properly within the content. Here is the code snippet that displays a datetime picker: &l ...

javascriptc#jquerysqlasp.net

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...

javascriptphpjqueryhtmlajax

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

Creating PDFs with Vue.js from HTML sources

Looking for a way to generate PDFs and insert variable values in specific locations for an order confirmation on my website. Planning to store the generated PDFs on Firebase Storage. Any suggestions on libraries or methods to achieve this? Is it possible ...

javascriptvue.jspdf

What are the best practices for running node in VSCode?

$ node test.js internal/modules/cjs/loader.js:883 throw err; ^ I have exhausted all possible solutions, including checking the PATH route for Node.js, restarting, and using different files. Despite the fact that I am able to retrieve the version when ...

javascriptnode.jsvisual-studio-code