What is the best way to fill the inside of a 2D circle using THREEjs?

Below is the code that generates a circle with a blue outline on a dark background:

let camera = new THREE.OrthographicCamera( -1.0, 1.0, 1.0, -1.0, -1.0, 1.0 );

var radius = 1;
var vertices = [];
for(let i = 0; i <= 360; i++){
    vertices.push(new THREE.Vector3(Math.sin(i*(Math.PI/180))*radius, Math.cos(i*(Math.PI/180))*radius, 0));
}

let geometry = new THREE.BufferGeometry().setFromPoints(vertices);

let material = new THREE.LineBasicMaterial({color:"blue"})
var lineStrip = new THREE.Line( geometry, material );

scene.add( lineStrip ); 

scene.add(camera);
renderer.render(scene, camera);

Although I'm aware that the object is currently just a line, I am interested in filling the inside of the line with color. How can I achieve this?

Answer №1

When you refer to the "inner portion," are you implying that you want the circle to be displayed as a solid shape? In that case, you should consider rendering it as a mesh rather than just lines. One solution is to create a mesh using the same vertices by establishing an index buffer manually, or alternatively, utilize the CircleGeometry class for a more convenient approach.

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 best way to extract data from a textarea HTML tag and store it in an array before iterating through it?

I have a project in progress where I am developing a webpage that will collect links from users and open each link in a new tab. I am using the <textarea> tag in HTML along with a submit button for link collection. Users are instructed to input only ...

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

The administrator user assigns a user value in the authentication context, but that value remains hidden from the component where it was originally set

The authentication feature: import React, { useState } from 'react'; let selectedUserByAdmin = ''; const AuthContext = React.createContext({ setSelectedUserByAdmin: () => {}, selectedUserByAdmin, }); export const AuthContextPro ...

Oops! Module './api/routers' not found

Hello, I hope everyone is doing well... Currently, I am working on developing a NextJS single-page web application. To create a custom server for NextJs, I am utilizing Express, MongoDB, and nodemon for hot reload functionality. Upon starting the server, ...

Mysterious Angular Provider: $http

Is there a way to include the $http service in the config method? When I try to do so, I encounter an "unknown Provider" error message. This is the snippet of code causing the issue: .config(function($http, $routeProvider, $provide) { $http.get("samp ...

Experimenting with a loader component in AngularJS

This is a test for a $resource with a loader describe('Service: MultiCalculationsLoader', function(){ beforeEach(module('clientApp')); var MultiCalculationLoader, mockBackend, calculation; beforeEach(inject(function (_ ...

Can you outline the key distinctions between AngularJS and ReactJS?

Looking to create a website that will be converted into a mobile application, I realize that my expertise lies more in desktop and Android native development rather than web client side development. After some research, I have decided to utilize HTML5, CSS ...

Issues persist with redirection when using AJAX and PHP in a login form, resulting in the user staying on the index page

After filling out both the email and password form fields and clicking the sign-in button, my script is functioning correctly. However, upon clicking the sign-in button, I want the user to be redirected to the home page. Currently, the user remains on the ...

Is it possible for me to create a Pomodoro clock similar to this one?

Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

"Exploring interactive 3D graphics with Three.js and Collada

I'm a beginner with Three.JS and I'm attempting to import a simple Sketchup model (a single cube) into Three.JS using the ColladaLoader. Although I am not receiving any errors, nothing is being displayed on the screen: var renderer = new THREE.W ...

Error message consistently pops up when using the jQuery search feature

My jQuery function is fetching data from a different domain, and I want to use AJAX to display that data when the user enters a value into the search box. However, no matter if I search by .productName or .itemCode, the app always gives me an error messa ...

Error: Node Command Line Tool cannot be located using NVM bash

Creating a basic node CLI tool has proven to be challenging when using NVM. Despite installing node locally and attempting to switch to system with nvm use system, the CLI file remains inaccessible. The code snippet includes the following shell designation ...

I encountered an issue in node.js where I was unable to delete a folder after renaming a zip

When attempting to rename an uploaded file using the code below: fs.rename('xxxxx','xxxxx',function(err) { }); I encountered an issue within the callback function. I attempted to remove a folder using the following code: fs.rename(& ...

Tips for ensuring a successful POST request using a hyperlink tag

Within my view file, I have the following code snippet: <a href="/logout" role="button" class="btn btn-lg btn-primary left-button">Logout</a> Inside my app.js file, I have implemented the following route for loggi ...

Accessing a JSON file from AWS S3 using Node.js

I was able to successfully read a JSON file stored in my S3 bucket, but I found myself having to perform various transformations that are somewhat unclear to me. When logging the data as it arrives, I am seeing an output of Buffer data s3.getObject(objPar ...

what is the best method to schedule tasks at a specific time in node-schedule?

I am facing an issue with running a node task daily at 8AM using the node-schedule package https://www.npmjs.com/package/node-schedule. Instead of running every day at 8AM, it is currently running every minute. What method should I use to correctly configu ...

Error in Rails app when incorporating Stripe API with Javascript involved

Incorporating Stripe into my rails app using the Koudoku gem has been challenging. When attempting to load the page for capturing user credit card information, I encounter an error in my JS console: Uncaught ReferenceError: $ is not defined (anonymous fun ...

I am struggling to make callback functions function properly with an ajax GET request

I'm struggling to extract specific elements from a JSON file retrieved from an external REST API and store them in a local dictionary variable for use in my JavaScript code. While my AJAX GET request is successful, I'm facing an issue where I can ...

Is it possible to maintain line breaks when using ".text" or ".textContent"? Any other options or solutions available? Workarounds to consider?

When trying to copy HTML from one element and paste it as text in another element, I noticed that newlines are not retained in the latest versions of Firefox and Chromium. For instance, if you run the code below (with valid HTML), the output will have the ...