Coordinate Point Visualization in Three.js CameraHelper

Looking to control the rendering volume of a camera in three.js and obtain the control point.

You can achieve this by using a camera helper similar to the example provided in the camera example with the pointMap attribute.

console.log(cameraOrthoHelper.pointMap);

This will return the following values:

c, cf1, cf2, cf3,cf4, cn1, cn2, cn3, cn4, f1, f2, f3, f4, n1, n2, n3, n4, p, t, u1, u2, u3

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

I am particularly interested in n1...n4 and f1...f4 (orange cube).

However, the values appear to be incorrect. How can I utilize these values in real-world coordinates?

javascriptcamerathree.js

Answer №1

To configure the positioning of the camera, specific properties are used.

new THREE.OrthographicCamera( left, right, top, bottom, near, far );

Therefore, adjusting the camera will also result in a change to the appearance of the "orange box"...

UPDATE

To obtain the camera helper matrix and apply it to desired vertices, such as the four near and far points for the orange box:

Near points:

cameraHelper.pointMap[n1][0]
cameraHelper.pointMap[n2][0]
cameraHelper.pointMap[n3][0]
cameraHelper.pointMap[n4][0]

Far points:

cameraHelper.pointMap[f1][0]
cameraHelper.pointMap[f2][0]
cameraHelper.pointMap[f3][0]
cameraHelper.pointMap[f4][0]

Before applying the camera helper matrix, ensure to update the worldMatrix of the orthographic camera since the cameraHelper matrix is dependent on it:

camera.updateMatrixWorld();
point.applyMatrix4( cameraHelper.matrix );

View this fiddle to see a demonstration of the code in action.

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

Steps for incorporating "about minutes ago, about hours ago, etc;" into a .filter for an Angular/Ionic v1 project

Can someone help me figure out how to incorporate phrases like "from now," "ago," etc. into a JS filter in my ionic v1 project for WordPress without using UTC Date? I am currently working on an Ionic v1 app that is native to WordPress, so it's crucia ...

javascriptangularjsdate-formattingionic-v1

Activate collapsible navigation icon when clicked on a smaller screen

Seeking assistance as a newcomer to coding. Struggling to implement a responsive navbar icon that changes on small screens when clicked. Utilized a bootstrap navbar but encountering issues where clicking the navbar on a small screen only displays the list ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Issue: ui-route failing to function properly when the href attribute is utilized

I am currently working on implementing ui-route to manage the states of my app while focusing on URL navigation. My goal is to enable users to simply click on a link and be directed to the state associated with the specific URL. After following an In-Dep ...

javascriptangularjsangular-ui-router

How can I navigate between pages without losing the data entered in the form fields

Is there a way in Ajax or jQuery to save form data and navigate between multiple form pages without using PHP Sessions? I want the form data to be saved until the user submits it, and when they do submit, all information from different pages should be in ...

javascriptjqueryajax

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code ...

javascriptjqueryhtmlcsstransition

Does React trigger a re-render when setState is called even if the state value remains unchanged?

Imagine I create a React component with an initial state of {random: 1}. Now, if I were to execute the following code: this.setState({random: 1}) Would this action result in triggering a re-render of the component? Furthermore, is there a method to avoid ...

javascriptreactjs

What is the best way to utilize mouseenter and mouseleave events concurrently?

I need some assistance with my website's star rating feature. When a user hovers over the stars, a popover should appear, and when they move their mouse away, the popover should disappear. Currently, I am using jQuery to achieve this functionality: $( ...

javascripthtmljquerymouseevent

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Tips for efficiently serving a static file without triggering a disk read

res.sendFile is the preferred method for serving a static file in express. However, it appears that res.sendFile reads the file from disk with each request, as shown below: router.get('/', (req, res) => { res.sendFile('./guest.js&apo ...

javascriptnode.jsexpress

Improving the efficiency of JSON data retrieval in JavaScript

I possess a hefty 10MB JSON file with a structured layout comprising 10k entries: { entry_1: { description: "...", offset: "...", value: "...", fields: { field_1: { offset: "...", description: "...", ...

javascriptjsonxmlquery-performance

Show a modal when the axios request is finished

EDIT: After some exploration, I've shared the solution I found in case it helps others facing a similar issue. I'm currently working on building a reusable Bootstrap 5 modal child component within Vue3. The goal is to pass an ID as a prop from t ...

javascripttypescriptaxiosvuejs3bootstrap-5

Steps to remove information from a database using PHP, AJAX, and vanilla JavaScript (without jQuery)

I am facing an issue with deleting data from my database. Whenever I click on the delete button, it deletes the first row instead of the intended row. Below is my PHP code: <?php $connect = mysqli_connect("localhost","root","","abu"); if($conne ...

javascriptphpajax

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

javascriptreactjstypescriptinterface

Avoid the sudden change in page content when using Router.Navigate

When the link below is clicked, the current page jumps to the top before proceeding to the next page. <a href="javascript:void(0);" (click)="goToTicket(x.refNo, $event)">{{x.ticketTitle}}</a> component.ts goToTicket(refNo, e) { e.prev ...

javascriptnode.jsangulartypescriptecmascript-6

Tap on the key within the input field

Completing a login form programmatically: document.getElementById('i0116').value = email; document.getElementById('i0118').value = password; document.getElementById('idSIButton9').click(); A challenge arises w ...

javascriptkey-events

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page

Located on an external server is a directory containing various .html files, including one named index.html. The server has the ability to load either the folder name or foldername/index.html in its URL. Each html file within the directory loads a corresp ...

javascriptjqueryhtmljsonajax

Can you identify the issue with my database file?

Here is the content from my database.js file: const MongoClient = require('mongodb').MongoClient; const db = function(){ return MongoClient.connect('mongodb://localhost:27017/users', (err, database) => { if (err) return co ...

javascriptnode.jsmongodbexpress

What is the appropriate HTTP status code for "item not found" when using RESTful ajax?

Imagine having a single-page web application featuring a list of items. Users can click on an item to view more information about it. The details of each item are loaded asynchronously via an AJAX GET request to the URL http://www.example.com/item/[id], an ...

javascriptjqueryajaxhttp-status-codessingle-page-application

Create an Oval-Shaped Image Cutout

Currently, I have a fabric.JS canvas where objects can be added. However, I am interested in clipping these objects into an oval shape, similar to the clip demos on fabricjs.com. In my current project (JSFiddle), I have been able to crop the object into a ...

javascriptfabricjs

Modify a necessary input value using jQuery or JavaScript

I am looking to update the required value of an input based on a checkbox selection. Here is my current code, any assistance would be appreciated. <input type="checkbox" id="no_land_line" name="no_land_line" value=""> // check this box if no land li ...

javascriptjquery