Exploring point clouds with three.js and NSF OpenTopography data: What's the best way to configure the camera and implement a controls library for seamless data navigation?

Currently, I am engaged in a small-scale project aimed at showcasing NSF OpenTopography data through a point cloud visualization using three.js. While I have successfully generated the point cloud, I am encountering significant challenges with setting up the camera and implementing camera navigation. Various controls such as OrbitControls.js, TrackballControls.js, and FirstPersonControls.js have been tested but none have produced satisfactory results. Below is a link to a prototype of the visualization I have managed to create so far. My objective is to plot the point cloud data and enable navigation within the scene utilizing either mouse interactions or arrow keys.

View Prototype

Please feel free to reach out if additional code snippets or examples are required. The provided jsFiddle serves as just one of my many attempts to achieve a functioning solution.

Your guidance and insights would be greatly appreciated.

Javascript

... // Code snippet continues
javascriptthree.jspoint-clouds

Answer №1

It appears that the issue lies with Orbit Controls not being able to handle the extremely large scene size. When the camera's position is set to such high values, the rotation speed and zoom adjust accordingly (making it move faster). However, since the overall bounding box of your visual data isn't very large, it likely quickly moves out of view.

To remedy this, I recentered your geometry using geometry.center(); without modifying the scene.position. You can see the updated result here: http://jsfiddle.net/ycg1hqu0/9/

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 causes my Bootstrap 5 popover to no longer open on focus when I reopen the modal it is attached to?

I am facing an issue with my Bootstrap 5 modal and the popovers that are attached to it. On hovering over a button in my HTML, a popover appears asking 'Are you sure?' and instructing the user to click the button to proceed. Clicking the button ...

javascriptjquerybootstrap-5

What is the best approach to setting up dynamic Vue routing?

I am working on implementing dynamic routing for the website that relies on changes in agreements. Here is the path tree I have set up: const routes = [ { path: "/", redirect: "/home", component: DefaultLayou ...

javascriptvue.jsvuexvue-router

Problem encountered with a selection menu

I'm experiencing some trouble with the dropdown menu. Whenever I try to move the mouse to access the dropdown menu, it seems unresponsive. I attempted adjusting the padding on a line of code but ended up moving the entire line instead. Here is the cod ...

javascriptjquerycss

Master the art of using useMutation from react-query: Learn how to handle error messages and success notifications effectively!

Currently in my Next.js project, I have integrated react-query to retrieve data from MongoDB. Within my form, a POST request is sent using the useMutation hook: /*** components ***/ import {Button, InputGroup} from "../index"; import {useMutatio ...

javascriptreactjsnext.jsreact-query

Issue with Tooltipster plugin causing jQuery function not to trigger upon clicking the link within the tooltip

Recently, I've been experimenting with a jquery plugin called Tooltipster by inserting some HTML into the tip with an href link. The problem arises when I try to add a class to the href and fire a jquery function upon clicking it. No matter how much I ...

javascriptjqueryhtmlclicktooltipster

Exploring the elements of Ext.js gridpanel and content components

Currently, I am diving into the world of Ext.js and finding it to be quite distinct from the asp.net ajax library despite some initial similarities. My goal is to populate a grid with test data formatted in JSON. The code snippet below illustrates my atte ...

javascriptasp.netajaxextjsclient-side

Attempting to delete a request using FormData resulted in a 500 error response

Currently, I am working on deleting an attachment by sending a request with form data containing a URL through an API path along with an ID. deleteAttachment(id, url) { const formData = new FormData(); formData.append('url', url); ...

javascriptvue.jsaxiosmultipartform-datamultipart

Issues Persist with Bootstrap Tree View - object passed but no output显示

After going through numerous discussions and solving several issues along the way, I have encountered a major problem where there is no output. As mentioned before, I am utilizing Bootstrap Tree View: To establish the hierarchical structure required for ...

javascriptjsontwitter-bootstrap

Can you provide instructions on how to configure the npm settings to use the current directory in a pre

I'm currently working on setting the installation directory from where the user is installing to an npm config variable. This will help me reference it in my installation script. Can anyone advise if there is a command line solution for this or will ...

javascriptnode.jsnpm

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...

javascripthtmlapi

Ways to allow scroll events on top of an overlay without passing click events

My goal is to develop a unique map annotation tool with custom controls, not relying on the built-in features of map providers. Imagine something like this: https://i.sstatic.net/70Yj7.gif I had the idea of placing a canvas over the map for this purpose ...

javascripthtmlcsscanvashtml5-canvas

Tips for refreshing the page using NavLink from React-Router?

Is there a way to use NavLink to highlight buttons with an active link and still load the page like an anchor tag? ...

javascriptreactjsreact-router

The process of updating JSON data based on changes triggered by DOM events such as drag and drop

One challenge I am facing involves a Vue component used to render child components based on JSON data. The goal is to allow users to move and add components by dragging and dropping DOM elements on the page, using tools like jQuery draggable, droppable, an ...

javascriptjsonvue.js

Tips for accessing a new variable within an array of objects using JavaScript

How can I retrieve a new variable (section) after every 3 objects are called from an array in JavaScript ES6 Map? I've attempted to do this with an ES6 Map, but I'm not achieving the desired result. Can someone please assist me? Thank you! Below ...

javascriptecmascript-6

"What is the best way to display an image from a table and then enlarge it to full size when a button is clicked, all

1. Understanding the Concept In my page, I have a table listing various images with unique names that are successfully displayed in the table. My goal is to display the selected image in full screen within a popup window when a button is clicked. 2. Que ...

javascripthtmljquery

Tips for building a responsive dropdown menu using data from a database query

Currently, I am fetching a list of companies from Firestore and attempting to display them as options in a dropdown menu. While the companies state is being populated correctly from Firestore, the options are not being created or updated dynamically. How c ...

javascriptreactjsmaterial-ui

inter-site requests & browser extensions

I'm currently working on developing a Firefox Addon using the new WebExtensions system. My goal is to: Extract specific text from a webpage (not owned by me) Evaluate it using an external website Display the result on the same page The issue I&apo ...

javascriptajaxcross-domainfirefox-addon-webextensions

The reference to the Material UI component is not functioning

I am currently working on a chat application and have implemented Material UI TextField for user message input. However, I am facing an issue with referencing it. After researching, I found out that Material UI does not support refs. Despite this limitatio ...

javascriptreactjsmaterial-ui

Creating a carousel in AngularJS using ng-repeat without resorting to jQuery

Looking for a solution to display elements on my page with ng-repeat in a carousel-like fashion. Each element should have a photo, short description, and reveal a long description on click. It's important that it's mobile-friendly so users can sw ...

javascriptangularjscarouselangularjs-ng-repeat

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal