I want to achieve a black color in the center of my disk with a gradient effect towards the outer edges. However, when I use the GLSL code "gl_FragColor = vec4( vec3( vUv, 0.17 ), 1. );" I encounter some issues.
varying vec2 vUv;
void main()
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 0.8);
}
varying vec2 vUv;
void main()
{
gl_FragColor = vec4( vec3( vUv, 0.17 ), 1. );
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 1024 / 860, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ antialias: true});
camera.position.z = 30;
var my_shad = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertex').textContent,
fragmentShader: document.getElementById('frag').textContent
});
var radius = 8;
var segments = 80;
var circleGeometry = new THREE.CircleGeometry(radius, segments);
var disk = new THREE.Mesh(circleGeometry, my_shad);
scene.add(disk);
renderer.setSize(1024, 860);
document.body.appendChild(renderer.domElement);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();