Working with color fills in Three.js shapes

Looking for some help with code that generates a yellow circle:

  let radius = 5,
    segments = 64,
    material = new THREE.LineBasicMaterial( { color: 0xF0C400 } ),
    geometry = new THREE.CircleGeometry( radius, segments );

  geometry.vertices.shift();
  let circle = new THREE.Line(geometry, material);

  circle.position.set(5,5,0);
  circle.rotation.set(1.57,0,0);
  scene.add(circle);

I'm wondering how to fill the circle with color instead of just having an outline. I attempted to change the material but it didn't work..

Update: Turns out, changing THREE.Line to THREE.Mesh did the trick!

javascriptthree.jsshapesfill

Answer №1

newMaterial = new THREE.MeshBasicMaterial( { color: 0xF0C400, side: THREE.DoubleSide } );

newGeometry = new THREE.CircleGeometry( radius, segments );

newMesh = new THREE.Mesh( newGeometry, newMaterial );

To explore additional solutions, visit

version r.66 of three.js

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

Resetting a Material UI search filter TextField back to its initial state after clearing it

Unleashing the power of ReactJS alongside Material UI has been a journey of ups and downs for me. While I managed to create a versatile search filter component for my data tables that worked like a charm, I now find myself at a crossroads. My new goal is t ...

javascriptreactjsmaterial-ui

How can I execute route-specific middleware in advance of param middleware in Express v4?

Let me share a unique situation in my routing setup where I need to trigger a middleware before the parameter middleware is executed: router.param('foo', function (req, res, next, param) { // Accessing the param value ... next() }) router ...

javascriptnode.jsexpress

Finding the smallest value for each day in MongoDB using Mongoose

I have a collection in my MongoDB database called measured_data that includes entries for each day containing the fields measured_at and value. I am looking for a way to use Mongoose to find the lowest value recorded for each day. Any insights or suggest ...

javascriptmongodbmongoose

Tips on adding a watermark to multi-page PDFs using an image as the watermark

I am currently working on embedding a watermark onto every page of a PDF file using the image-watermark library. So far, I have successfully added a text watermark to files with only one page but now I am exploring ways to extend this functionality for mul ...

javascriptnode.jspdfnext.jswatermark

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

Tips for How to Put a Delay on Ajax Requests and Display a Progress Bar During Loading

I am using checkboxes in the sidebar. When a user selects a checkbox from the sidebar, it displays the post normally. Is there a way to add a progress bar to delay the Ajax result? This is my Ajax code: <script> jQuery(document).ready(function($){ ...

javascriptjqueryajax

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

javascriptangulartypescriptangular5

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...

javascriptreactjsmaterial-ui

Is there a way to display a loader when an item is selected from a dropdown menu? For example, while data is being fetched from the backend, can we

This is the HTML form division I have created: <div class="col-lg-2 "> <select name="limitCount" id="limitCount" ng-model="limitCount" class="form-control col-md-2 panel-refresh" ...

javascripthtmlangularjsmongodb

What is the correct method for asynchronously loading CSS files in web development?

On a mission to enhance my website's performance, I set out to achieve the perfect score on PageSpeed Insights. Everything was going smoothly until I encountered an issue with CSS delivery. I initially achieved a flawless result by utilizing the prel ...

javascripthtmlcss

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

I have a text input box appearing on the left side with a button positioned next to it on the right. For certain pages, I want to display a checkbox next to the input box and move the button below it. Is there a way to achieve this using CSS flexbox or a ...

javascripthtmljquerycss

Executing search bar capability through the use of AJAX and HTTP requests in JavaScript

I am currently working on implementing a search feature that will locate data based on the user's query. Specifically, I want to create a search bar in my HTML that can search for book titles stored in my database accessible through GET requests. Alth ...

javascriptajaxgetxmlhttprequest

What is the proper way to use Object.entries with my specific type?

On my form, I have three fields (sku, sku_variation, name) that I want to use for creating a new product. I thought of converting the parsedData to unknown first, but it seems like a bad practice. export type TProduct = { id: string, sku: number ...

javascriptreactjstypescript

What could be the reason for the xtk.js nrrd loader successfully loading my file on a local asp.net-core site, but encountering issues when deployed to production on

In my ASP.NET Core development local environment, I have no trouble loading and viewing my .nrrd file. However, once I deploy to Azure and try to view the site, I encounter an error saying "Uncaught TypeError: can't access property 'split', ...

azureasp.net-corethree.jsloaderxtk

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

javascripthtmlcssangulartypescript

`Adding data to Rails database and displaying without the need for reloading using AngularJS`

When working on my Rails project, I encountered an issue with adding data to the database using `http.post` from an AngularJS controller. Below is the code snippet demonstrating this: RestaurantIndexCtrl.js.coffee: restauranteur.controller 'Restaura ...

javascriptruby-on-railsajaxangularjs

The error middleware in Express is not defined

I'm facing an issue where the Express API error messages are returning as undefined on the frontend. This is preventing me from displaying proper error messages to alert users. Interestingly, the error messages seem to appear fine in the developer to ...

javascriptexpress

What is the best way to apply a hover effect to a specific element?

Within my CSS stylesheet, I've defined the following: li.sort:hover {color: #F00;} All of my list items with the 'sort' class work as intended when the Document Object Model (DOM) is rendered. However, if I dynamically create a brand new ...

javascriptajaxmootools

Transmit ByteArray to JavaScript

Is there a way to send a jpg image as a ByteArray from ActionScript 3 to JavaScript? Additionally, how can one convert a ByteArray back into an image using JavaScript? ...

javascriptapache-flexflashactionscript-3arrays

Determine the quantity of items that meet specific criteria

The initial state of my store is set as follows: let initialState = { items: [], itemsCount: 0, completedCount: 0 }; Whenever I dispatch an action with the type ADD_ITEM, a new item gets added to the items array while also incrementing the count in ...

javascriptreactjsreduxreact-redux