Transformation of 3D geometric coordinates to 2D screen coordinates in Three.js

the width of the plane is set to 800 pixels:

geometry = new THREE.PlaneGeometry( 800, 20, 0, 0 );

material = new THREE.MeshBasicMaterial({ 
    color:0xFFFFFF,
    side:THREE.DoubleSide 
});

mesh = new THREE.Mesh(geometry, material);
mesh.updateMatrixWorld();
scene.add(mesh);

when I attempt to modify it, it distorts the coordinate system in unexpected ways

mesh.geometry.vertices[0].setY(0);
mesh.geometry.vertices[0].setX(0);
mesh.geometry.vertices[0].setZ(0);

mesh.geometry.vertices[1].setY(0);
mesh.geometry.vertices[1].setX(800);
mesh.geometry.vertices[1].setZ(0);

mesh.geometry.vertices[2].setY(20);
mesh.geometry.vertices[2].setX(0);
mesh.geometry.vertices[2].setZ(0);

mesh.geometry.vertices[3].setY(20);
mesh.geometry.vertices[3].setX(800);
mesh.geometry.vertices[3].setZ(0);

mesh.geometry.verticesNeedUpdate = true;

Is there a way to align the geometry object's coordinate system with that of the camera frame?

0 pixels equals 0 units

javascriptthree.js

Answer №1

My apologies if this solution does not meet your requirements. If you are looking to convert a vector3 position in a 3D world to its corresponding 2D pixel position on the screen, you can achieve this through the following transformation:

    function getScreenTranslation(obj, renderer, camera) {
        var vector = new THREE.Vector3();
        var widthHalf = 0.5 * renderer.context.canvas.width;
        var heightHalf = 0.5 * renderer.context.canvas.height;

        vector.setFromMatrixPosition(obj.matrixWorld);
        vector.project(camera);
        vector.x = vector.x * widthHalf + widthHalf;
        vector.y = -(vector.y * heightHalf) + heightHalf;
        return {
                x: vector.x,
                y: vector.y
        };
   };

Keep in mind that adjustments may be necessary to account for the positioning of your canvas element within your webpage.

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

Executing a function following the removal of an element

I am trying to remove an element after exiting a jQuery dialog. I have used the .remove() function, but the element is not accessible after executing .remove(). How can I "destroy" an object in JavaScript and allow it to be called again without refreshing ...

javascriptjquerydom

How to extract the date value from an HTML date tag without using a datepicker

Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...

javascripthtmlappframework

JsTree drag and drop feature malfunctioning: Icons disappear when dragging items

I am currently utilizing JsTree with the drag and drop plugin enabled in conjunction with an angular directive, https://github.com/ezraroi/ngJsTree. Everything appears to be functioning correctly, however, when I move a node, it does not visually show as ...

javascriptangularjsjstreejstree-dnd

Attempting to align one canvas with another causes the canvas to go haywire

Currently, I have two canvases set up in my game. The first canvas (rect1) moves randomly on the board while the second canvas (zombie) is supposed to follow rect1, but it seems to be moving all over the place instead of following correctly. Below is the c ...

javascripthtmlcanvas

Tips for creating AngularJS forms which display radio buttons and populate data from a JSON file

I'm having trouble displaying the json data correctly. How can I show the radio buttons from my json file (plunker demo)? Additionally, I want to validate the form when it is submitted. Here is the HTML code: <my-form ng-app="CreateApp" ng- ...

javascriptangularjsjson

An error occurs when attempting to access data from the JSON file

Currently, I am utilizing an API to retrieve the balance from a bitcoin address. This is my code: async function getWalletBalance(address) { try { const response = await got(`blockchain.info/balance?active=${address}`) return response ...

javascriptjson

The Three JS on the website is error-free, yet it fails to function properly

I've been attempting to replicate the example three.js page on my own website, complete with a canvas for the 3D animation. However, I'm encountering an issue where nothing is displayed, despite no errors appearing. I've tried troubleshootin ...

javascripthtmlthree.jshtml5-canvasrendering

The readAsDataURL method generates an invalid Base64 string for PNG images, while it works properly for JPG/JPEG files

Dealing with a React Native app and attempting to address this particular problem. The base64 is sent to an API and saved in the database as a blob. I understand that it's not ideal practice, but given that this is just a simple student project and no ...

javascriptnode.jsreactjstypescriptreact-native

Hide one dropdown when another dropdown is expanded in React

I am struggling to implement multiple dropdown menus in React. Do I need to create a separate function for each dropdown? I feel like there should be a more concise way to handle this. My main goal is to have other open dropdowns close automatically when ...

javascriptreactjs

What is the sequence of Javascript Execution for the event of window.location.href?

After browsing through this discussion on asynchronous JavaScript location.href call and watching a video explaining the event loop, I found no clear explanation regarding the behavior of href within window.location: The script order in the source code is ...

javascriptjqueryajaxdom-events

Using Vue: How to utilize v-slot variables in JavaScript

Can the values of the v-slot of a component be accessed in the script? For instance, consider the following template: <cron-core v-model="value" :periods="periods" :format="format" v-slot="{fields, period, error}"> {{period}} <div v-for="fiel ...

javascripttypescriptvue.js

Assistance required in designing a unique shape using Three.js

https://i.sstatic.net/pmHP2.png Hello there! I could use some assistance with replicating the 2D shape shown in the image above using three.js. Specifically, I'm encountering some difficulty with incorporating the subtle curvature seen on the inner l ...

javascriptthree.jsgeometryshapes

Utilize the child array to retrieve the total number in the table

Dealing with JSON data, my task is to count the number of strings within a specific child element and then group them by part of the string to create a table. While this may seem like a confusing and daunting challenge, it's what we need to accomplish ...

javascriptarraysjsonobjectvue.js

with every instance of an ajax request sent to a separate file

Currently, I have a forEach function that is printing the "local" column from a specific database: View image here Everything is working well up to this point, and this is the output I am getting: See result here Now, my goal is to send variables via P ...

javascriptphpjqueryajax

How does handleChange receive the value as an input?

Greetings! Currently, I am delving into the world of React and JavaScript. I am experimenting with a Table Component demo that can be found at the following link: https://codesandbox.io/s/hier2?file=/demo.js:5301-5317 In the demo, there is a function defi ...

javascriptreactjsmaterial-ui

Synchronously retrieving data from MongoDB in a NodeJS environment

Although I have been programming for a long time, mainly in Java, I am relatively new to NodeJS/Express. One of the major challenges I am facing involves async operations. Some parts of my code work smoothly, like when I can perform an async database opera ...

javascriptnode.jsmongodbexpressasync-await

The property 'createUploadWidget' cannot be read from an undefined source

While working on a React js tutorial, I encountered an issue related to using Cloudinary React SDK for image and video uploads. Specifically, I was using the Upload Widget provided by Cloudinary and faced an error when trying to open the widget - 'Typ ...

javascriptreactjscloudinary

What is the correct method for accessing $event in VueJS on Firefox after clicking an element?

Utilizing VueJS 2.3.0 to update images and other details when a user clicks on the menu. The menu is dynamically created using JSON data with a VueJS template: <template id=\"rac-menu\"> <ul class=\"col-md-3\" v-show=&bso ...

javascriptvue.jsvuejs2vue-component

Why is the inner span element not being referenced in jQuery?

I've come across a specific HTML structure: enter code here <ul> <li><span>aaa</span> <div> <ul> <li><span>bbb</span> </li> </ul> ...

javascriptjquery

What are the best techniques for displaying an image in Sprite without color distortion?

Check out my CodeSpace I'm currently diving into the world of THREE.js and encountering difficulties with incorporating an image into the scene without the colors appearing washed out. Even after experimenting with different encoding options, such a ...

three.jsspritereact-three-fiber