Three js is a fantastic tool for creating dynamic 3D visuals with a smoothly rotating

Here is the code I am using to set up my camera and position it:

const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());

camera.near = size / 100;
camera.far = size \* 100;
camera.updateProjectionMatrix();

camera.position.copy(center);
camera.position.x += size / 0.2;
camera.position.y += size / 2;
camera.position.z += size / 100;
camera.rotation.z += Math.PI/2
// camera.up.set(0, 0, 1)
// camera.rotation.set(Math.PI / -2, 0, 0)
camera.lookAt(center);

I am having trouble with camera rotation and achieving the desired position. I have tried using camera.up.set, but it doesn't seem to be solving the issue. Can anyone provide me with the correct code to achieve the desired outcome?

Answer №1

Following

camera.position.copy(center);

Experiment with

camera.position.y += size / 0.2;
camera.lookAt(center);

If the desired position is not achieved, consider using z instead of y.

It seems like you are utilizing orbit controls to achieve the desired visual: if neither of the above methods work, try inserting console.log(camera.position) in your render loop (or, alternatively, in a function triggered by clicking on the renderer.DOMElement), adjust the camera to the desired position, and then make note of the x, y, and z values corresponding to that position.

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

Incorporating traditional Bootstrap styling directly into a React application without relying on the react-bootstrap library

My goal is to incorporate my existing bootstrap components into a React project without having to rewrite them to work with the react-bootstrap library. While I have successfully integrated the bootstrap CSS, I am facing issues with the functionality aspec ...

The toggleClass() function is only toggling between a single class

I'm currently facing an issue with a jQuery/Angular function that is triggered on click. <a ng-click="like()" href="#" class="like like--yes"></a> Essentially, my goal is to switch between the classes like--yes and like--no when the like ...

What is the best way to track and document the specific Context Provider being utilized while invoking useContext?

After creating a custom component that displays AuthContext.Provider with specific values, I encountered an issue. Even though it functions correctly, when I utilize useContext within a child of the AuthProvider component, my code editor (VS Code) is unabl ...

Unexpected behavior encountered when using onClick in a material-ui List component containing Buttons

Looking to implement a customized list using React and Material-UI, where each item features a Checkbox, a text label, and a button. The onClick event for the Checkbox should be managed by a separate function from the onClick event for the Button. Encount ...

The partition.nodes(root) function in d3.js does not assign values to the x or dx properties of the nodes

I am currently experimenting with d3.js to create a unique icicle tree visualization using data sourced from a .json file. The challenge I'm facing lies in the fact that the x and dx attributes of the partition nodes are consistently being set to 0. M ...

The change handler of the TS RadioGroup component, instead of returning an array of possible strings, returns a unique

My interface declaration for StopData is shown below: export interface StopData { stopName: string, stopType: 'stop' | 'waypoint' } I have implemented a radio group to choose the 'stopType', which consists of two radi ...

Error: Unable to execute function abc, it is not defined as a function in this context

Having trouble with a fronted or JavaScript issue where it can't find the defined function in the file. I'm working on integrating Apple Pay and need to call the back-end API based on a specific event. Here is my code. ACC.payDirect = { _autoload ...

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

ag-Grid incorporating new style elements

For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...

Using JQuery's ajax() method within a for loop

I'm currently working on implementing default edit mode in a Razor view. Everything seems to be functioning properly except for the filling function for the dropdown list. As part of my task, I need to populate the state dropdown list based on the cur ...

margin-top: automatic adjustment, with a minimum of 50 pixels

I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this. * { ...

I used the `MyWindow=window.open` function to display a pop-up window and then navig

On my webpage (http://localhost:8088/hse/public/explorer), I have implemented two buttons: When these buttons are clicked, a new pop-up window will open at (http://localhost:8088/hse/public/explorer/1) onClick="MyWindow=window.open('http://local ...

Creating a Basic jQuery AJAX call

I've been struggling to make a simple jQuery AJAX script work, but unfortunately, I haven't had any success so far. Below is the code I've written in jQuery: $(document).ready(function(){ $('#doAjax').click(function(){ alert ...

Guide on how to execute jasmine tests coded in TypeScript for Node.js applications

I am eager to test my express application developed in TypeScript. I am utilizing jasmine for writing test cases, webpack for bundling TypeScript files to JavaScript, and karma as the test runner. Please locate the following files: // about.service.ts - ...

perform the .then() function within a returned promise

Here is my code snippet: function scammer(message) { return new Promise((resolve,reject)=>{ if(condition){ if (condition) { bot.KickMember(params).then((message)=>{ console.log("kicked"); ...

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

I have a Bootstrap tour set up with code that is meant to capture the user pressing the end tour button and scroll them back to the top of the screen. However, currently the code runs when a new popover loads instead of when the end tour button is clicke ...

Express Router triggers XHR onreadystatechange 3

Having just started using Express, I am currently working on setting up a login authentication system. However, I have encountered an issue where XHR is not showing a ready state 4. This problem arose after implementing express.Router which I came across i ...

What is the implementation of ForEach within map in JavaScript?

I am working with a sample JSON in the following format: var sample=[{"id":200,"children":[{"value":300,"type":"SINGLE"},{"value":400,"type":"CLASSIC"},{"value":600,"type":"DUAL"}]},{"id":300,"children":[{"value":500,"type":"TRIO"},{"value":600,"t ...

Transfer the values from identical textboxes to jQuery, and subsequently to a PHP page for saving them to a database

Here is a list of textboxes that I have: ` <table id="div1" style="width:100%;"> <tr> <td> <label>Question Text</label> </td> <td colspan="5"> ...

What is the best way to extract the JSON value from my API website and assign it to a new variable

Currently, I am in need of a way to convert a username into an ID. To accomplish this task, I will utilize the following API link: (where "username" is replaced by the variable name.) The main objective here is to extract the ID value from the provided li ...