Setting up the camera for viewing large scale objects in Three.js

I'm currently using Three.js to render a cityscape, but I'm having trouble with the camera settings. It seems that adjusting the near/far settings doesn't allow me to capture the entire scene. When I increase the far plane of the camera, the model appears blue and I can only see it clearly when zoomed in closely. Is there a way to view the whole model without being so close?

var scene = new THREE.Scene()

scene.background = new THREE.Color(33,33,33);

var ambient = new THREE.AmbientLight(0xe8ecff, 1.4)
ambient.name = 'ambientLight'
scene.add(ambient)

var directionalLight1 = new THREE.DirectionalLight(0xfff1f1, 0.7)
directionalLight1.name = 'directionalLight1'
directionalLight1.position.set(-1500, 900, 1500)
directionalLight1.castShadow = true
scene.add(directionalLight1)

// More code here

https://i.sstatic.net/6cIBf.png https://i.sstatic.net/DytSk.png

javascriptthree.js

Answer №1

For adjusting an object that is being clipped out of the camera's focal length, you can utilize the Object3D.scale property. By modifying this scale value, the entire structure becomes visible within the camera view upon loading and avoids being cut off. This adjustment to the object's scale should be made during the loading callback process.

var scene = new THREE.Scene()

scene.background = new THREE.Color(33,33,33);

var ambient = new THREE.AmbientLight(0xe8ecff, 1.4)
ambient.name = 'ambientLight'
scene.add(ambient)

// More lighting components added here...

function animate (){
  requestAnimationFrame( animate );

  // Additional animation logic...

}

animate();

var loader = new THREE.ObjectLoader
loader.load("example_mesh.json", 

function(obj){
  // Scale adjustments and positioning of the loaded object in the scene.
  
}, onProgress, onError)

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

Leverage socket.io in various routes within a node.js application

In my Node.js application, I have various routes defined in the router.js file. Now, I want to implement socket.io in every route to enable real-time communication between my Node.js and React.js applications. However, the structure of my Node.js applicati ...

javascriptnode.jssocket.io

Getting the checkbox count value in a treeview upon successful completion of an AJAX request

After successful JSON Ajax response, a treeview structure with checkboxes is displayed. I need to capture the number of checkboxes checked when the save button is clicked. @model MedeilMVC_CLOUD.Models.UserView <script type="text/javascript"> ...

javascriptjqueryhtmlcssajax

What is the best way to attach a single block of Javascript code to different div elements without executing them simultaneously?

Running a small ecommerce shop, I have designed product cards using HTML, CSS, and a bit of Jquery for animations. However, a problem arises when clicking the "add to cart" button on any product card as it adds all items to the cart and triggers animations ...

javascripthtmljquerycsse-commerce

"Looking to programmatically close a modal in JavaScript that was opened using the 'data-target' attribute? Here's how you can

I have a modal template embedded in the same HTML file as my controller. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDeleteItem">Delete selected item</button> < ...

javascriptangularjsangular-ui-bootstrap

How can I locate a single hidden field within a div containing multiple fields?

Within one div, I have three hidden fields. How can I access and retrieve just one of these hidden fields when referencing this specific div? ...

javascriptjquery

Reducing ObjectId length in node.js with mongoose

Currently, my URLs have a lengthy structure like this: http://www.sitename.com/watch?companyId=507f1f77bcf86cd799439011&employeeId=507f191e810c19729de860ea&someOtherId=..... Due to the rapid growth in length, I am contemplating the idea of shorte ...

javascriptnode.jsmongodbmongooseobjectid

The presence of Firefox Marionette has been identified by hCaptcha

Whenever I go on indeed.com using the firefox web driver in Marionette mode, I keep encountering an hCaptcha popup. In an attempt to avoid this, I experimented with a user script that alters the navigator.webdriver getter to return false right at the sta ...

javascriptc#seleniumselenium-firefoxdriver

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

In my React application built with next.js, I am fetching a stylesheet via a GET request and appending it to the webpage. However, whenever this stylesheet is loaded in, the elements impacted by it re-render unnecessarily, even if there are no actual chang ...

javascriptcssreactjsstylesheetnext.js

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...

javascriptjqueryhtmlcss

The onblur event is triggering prior to the value being updated

There are two input fields within a <form> element. I am trying to retrieve the value of one input field (dpFin) once it has been changed. The issue is that when I attempt to get the new value inside the event using var endDt = document.getElementByI ...

javascripthtml

Adding a Placeholder to an Input Field in AngularJS with an Active Class

My ng-repeat-generated list of inputs starts with only the first one enabled and styled with an active class (highlighted in red). You can see it in action on this example. Whenever I focus on an input, the next one becomes enabled and also receives the a ...

javascriptangularjs

Mobile Devices Experience AJAX Failures

My AJAX requests are not working properly on mobile browsers and iPads, but they work perfectly on desktop computers. I am struggling to figure out what the issue might be. var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ ...

javascriptajax

Struggling to comprehend JavaScript in order to customize a Google map

I'm new to the JavaScript world and having some trouble with my map styling. The map itself is displaying correctly, but the styles aren't being applied. I keep getting an error message saying I have too much code and not enough context, so I&ap ...

javascriptjsongoogle-mapscustomization

Dynamically loading JQuery causes highcharts to encounter errors

I have limited experience with JavaScript programming, and I've been encountering a persistent issue for quite some time now. Any assistance on this matter would be greatly appreciated. In the provided jsfiddle example, when jQuery is selected from t ...

javascriptjqueryhighcharts

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

javascriptphpjqueryhtmlcss

Invoke the forEach method within a lambda function and assign the output to a variable

In order to achieve my goal, I am looking for a way to take an array as input and save the result for future use. Unfortunately, I do not have permission to create additional functions. As a result, the code must accurately reflect what result should be. l ...

javascript

Implementing custom routing in Express based on specific route parameter values

Scenario I am currently working with a route that has the following structure: router.get('/api/v1/tokens/:token_name', middleware1, middleware2) While this setup works well for most values of token_name, I now need to incorporate special handl ...

javascriptnode.jsexpress

What is the process for submitting a record to a table following the activation of a JavaScript link or button

I am working on creating a like-unlike button below each post for registered users to interact with. I have successfully created the button itself, but now I need to figure out how to store records when a user clicks the button. My idea is to utilize a tab ...

javascriptphphtmlajaxmysqli

What is the method to call a private function using its name?

How can I call a function by its name? I understand how to call a function by name, but I am struggling to find the necessary scope. Currently, I am using this["get" + widgetName], which works for _get_publishedBuildsWidget1 but I would like to make the fu ...

javascriptangularjsreflection

Creating an If statement to evaluate the state of a parameter

In my simple Graphics User Interface, when the user clicks on "move", a yellow rectangle div moves across the screen. Now, I am trying to implement an event based on the position of the rectangle on the page. For example, if the div is at 400px (right), t ...

javascriptjqueryhtml