What is the method for determining the coordinate range in a three.js environment?

When developing a scene using html and javascript, incorporating a camera, renderer, and displaying the scene in a browser, how can one determine the visible range of the scene?

In a specific scenario where only a 2-dimensional x/y scene with objects is being shown, what are the minimum x/y values needed for an object created such as:

var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('white'), opacity: 0.5 } ) );
object.position.x = ??;
object.position.y = ??;
object.position.z = 0;
object.geometry.scale(0.8, 0.8, 1);
scene.add( object );

to be barely visible at the edge of the browser window?

javascriptthree.js

Answer №1

One way to determine the size of your 3D world is by calculating the visible portion based on your camera settings. For example:

const verticalFOV = (camera.fov * Math.PI) / 180;
const height = 2 * Math.tan(verticalFOV / 2) * Math.abs(camera.position.z);
const width = height * camera.aspect;

object.position.x = -width / 2;
object.position.y = -height / 2;

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

Using [(ngModel)] in Angular does not capture changes made to input values by JavaScript

I have developed a custom input called formControl, which requires me to fetch and set its value using [(ngModel)]: import { Component, Injector, OnInit, forwardRef } from '@angular/core'; import { ControlValueAccessor, FormControl, NG_VALUE_ACCE ...

javascriptjqueryangulartypescriptangular-directive

GraphQL failing to communicate with WP API

Any help is appreciated! I am currently retrieving data from a WP Rest API. When I run the WordPress site locally on my machine using http://localhost:8000 and access the graphql playground at http://localhost:3000/api/graphql, everything works fine as ex ...

javascriptwordpressgraphqlnext.jswp-api

Jquery problem: dealing with empty spaces

I am working on a project where I need to use jQuery to disable specific input fields, like the following: $("input[value=" + resultId[i].name + "]" ).prop('disabled', true); $("input[value=" + resultId[i].name + "]" ).css({ 'background-col ...

javascriptjquery

Learn how to activate a JS native event listener using jQuery for the 'change' event

This question is unique from the one found at How to trigger jQuery change event in code. The focus here is on the interaction of jQuery with native event listeners, rather than jQuery event listeners. I am using addEventListener to bind a change event fo ...

javascriptjqueryhtmladdeventlistener

Trouble persists in saving local images from Multer array in both Express and React

I am having trouble saving files locally in my MERN app. No matter what I try, nothing seems to work. My goal is to upload an array of multiple images. Below is the code I have: collection.js const mongoose = require("mongoose"); let collectionSchema ...

javascriptnode.jsreactjsmongodbexpress

Is there a way to confirm whether or not two files are identical?

Is there a reliable method to determine if two files are identical? I've been using a solution that involves downloading the first part of each file, converting the data to base64, and then comparing them. However, I've encountered an issue wher ...

javascriptnode.jsexpress

Refreshing the page causes Material UI Button to revert to default styling

My question regarding the Material UI Button losing styling after a page refresh (link: Material UI Button loses Styling after page refresh) went unanswered, so I am reposting with a CodeSandbox included for reference: https://codesandbox.io/s/bold-resonan ...

javascriptreactjsmaterial-uistyling

I'm curious about using NextJS to fetch an API with a specific router ID. Can anyone provide guidance on how to achieve this and then render the data as HTML?

Greetings! I am currently coding in NextJS and working on a user page that fetches user-specific information from an API. My goal is to extract the ID query from the URL and use it to make an API request. The API endpoint follows this structure: /Users/{i ...

javascriptapinext.js

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am currently working on a small Next.js project and facing an issue where the initial load time is excessively long. Whenever I click on a link to navigate to a page like home/product/[slug], it takes around 12 seconds to load due to compiling over 2000 ...

javascripthtmlreactjstypescriptnext.js

Creating a custom map using React and Leaflet

Can anyone guide me on creating a map using leaflet? I am encountering the following issue. ./src/Map.js Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap'). Below is the code I have ...

javascriptreactjsleafletreact-leaflet

Unable to save or create files in Store.js

Recently, I've been trying to save a file on client storage using Store.js. After changing the date with store.set and logging it to the console successfully, I encountered an issue where the data was not being saved in the app directory as expected. ...

javascriptreactjssaveelectronstore

Construct a table featuring nested rows for every parent entry

Table 1 orderid customerName totalCost ---------------------------------- 1 Jonh £200.00 2 Ringo £50 Table 2 orderlineid orderid productName productPrice Quantity ----------------------------------------------- ...

javascriptjqueryhtml

Tips for incorporating a JavaScript file directly into your HTML code

I'm working with a compact javascript file named alg-wSelect.js, containing just one line of code: jQuery('select.alg-wselect').wSelect(); This script is used by a wordpress plugin. My question is whether it's feasible to incorporate th ...

javascriptwordpressincludeinline

Resolved the time zone problem that was affecting the retrieval of data from the AWS Redshift database in Next

Currently utilizing Next.js for fetching data from AWS Redshift. When running a query from DataGrip, the results display as follows: orderMonth | repeatC | newC 2024-02-01 | 81 | 122 2024-01-01 | 3189 | 4097 However, upon retrieving the same query ...

javascriptnext.jsamazon-redshiftdatagrip

Issue with Global Variable Not Being Updated in Javascript

In my code snippet below, I am struggling to update a global variable within a callback function. function FunctionOne() { var result = ""; for (var i = 0; i < 10; i++) { AjaxFunction(function (data) { result += data; ...

javascriptjquery

extracting URL parameters using AJAX

I have successfully created an AJAX request using the GET method, passing variables to the URL and receiving a response. Now, I need to retrieve the current URL variables by clicking on a newly created button in order to proceed with further processing. Th ...

javascriptajaxurlget

What is the best way to send a distinct identifier using JavaScript or PHP?

I am looking for a way to replace "INSERT+ORDER+ID" with a unique ID when a user clicks on our "Request Information" button to improve visitor tracking. Can anyone provide guidance on how to achieve this? Your assistance is greatly appreciated, thank you ...

javascriptphpajax

When attempting to call a Firebase Cloud Function URL in an AngularJS $http request, an Access Control Origin Error

I recently created a cloud function that involves linking with Plaid. I'm currently working on calling this function using AngularJS's $http method. While the cloud function code is being executed, I encountered an error in my console instead of ...

javascriptangularjsfirebase

Multiple instances of jQuery file being loaded repeatedly

Having an issue with the jQuery file (jquery-1.11.3.min.js) loading multiple times. It seems that other jQuery files in the index.html page might be causing this. Any advice on how to resolve this would be greatly appreciated. <script type="text/javasc ...

javascriptjqueryhtml

Tips for loading a webpage directly to the center instead of the top position

Is there a way to make the page open at a specific div halfway down the page instead of starting from the top? Here is an example: <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"> <div id="d5"> <div id="d6"> Do ...

javascripthtmlcss