Set the camera to view the world from a y-coordinate of 0 and descend

How can I make the top of the render area in Three.js point to y=0 in the world?

I also want the camera to look straight (lookAt)

These are my current values:

camera = PerspectiveCamera
camera.position.z = 1895.8448868133867
camera.fov = 20
screen.width = 1280
screen.height = 689
camera.lookAt( new THREE.Vector3(0,this.camera.position.y,0) )

I know the result should be -264 for camera.position.y but I'm unsure how to achieve this...

Any help would be greatly appreciated! :-)

Answer №1

Eureka! I solved the problem.

let verticalFOV = camera.fov * Math.PI / 180;
let objectHeight = 2 * Math.tan( verticalFOV / 2 ) * distance;

camera.position.y = (objectHeight/2) * -1;

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

JavaScript Error Caused by Newline Characters

I'm facing an issue with extracting data from a textbox using JavaScript. What I'm attempting to do is retrieve the value from a textbox, display it in an alert, and then copy it. Here's the current code snippet: var copyString = "Date: < ...

Customizing demonstration code for EventDrops with D3.js (by marmelab) - what are the best strategies?

After discovering the non-Node.js version of the EventDrops library for D3 on GitHub, I successfully implemented the example on my own server. You can find more details and the example code in this blog post here. However, I'm currently facing two is ...

Is it possible for three.js to integrate information from REST APIs?

Currently, I am in the process of learning three.js and have successfully created basic 3D models using hardcoded values. My goal now is to retrieve these values from a database that I have set up in MSSQL Server. These x, y, and z parameters are stored ...

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

The present IP address of the client through AJAX and PHP

This code snippet is on my PHP page: // Setting the timezone to Asia/Manila date_default_timezone_set('Asia/Manila'); $date = date('m/d/Y h:i:s a', time()); if (!empty($_SERVER['HTTP_CLIENT_IP'])){ $ip=$_SERVER['HTTP_C ...

Sharing a session with a Django template using jQuery

I am attempting to use $.load() to load a Django template that contains {% if user.is_authenticated %}. However, when the template is rendered on the server in response to an AJAX-generated HTTP request, the user object is undefined. Here is my_template.h ...

JavaScript library for making HTTP requests

Can someone provide guidance on creating a JavaScript command line application that interacts with a public API using an HTTP client library? What is the preferred JavaScript HTTP library for this task? ...

`Angular Image Upload: A Comprehensive Guide`

I'm currently facing a challenge while attempting to upload an image using Angular to a Google storage bucket. Interestingly, everything works perfectly with Postman, but I've hit a roadblock with Angular Typescript. Does anyone have any suggesti ...

What is preventing me from passing a JSON array as data in a GET request using jQuery Ajax?

When sending a get request like the one below: $.ajax({ url: 'http://localhost:8000/api/points/', contentType:"application/json", dataType: "json", data: JSON.stringify({"content_type":content_type,"object_id":object_id}), t ...

Displaying entries of input data

I have an application that includes a modal window with filters, but I am looking to add another type of filter. However, I am struggling with implementing it in React and would appreciate any help with the code or recommended links. Essentially, I want t ...

Displaying the specified item within an array using AngularJS

My application features a group of 'players' each with their own unique attributes that I want to showcase within a modal window and cycle through. The user interface is structured like this: <!-- Score Round Modal --> <div class="mo ...

Access rejected due to X-Frame-Options: "http://test.test.net/Feedback/Create?appId=TestApp" prohibits cross-origin framing in MVC5

Currently, I am developing a website that is hosted on my company's internal network and can only be accessed from within the network. As a result, cross-domain requests are not a concern for me. As part of this website, I have included a "Provide Fe ...

Activate audio and trigger notification

I'm looking to incorporate a small beep sound into my web application before displaying an alert message. Here's what I currently have: if(_none_valid) { $.playSound('/static/wav/beep_error.wav').delay(300); alert('ERROR: ...

Challenge encountered when attempting to remove elements from an array within a for loop

There seems to be an issue with deleting elements from an array within a for loop. var div = document.querySelector('div'); var array = [ "iPad", "iPod", "iPhone" ]; for (let i = 0; i < array.length; i++) { let p = document.createElement ...

Invoking a C# function from JavaScript

I need to implement a way to invoke the method GetAccount from my controller AccountController.cs within my JavaScript factory LoginFactory.js. Here is an example of what I am trying to achieve: AccountController.cs: public Account GetAccount(string userN ...

Selecting elements dynamically with JQuery

Trying to use a jQuery selector within plugin code created by a 3rd party has proved difficult. When hardcoded, it works fine; however, when attempting to use variables for dynamic selection, the object cannot be found. The lack of id handles in the CSS c ...

I am experimenting with an express middleware that can either return next() or next("route")

After developing a middleware function that returns next() if a route's parameters are defined by queryItems, I came across a useful tool called node-mocks-http. However, it does not fake the next object. This led me to explore how this can be achieve ...

Collect data from a third-party website that necessitates the activation of JavaScript

Given that phantomjs has been abandoned, I am exploring alternative methods. For instance, using chrome-webdriver may not be ideal as it cannot operate on a remote host like heroku. Is there a way to scrape a website that relies on JavaScript being activa ...

Is this code correct for passing a variable to another form?

$("#delete").click(function() { deleterecord(); }); function deleterecord(){ var id = $("#iduser").val(); alert("aw"+id); var id = $('#iduser').attr(); e.preventDefault(); pressed = "delete" $.ajax({ ...

Is JavaScript's setTimeout 0 feature delaying the rendering of the page?

Based on information from this StackOverflow post The process of changing the DOM occurs synchronously, while rendering the DOM actually takes place after the JavaScript stack has cleared. Furthermore, according to this document from Google, a screen r ...