Height positioning of a perspective camera in Three.js

I've been struggling to find the perfect camera position. Despite adjusting the numbers, I still can't achieve the desired result:

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 4, 15);
camera.lookAt(0, 0.5, 0);

Currently, the camera is positioned as shown here:

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

It's at a low angle similar to the viewpoint of a dog. I need to adjust it to be more eye-level like that of an adult in order to see what's on the table.

After @Marquizzo suggested changing the y position from 4 to 12 camera.position.set(0, 12, 15);, it helped, but the camera is still looking downward at a slight angle (around 15°). I want the camera to be at the same height but with a horizontal view, mimicking a person's eye level looking straight ahead:

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

javascriptthree.jscameraperspective

Answer №1

When using the lookAt(x, y, z) method with a PerspectiveCamera, it causes the camera to directly face the specified x, y, z position. To ensure that the camera is horizontal, simply set the y value to match the camera's current y-position.

var yPosition = 10;
camera.position.set(0, yPosition, 20);
camera.lookAt(0, yPosition, 0);

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

What is preventing me from changing the text color of this span element to white?

For some reason, I'm trying to make the first two texts of each line appear in white, but my CSS doesn't seem to affect the span elements generated by JavaScript. Take a look at the code snippet below for more details. I'm still learning ho ...

javascriptcssvue.js

How to create an empty @POST() body in NestJS for HTTPS requests

I am currently utilizing NestJS with HTTPS for my project. import { NestFactory } from '@nestjs/core'; import { fstat } from 'fs'; import { AppModule } from './app.module'; {readFileSync} from 'fs' async function boo ...

javascripttypescripthttpsnestjs

Retrieve the value of each element within the elements array

I need help retrieving values from elements within an array. Specifically, I am looking to extract the value of the <span id="attendees"> element within each <a> element. For example: HTML: <a id="meetingItem_{{meeting.id}}" onclick="Auth ...

javascriptjquery

Prevent clicking through slides on React by disabling the Swiper feature

Is there a way to handle the global document click event (using React hook useClickAway) so that it still fires even when clicking on a slide? For example, think of a circle in the header like an avatar dropdown - when you click on it, a menu pops up. Th ...

javascriptreactjsswiper.js

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

I am currently in the process of creating a blog platform. My goal is to allow users to input keywords on my site and search for images directly within the website. This way, I can easily retrieve the URL of the desired image. ...

javascriptjqueryhtmlcssjsonp

Separate the object/variable from the asynchronous function

Having trouble exporting my JSON object variable "X" out of a loop in my code. Despite trying different methods, I keep getting a "promise.pending" instead of the actual object. Any help from someone experienced would be greatly appreciated. Here's th ...

javascriptjsonnode.js

ReactJs - Organize your data with the sort method

In my React application, I have a table that fetches its data from an API. I need to implement sorting for one of the columns. The values in this column are usually strings of numbers but sometimes can be equal to "-" (Dash). Below is the sort function I ...

javascriptsortinghtml-tablecharacter-encoding

Can someone explain the variance between these two script codes? Are they entirely distinct, or can I utilize just one source?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> It appears that one script is for jQuery and the ...

javascriptjquery

What is the most effective way to compress a paragraph and fill in the remainder with '...'?

Here is some content wrapped in a paragraph, see below: <div style="width:30px"> <p>12345678901234567890abcdefghijklmnopqrstuvwxyzIlovePaulinaVega</p> </div> We are aware that this content will be displayed on multiple lines due ...

javascriptjqueryhtmlcssdom

Retrieving information from a servlet in JSP and then transmitting it to another servlet using ajax technology

I am currently learning JSP and servlet development. I am working on creating a library management system in Tomcat version 10.0. When a user signs in using their user ID and password through an HTML form, the credentials are sent to a login servlet. Once ...

javascriptjqueryajaxjspservlets

My contact form validation has hit a snag with a small bug. The email validation seems to be intertwining with the rest of my

I have implemented validation code for a contact form. When the code runs, it will identify any invalid input and display an error label. Although the validation is functioning correctly, the email input is not displaying the error label as expected. See ...

javascriptjqueryhtmlcssvalidation

Is there a way for me to acquire more information on event bubbling in web development, specifically relating to the YUI framework?

Are there any recommended resources for learning about event bubbling, specifically within the context of the Yahoo User Interface libraries (YUI)? ...

javascripteventsyuievent-bubbling

Using React js to retrieve data from multidimensional arrays

I am currently working on interacting with a json api. Initially, I was able to access the api and display the first array using the map method. However, I am facing difficulty in accessing anything beyond that initial array. { "client_id": 1, "client_nam ...

javascriptjsonreactjsmultidimensional-array

Best practice for terminating asynchronous scripts with a non-zero exit status

Imagine you have a code snippet like this: async function main() { await somethingThatCanFail() } main() Currently, to return a non-zero code on failure, I am using the following approach: main() .then(() => console.log('success message and ...

javascriptnode.jserror-handling

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

Chosen Dropdown selection - Retrieve/Receive information

One of the challenges I'm facing involves a dropdown list on my web form that contains various dates. My main query is: How can I retrieve data for the selected date from a MySQL database and present it to the user? Additionally, if the chosen date do ...

phpjavascriptmysqlhtml

What is the best way to link my PHP variable to a JavaScript variable within a While loop?

My goal is to create a website that retrieves information from a MySQL database and displays pictures upon clicking a button. echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">"; echo "<img align=\"r ...

javascriptphphtmlwhile-loopecho

Conceal the Div element in the loop if there is no image present

Im trying to set a condition in my WordPress loop. If there is no image, then the image box (.thumbHome{display:none}) should not appear. This is what I have in my function.php: function getThumbImages($postId) { $iPostID = get_the_ID(); $arrImages =& ...

phpjavascriptwordpress

"Utilize a PHP variable to make asynchronous requests in Javascript

I am dealing with a table that pulls data from a constantly updated database, with elements like <span id="totalvotes1"></span> and <span id="totalvotes2"></span> I want to specifically target these within the line success: ...

phpjavascriptjqueryajaxjson

How to efficiently retrieve a form's data from multiple forms with identical ids in JavaScript

I am facing a challenge with multiple forms on the html page that have the same ID. I need to send each form's information to the server based on user selection, but I haven't been able to find a relevant solution. For my Authorization polic ...

javascriptjqueryhtmlajax