[Assistance Needed]: Transforming Three.js coordinate systems

Is there a way to adjust the default drawing position in three.js from (0,0,0) at the center of the canvas to the actual start of the canvas?

For an example, check out this code: https://jsfiddle.net/data_x/mwprgnra/8/

I am looking to shift the lines to align with the start of the dashed canvas box (transitioning from 3D coordinates to 2D coordinates). This is necessary for overlaying an SVG canvas on top of a WebGL canvas. To achieve this, both canvases need to follow the same coordinate positions.

Here is a snippet of the code:

camera = new THREE.OrthographicCamera( w / - 2, w / 2, h / 2, h / - 2, 1, 10000 );
    camera.position.set(0, 0, 100);

Any advice or assistance on this matter would be greatly appreciated,

Thank you,

Answer №1

I experimented with altering the following parameters:

OrthographicCamera( left, right, top, bottom, near, far )

left — Adjusted to 0 for Camera frustum left plane.

right — Modified to the canvas width for Camera frustum right plane.

top — Changed to the canvas height for Camera frustum top plane.

bottom — Set to -400 (adjust based on canvas dimensions) for Camera frustum bottom plane.

near — Established at 50 for Camera frustum near plane.

far — Set to 100 for Camera frustum far plane.

By setting left to 0, objects are rendered at the leftmost part of the canvas. Adjusting the bottom value will relocate your objects to the top of the canvas.

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

Numerous volume sliders catering to individual audio players

I'm currently working on implementing volume sliders for multiple audio players, similar to what you can find on . With the help of Deepak, I've managed to create code that allows me to control play/pause and adjust the volume of various audio pl ...

Is there still the possibility to utilize OrbitControls?

Is it possible to continue using OrbitControls in the year 2020? Here is the warning message I received: During the transition to ES6 Modules, the files in 'examples/js' were marked as deprecated in May 2020 (r117) and will be removed in Decembe ...

Tips for simulating an ajax request in a Jasmine test

Check out my code snippet below: function sendRequestData(url, urlParameters) { $.ajax({ url : url, method : 'POST', headers : { 'Accept' : 'application/json' }, contentType : 'application/js ...

Creating personalized tags or components by utilizing insertAdjacentHTML in Vue

With the use of insertAdjacentHTML, I am able to create HTML elements such as div and span, but it seems that I cannot generate custom tags like <myComponent> </myComponent>. I understand that insertAdjacentHTML can create HTML elements, but a ...

AngularJs Directive continuously returns undefined

Exploring angularjs directives for the first time has been quite a challenge. I can't seem to figure out why my directive isn't working properly as the scope.durationTimeInput always returns undefined no matter what I try. (function () { 'u ...

trigger a CSS animation using JavaScript upon a specified event

I am attempting to incorporate a class for an autogrow animation effect to a textarea element. Here is a demo: http://jsfiddle.net/d0kmg7d3/15/ var tx = document.getElementsByTagName('textarea'); for (var i = 0; i < tx.length; i++) { tx[i] ...

Exploring ways to retrieve query parameters and search params within a loader function in React Router version 6

I set up a route configuration like this: const router = createBrowserRouter([ { path: "/", element: <Layout />, children: [ { index: true, element: <Home /> }, { path: "contacts", element: <Cont ...

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

Currently, I am working on a react project where I have developed a form framework that wraps Material-UI around Redux Form. If you want to check out the sandbox for this project, you can find it here: https://codesandbox.io/s/romantic-pasteur-nmw92 For ...

Recalling the layout following the user's computer restart

I am creating a simple online editing tool (similar to Microsoft Outline) for coursework and I would like the outline details to be saved even if the user restarts the system. How can I achieve this? <html> <head> <title>Editor</ ...

Guide to arranging components in two columns using VueJS Vuetify Grid

My goal is to align two components in order to display data on two columns. I followed the official Vuetify Grid tutorial, but encountered some issues with fixed row components. Despite trying to change from row to column, it still doesn't work as exp ...

The use of JSON in AJAX animations can hinder the transfer of data via PHP

I'm currently working on a form for submitting email messages. I've added an ajax animation, but for some reason, the data isn't being passed to php. I'm not sure what the issue could be. Any help would be greatly appreciated. Thank you ...

Create a WebGL object remotely on the server

Exploring potential project ideas, I was curious to see if it's feasible to produce a WebGL scene or object on the server side and then have it rendered on the client. The motivation behind this is that generating a scene typically involves utilizing ...

Determining the moment a user exits a page on Next JS

Is there a way to track when the user exits a Next JS page? I have identified 3 possible ways in which a user might leave a page: Clicking on a link Performing an action that triggers router.back, router.push, etc... Closing the tab (i.e. when beforeunloa ...

"Encountering difficulties while setting up an Angular project

I am currently working on setting up an Angular project from scratch. Here are the steps I have taken so far: First, I installed Node.js Then, I proceeded to install Angular CLI using the command: npm install -g @angular/cli@latest The versions of the ...

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

Seeking a solution for replacing external CSS and JS file links in an HTML document with the actual content of these files. The current structure of the HTML file is as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C ...

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

Receive the outcome once the form is submitted

Can someone provide quick assistance? I am looking to allow users to upload a CSV file for me to parse and analyze. Once the processing is done, I need to display the results back to the users. While uploading the file, I also need to ensure that the file ...

Exploring Aframe: extracting vertices from various objects

How can we extract the vertices of an object within a scene? This applies to both primitive shapes and imported models. For instance: <a-entity geometry='primitive:box' rotation='0 30 0'></a-entity> or <a-entity gltf-m ...

Integrate your React Native application with a Node.js backend on your local machine

My attempt to establish a connection between my react native app and my node.js app on a Windows system has hit a roadblock. While I am able to receive responses from the node API using Postman, the response from the react native app is coming back as unde ...

Navigating currency in JavaScript

I'm considering whether this is the best approach for handling currency in JavaScript. The idea is to restrict the user to entering only numbers and a decimal point in the input field. This code is a combination of answers I found on this website and ...