I am struggling to grasp the concept of Three.js shaders. My goal is to apply a color to a mesh, but only up to a specific point. Here is my progress so far.
- I want the green color to "stop" at 50% of the mesh height
- For the remaining part of the mesh (above 50%), I am open to either filling it with another color or leaving it unfilled (both options would work)
Shader code:
const _VS = `
uniform vec3 bboxMin;
uniform vec3 bboxMax;
varying vec2 vUv;
void main() {
vUv.x = (position.x - bboxMin.x) / (bboxMax.x - bboxMin.x);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const _FS = `
uniform vec3 incompleteColor;
uniform vec3 completenessColor;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(mix(incompleteColor, completenessColor, vUv.x), 1.0);
}
`;
Javascript code:
let geometries = element.geometry.clone(); // Inherits geometries from parent element
let wall = new THREE.Mesh(
geometries,
new THREE.ShaderMaterial({
uniforms: {
incompleteColor: {
value: new THREE.Color('red')
},
completenessColor: {
value: new THREE.Color('green')
},
bboxMin: {
value: element.geometry.boundingBox.min
},
bboxMax: {
value: element.geometry.boundingBox.max
}
},
vertexShader: _VS,
fragmentShader: _FS,
})
);
wall.castShadow = true;
wall.position.setFromMatrixPosition(element.matrixWorld);
wall.rotation.setFromRotationMatrix(element.matrixWorld, 'XYZ');
scene.add(wall);
This image demonstrates what I am aiming for:
LEFT: The current result with the provided code (Three.js scene)
RIGHT: The desired outcome
https://i.sstatic.net/2w0lh.png
I have spent hours researching this problem, but I haven't found a suitable example to guide me in the right direction.