From the hue of mossy green to the fiery shade of ruby red,

Question

From the hue of mossy green to the fiery shade of ruby red,

I managed to create a simple green circle using THREE.Shape.

Now, I am interested in changing the color of the circle so that it transitions from green in the middle to red at the border.

Although I found an example on this website, I'm struggling to figure out how to adapt it to my own project.

Here's the code snippet responsible for creating the circle:

var arcShape = new THREE.Shape();
arcShape.absarc(100, 100, circleRadius, 0, Math.PI * 2, false);

var geometry = new THREE.ShapeGeometry(arcShape);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff11, overdraw: 0.5, side: THREE.DoubleSide });

var mesh = new THREE.Mesh(geometry, material);
mesh.position = CirclePosition;
mesh.rotation.set(Algorithms.ConvertDegreesToRadians(-90), 0, 0);

javascript colors three.js geometry shapes

Answer 1

Answer №1

One alternative method is to utilize vertex colors for the solution

let redColor = new THREE.Color (0.9, 0.0, 0.0);
let greenColor = new THREE.Color (0.0, 0.9, 0.0);

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors});

geometry = new THREE.CircleGeometry(100, 10, 0, 3);

let maxFaces = geometry.faces.length;
for (let face=0; face<maxFaces; face++) {
    geometry.faces[face].vertexColors[0] = redColor;
    geometry.faces[face].vertexColors[1] = redColor;
    geometry.faces[face].vertexColors[2] = greenColor;
}

Answer 2

One alternative method is to utilize vertex colors for the solution

let redColor = new THREE.Color (0.9, 0.0, 0.0);
let greenColor = new THREE.Color (0.0, 0.9, 0.0);

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors});

geometry = new THREE.CircleGeometry(100, 10, 0, 3);

let maxFaces = geometry.faces.length;
for (let face=0; face<maxFaces; face++) {
    geometry.faces[face].vertexColors[0] = redColor;
    geometry.faces[face].vertexColors[1] = redColor;
    geometry.faces[face].vertexColors[2] = greenColor;
}

Answer 3

Answer №2

The reference you mentioned doesn't quite fit the current context. The most straightforward approach would be to utilize an image instead. If you're familiar with utilizing a technique specific to the WebGL renderer, I have created a JSFiddle that showcases a basic example of a GLSL shader: http://jsfiddle.net/5rtyu/

The crucial element lies within the fragment shader:

varying vec2 vUv;
varying vec3 vPosition;
uniform float radius;
void main() {
    vec3 center = vec3(150.0, 150.0, 0.0);
    float greenAmount = max(0.0, min(1.0, distance(vPosition, center) / radius));
    gl_FragColor = vec4(0.0, greenAmount, 1.0 - greenAmount, 1.0);
}

Another viable option would be to execute this functionality entirely in JavaScript using vertex colors, making it compatible with the CanvasRenderer as well; you'd simply need to determine the location of the central vertex.

Answer 4

The reference you mentioned doesn't quite fit the current context. The most straightforward approach would be to utilize an image instead. If you're familiar with utilizing a technique specific to the WebGL renderer, I have created a JSFiddle that showcases a basic example of a GLSL shader: http://jsfiddle.net/5rtyu/

The crucial element lies within the fragment shader:

varying vec2 vUv;
varying vec3 vPosition;
uniform float radius;
void main() {
    vec3 center = vec3(150.0, 150.0, 0.0);
    float greenAmount = max(0.0, min(1.0, distance(vPosition, center) / radius));
    gl_FragColor = vec4(0.0, greenAmount, 1.0 - greenAmount, 1.0);
}

Another viable option would be to execute this functionality entirely in JavaScript using vertex colors, making it compatible with the CanvasRenderer as well; you'd simply need to determine the location of the central vertex.

From the hue of mossy green to the fiery shade of ruby red,

Answer №1

Answer №2

Similar questions

Adjusting the height of content in Angular Material 2 md-tab

Having trouble figuring out how to load images into a div based on the current page location?

Each time, vue-router instantiate a fresh Component instance

How can you create a basic slideshow without relying on jQuery to cycle through images?

typescript scrolling location

The chosen selection automatically deactivates the checkbox with a matching value

Exploring ways to retrieve global variables within a required() file in Node.js

The absence of HTML and CSS is preventing the inclusion of an Ajax image viewer, back button, and

JavaScript API for Tableau

Guide on parsing a JavaScript file and converting the default export module to JSON with Node.js

Sequencing the loading of resources in AngularJS one after the other by utilizing promises

"Using JavaScript to extract a portion of the URL and perform a redirect

What are the steps to integrating D3js into a WordPress website?

Why is $scope.$watch('$destroy') being called in Angular UI Router 1.0 even when not leaving the state?

Employing the `instanceof` operator on instances generated by constructors from complex npm dependencies

Set up authentication within a separate AngularJS module

What could be causing my completed torrents to sometimes not be saved to my disk?

The Art of jQuery Data Processing

Looking for an API to retrieve random quotes and images from a website?

The React-native application initialized using npx create-react-app encountered an error and could not launch