Exploring the concept of unprojection in three.js

Check out this jsfiddle example of what I am trying to achieve - seeing a 3D object drawn exactly behind the cursor as it moves across the screen.

http://jsfiddle.net/ksRyQ/3551/

unp = p.unprojectVector(new THREE.Vector3(  mx - (window.innerWidth/2), (window.innerHeight/2)-my, 0), camera)
//console.log(unp)
cur.position.x = unp.x;
cur.position.y = unp.y;
cur.position.z = unp.z/10; // dunno how to draw object with unp.z - it's too far and invisible

Why is the sphere appearing in a different location than expected? What adjustments need to be made for accurate positioning?

javascriptthree.js

Answer №1

Projector.unprojectVector() transitions from NDC space to world space, not following a linear path. If the z-coordinate of the point being projected is 1, the projected point will end up on the back-plane of the camera's frustum. Therefore, it is advisable to use a value slightly less than 1, such as 0.999.

Below is the recommended pattern for this operation:

vector.set( ( mx / window.innerWidth ) * 2 - 1, - ( my / window.innerHeight ) * 2 + 1, 0.999 );

p.unprojectVector( vector, camera );

cur.position.copy( vector );

If you wish to have more influence over the z-component of the projected point, you have the option to choose any point along the line segment connecting the camera position and the previously calculated projected point.

Experiment with the concept in this Fiddle: http://jsfiddle.net/ksRyQ/3566/

Implemented using three.js r.63

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

What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

e.target.parentNode will return this element. <div class="quantity"> <span class="glyphicon glyphicon-minus-sign"></span> <span class="product_Count"> 4 </span> <spa ...

javascript

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

I'm encountering an issue with my Typescript code where I am destructuring an object to extract a partial object, but it's failing the linter check. Here is the problematic code snippet: async someFunction(username: string): Promise<UserDTO> ...

javascripttypescripteslinttypescript-eslint

Create an Angular directive that highlights a div if any of its child inputs have focus

I've developed an Angular directive for a repetitive section containing form elements. My aim is to have the entire section highlighted whenever any input field inside it is focused. template.html <div class="col-md-12 employee-section"> <l ...

javascriptjquerycssangularjshtml

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...

javascripthtmlangularjs

Issue with the select element in Material UI v1

I could really use some assistance =) Currently, I'm utilizing Material UI V1 beta to populate data into a DropDown menu. The WS (Web Service) I have implemented seems to be functioning correctly as I can see the first option from my Web Service in t ...

javascriptreactjsmaterial-ui

Encountered an issue while setting up ng-circle-progress in Angular: Unable to find an exported member in

I am currently working on incorporating the ng-circle-progress functionality by referring to the documentation at https://www.npmjs.com/package/ng-circle-progress. Here is a snippet from the .ts file: import { Component } from '@angular/core'; i ...

javascriptangular

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

javascripthtmlcssangularjs

Having trouble obtaining outcomes from Cloud Code in Parse

After struggling with this issue for quite some time, I have reached a point where I feel the need to seek help. I am working on a cloud code function that is supposed to retrieve a list of categories along with their respective products. Each category con ...

javascriptparse-platformpromiseparse-cloud-code

You can submit a photo to a form as an attached file

I had a code that looked like this My goal is to simplify the process for users by allowing them to fill out additional information in a form without having to upload an image separately. I want to display the canvas image from the previous page in the fo ...

javascriptphphtml

Transforming the output of a PHP script from an HTML table into an ion-list format tailored for the Ionic framework

Currently I am working on an application built with the Ionic framework. I have developed a PHP file to retrieve 'Users' data from my database and it is currently being displayed in an HTML table format. In the services section of the framework, ...

javascriptjqueryangularjsajaxionic-framework

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

I have a pre-existing DOM element (let's say a div) and I am using JavaScript, specifically React, to create a new element - another div which serves as a sidebar. The goal is for the sidebar to seamlessly shift the previous element without overlappin ...

javascripthtmlcssreactjs

Execute a JavaScript function when a form is submitted

Seeking to reacquaint myself with Javascript, encountering difficulties with this fundamental issue. https://jsfiddle.net/gfitzpatrick2/aw27toyv/3/ var name = document.getElementById("name"); function validate() { alert("Your name is " +name); } < ...

javascripthtmlonsubmit

Issue: subscribe function is not definedDescription: There seems to be an

I'm currently trying to retrieve a value from an array based on a specific element, and then finding the exact matching element. Unfortunately, I've encountered an error with this.getProduct(name1: string) function even though I have already impo ...

javascriptangularangular4-httpclient

Showing content from a JavaScript variable once a button has been clicked

Imagine you are using express.js and have a JavaScript variable embedded in an ejs file like this: <%= someVariable %> How can you display the value from this variable on the same page, for instance within a bootstrap modal element (check out https: ...

javascripthtmlnode.jsexpressejs

When the add button is clicked, I would like to implement a feature where a checkbox is added

When the user clicks on the link "출력하기", I want the web page to add a checkbox to all images. I wrote this code, but it's not working. Can anyone help me? This is my JS: $(document).ready(function(){ $("#print").on('click', fu ...

javascripthtmlimagecheckbox

Is there a way to incorporate hyperlinks into the Application column of my v-data-table component?

When loading data table from the database, I have included links along with the names of the Applications. However, I only want to display the Application name and open the corresponding link when clicked. headers: [ { text: 'Name&a ...

javascriptvue.jsdatatablehrefvuetify.js

Interactions with the mouse while using the window.alert and window.confirm features

Currently, I have developed a custom drag method that utilizes mousedown, mouseup, and mousemove events. This method is defined as move(). $(document).on('mousedown', function() {drag = true }); $(document).on('mouseup', function() {dr ...

javascriptjquery

What is preventing me from getting jQuery UI 1.8.20 dialog to function on JSFiddle?

My attempt to implement jQuery UI dialog in JSFiddle has been unsuccessful, consistently resulting in a dialog opening error caused by a deep-seated issue within jQuery UI: Uncaught TypeError: Cannot read property '3' of undefined. Although I am ...

javascriptjquery-uijquery-ui-dialogjsfiddle

What is the process for implementing a security rule for sub-maps with unique identifiers in Firebase?

I am looking to implement a security rule ensuring that the quantity of a product cannot go below zero. Client-side request: FirebaseFirestore.instance .collection('$collectionPath') .doc('$uid') .update({'car ...

javascriptfirebasegoogle-cloud-firestorefirebase-security

Leverage SVGs imported directly from the node_modules directory

Our architecture has been modularized by creating a node_module that contains all SVG files. Using the following code works perfectly: <q-icon> <svg> <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use> </svg> ...

javascriptnode.jsvue.jssvgquasar-framework