What methods can be used to troubleshoot background issues in Three.js? I am experiencing a bug with an infinite

demo

let renderer,
scene,
camera,
sphereBg,
nucleus,
stars,
controls,
container = document.getElementById("canvas_container"),
timeout_Debounce,
noise = new SimplexNoise(),
cameraSpeed = 0,
blobScale = 3;

// Initialization and animation functions
init();
animate();

// Rest of the code...
body {
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-image: url("https://images.unsplash.com/photo-1603847734787-9e8a3f3e9d60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000");
    background-size: cover;
}

// CSS styling for buttons
button {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid white;
    border-radius: 5px;
    font-size: 0.9rem;
    padding: 0.5rem 0.9em;
    background: #000000;
    color: white;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s;
}

button:hover {
    background: #ffffff;
    color: #000000;
}
// Rest of the code...

How remove the line between the pictures in the sphere ? I've already tried a lot of things, even other geometries, but the line is still there, I'm trying to make an endless background.

I hope from the community for any help in this matter, and if there are any examples of an infinite background, then I would be very happy to look at them, I found a question similar to nowhere else

https://i.sstatic.net/46pxO.png

Answer №1

If desired, you have the ability to configure wrapping and repetition in this manner to achieve a seamless texture effect:

textureSphereBg.wrapS = textureSphereBg.wrapT = THREE.MirroredRepeatWrapping;
textureSphereBg.repeat.set(2, 2);

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

Concentrate on what comes next

Within my JavaScript code, I have the following line: $('input')[$('input').index(this)+9].focus(); I intended for this line to focus on the next element. However, when it executes, I encounter the following error: Error: [$rootSc ...

Add elements to the array, extract elements from the array

tag, I am currently facing a challenge with transferring multiple attributes from SharePoint list items into an array (only selected items in a view) and then passing that array to a function where I can extract and use these attributes to create new list ...

Unexpected behavior with MongoDB update function

If I have a model like this: var stuffSchema = new mongoose.Schema({ "id": 1, "cars": { "suv": [], "sports": [], "supercar": [{ "owner": "nick", "previousOwners": [ ObjectId("574e1bc0abfb4a180404b17f"), ObjectId ...

Avoiding type errors in d3 v5 axis by using Typescript

I am new to TypeScript and I have some code that is functioning perfectly. I believe if I define a type somewhere, d3's generics will come into play? Within my code, I have an xAxis and a yAxis. Both are the same, but D3 seems to have an issue with t ...

Unexpected JSON data submission

I am encountering an issue with JSON. Since I am not proficient in JSON, identifying the problem is challenging. Here is the JSP code snippet. $(document).ready( function(){ window.onload = dept_select; $("#sales_dept_id").change ...

Making numerous changes to a single field in mongoDB can result in the error message: "Attempting to edit the path 'X' will generate a conflict at 'X'."

Looking to streamline my update operation: private async handleModifiedCategoryImages(data: ModifiedFilesEventData) { this.categoryModel .findByIdAndUpdate(data.resourceId, { $pullAll: { images: data.removedFiles || [] } ...

rearranging the sequence of buttons using JavaScript

I am faced with the challenge of making a series of buttons draggable and droppable within a parent div without using any external libraries at the request of the client. Although I could have easily accomplished this task with jQuery, it's an opportu ...

How can you implement WriteFile in a GET Request without causing the response to be blocked

During the initialization of the app, I require a specific request to be made. This request entails parsing a portion of the JSON response into JavaScript and then saving it to a file. Simultaneously, the rest of the response needs to be sent to the front ...

Combining an array of intricate data models to create

Currently, my setup involves using Entity Framework 7 in conjunction with ASP.NET MVC 5. In my application, I have various forms that resemble the design showcased in this image. By clicking on the "new" button within these forms, a Bootstrap modal like t ...

Error alert: Unable to find the specified word

Having trouble writing a word to the database due to an error: ReferenceError: Patikrinta is not defined. Below is my ajax script for sending data to a PHP file, and then the PHP script itself if needed. Haven't found a solution on Stack Overflow. $s ...

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...

jQuery for Revealing or Concealing Combinations of Divs

UPDATE: Check out this answer. I have a complex query related to jQuery/JavaScript. I came across a post dealing with a similar issue here, but my code structure is different as it does not involve raw HTML or anchor tags. Essentially, I am working on ...

Remove the underline from links in gatsbyjs

When comparing the links on (check source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), they appear without an underline. However, on my blog (source code here: https://github.com/YikSanChan/yiksanchan.com), all links are un ...

Issue with ng-checked not detecting boolean values retrieved from local storage

I'm working on a code snippet in my controller where I have a checkbox in my HTML with "ng-checked="enterToSend" and "ng-click="enterToSendCheck()" attached to it. $scope.enterToSend = localStorage.getItem('enterToSend'); $scope.enterToSen ...

Remove an image that has been selected while uploading multiple images using AngularJS

If I want to delete a specific image from multiple uploads by clicking on the image in AngularJS, how can I achieve this? Each uploaded image has an associated textbox. When the delete icon on the image is clicked, both the image and the corresponding text ...

The Ajax readyState consistently displaying a value of 0

I am encountering an issue with my Ajax code as it always returns 0 when I access 'readyState'. I have not been able to identify the source of the problem yet. Any assistance on this matter would be greatly appreciated: var xhr = null; function ...

Is there a method to halt scrolling through programming?

This code snippet is turning off all scrolling capabilities. var myScroller = new IScroll('#wrapper'); myScroller.disable(); Is there a way to prevent scrolling without disabling iScroll? var myScroller = new IScroller('#wrapper'); m ...

Incorporate object keys into an array using JavaScript

Query: I'm working on a JavaScript project and I have an array that looks like this: [6.7, 8, 7, 8.6]. I need to transform this array into an array of objects with named properties: [{y: 6.7} , {y: 8}, {y: 7}, {y: 8.6}]. Can someone guide me on how to ...

What is the method for updating the content within a div element?

I am trying to add multiple elements to my content, including an h1 element, an input field, and some buttons. I have written a function to create the h1 and input elements, but when trying to add them to my content div, I encountered an error (TypeError ...

Angular component equipped with knowledge of event emitter output

I have a custom button component: @Component({ selector: "custom-submit-button" template: ` <button (click)="submitClick.emit()" [disabled]="isDisabled"> <ng-content></ng-content> </butto ...