Guide to displaying a spherical grid helper in Three JS

Currently, I am immersed in a fascinating project that involves the movement of small objects and displaying them within a 360-degree image using the ThreeJS library. To achieve this, I am utilizing the concept of a Spherical coordinate system within a sphere of specific radius to control the object movement. The user's perspective starts at the center of this sphere. My goal is to incorporate grid helper lines on the sphere, resembling longitude and latitude lines. After some research, I came across the code snippet below on the library's page:

var radius = 10;
var radials = 16;
var circles = 8;
var divisions = 64;

var helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
scene.add( helper );

However, the above code snippet only creates a polar plate with circles, rather than the spherical grid helper I envision for my scene.

https://i.sstatic.net/sy7Ms.jpg

Answer №1

CircleGeometry creates a flat circle shape. For a more spherical appearance, you can use SphereBufferGeometry and apply a wireframe effect to it:

var radius = 10;
var latSegments = 18;  // 10° increments
var longSegments = 36; // 10° increments

var geometry = new THREE.SphereBufferGeometry( radius, longSegments, latSegments);
var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: true
});

var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

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 the proper way to reference the array you require within a function?

Is there a way to input the name of an array (such as a, b, or any other chosen array) into a function? I've tried using inputs[3].value but it doesn't seem to be working. How can I achieve this? I have a total of 4 fields, and I think using sele ...

Looking to verify characters, numbers, and special characters with jQuery's regular expression feature?

Currently, I am facing a challenge in validating the password field to allow characters, numbers, and special characters. It is essential that the password consists of exactly 8 characters. Despite searching online for a solution, I have been unsuccessful ...

When initially compiling Angular 5, an error (TS2339) may occur, but after a successful compilation, everything runs smoothly

In a unique scenario, I wrote code that fetches information from an API server without knowing the structure of the response fields. Once I receive the response, I need to create a form for updating the data and sending it back. To handle unknown ngModel p ...

What is the reason for triggering a rerender when there is a modification to a map() element using document.querySelector() in JS/next.js?

const slides = [ [string1, string2, stringi], [string1, string2, stringi], [string1, string2, stringi], [string1, string2, stringi], ]; const changeSlide = (num) => { const discipline = document.querySelector("#changeSlide-&quo ...

Center the image within the div by setting its position to absolute

<div class='img-box'> <img /> //position absolute <img /> //position absolute <img /> //position absolute <img /> //position absolute I am struggling to center the images within this div because of their absolute p ...

I encountered a PrimeVue error while running a Vue Jest test

When working on a Vue jest test, I encountered an error message "No PrimeVue Confirmation provided!" which seemed to be related to the useToast() and useConfirm() services. "transformIgnorePatterns": [ "<rootDir>/node_modules/(?! ...

Is there a specific directive in Angular that allows for variable declarations using the "

This interesting piece discusses the usage of a let-name directive in the template: <ng-template #testTemplate let-name> <div>User {{ name }} </div> </ng-template> Can anyone tell me if this is a part of the standard ang ...

Issue with Flask-Cors in Nuxt with Flask and JWT authentication implementation

I have exhausted all the available solutions to my issue, but I still can't seem to pinpoint the problem. Despite trying every solution out there, nothing seems to be of any help. Every time I make a request, the browser blocks it due to CORS Policy ...

What is the best way to retrieve data from Elastic Search using Node.js?

I currently work with NODE JS in conjunction with an elastic search DB. Within this setup, I am utilizing the following package: https://www.npmjs.com/package/@elastic/elasticsearch In my elastic search DB, I have a collection that looks like this: [ { ...

Incorporating jQuery Masonry for seamless overlapping effect while implementing infinite scroll

I've developed a script that enables infinite scrolling on my website: $(document).ready(function() { function getLastId() { var lastID = $(".element:last").attr("id"); $.post("2HB.php?action=get&id=" + lastID, ...

What is the most effective method for utilizing v-model with a pre-populated form in Vue.js?

Need some help with a form and looping through items in a module to generate textfields. Take a look at the photo for context: Link: https://i.sstatic.net/MPAVq.jpg Currently, I'm using a structure like this... <v-row class=" ...

External function does not support jQuery types

In my theme.js file, I currently have the following code: jQuery(function ($) { accordion($) }) const accordion = ($) => ... By placing the accordion function directly into the jQuery function, Typescript is able to assist with the installed jquery ...

Aurelia's numerous applications spread across various pages

Currently, I am in the process of finalizing the initial release of a large-scale website built using PHP (Phalcon), MySQL, and JQuery. The technology stack may be a bit outdated, but it was originally prototyped years ago and due to various circumstances, ...

Initiate an AJAX call with various data formats included

I am currently developing an application that allows users to input values through an interface and send AJAX requests (similar to a REST API). My question pertains to sending data of multiple types in a single request. For example, here is a scenario: F ...

Transferring an ES6 class from Node.js to a browser environment

I've been exploring ways to bundle a super basic ES6-style class object for the browser. Here's an example: class Bar { constructor(){ this.title = "Bar"; } } module.exports = Bar; While I can easily utilize this in my node projec ...

Accessing Public Photos from Facebook Users

Is it possible to create a web app that can retrieve all public photos from any user's Facebook account using their profile URL? For instance, some Facebook profiles allow non-logged in users to view profile pictures and cover photos. I am developing ...

Implementing Material UI datetime-local feature with no minute selection

Is there a way to hide minutes in a TextField with type = datetime-local? <TextField label="From" type="datetime-local" InputLabelProps={{ shrink: true, }} /> This is how it appears on my end: screenshot ...

JavaScript maintain a variable that holds onto nodes even after they have been removed

Recently, I encountered a seemingly simple issue with JavaScript that has me stumped. In my code, I have a variable that stores nodes with a specific class. My goal is to remove these nodes from the DOM while still retaining them in the variable. However, ...

React Material UI Table - All switches toggled simultaneously

I recently integrated a react mat ui table into my application and included switches in one of the columns. However, I am encountering an issue where all the switches toggle together instead of independently. Any suggestions on how to resolve this? < ...

The event listener attached to this model is failing to trigger when there are

The issue is that the "change" event is not being triggered in the code snippet below. var PageView = Backbone.View.extend({ el: $("body"), initialize: function(){ this.model.on("change:loading", this.loader, this); }, loader: func ...