Check out my code snippet on JSFiddle: https://jsfiddle.net/gentleman_goat66/o5wn3bpf/215/
https://i.sstatic.net/r8Vxh.png
I'm trying to achieve the appearance of the red/green box with the border style of the purple box. The purple box was created using BoxGeometry, while the red/green one was manually generated with vertices and passed to BufferGeometry.
The goal is to retain the borders of the pink box in this JSFiddle, but incorporate the red/green gradient effect.
I've developed a custom shader that outlines the geometry with a black border by leveraging UV edges. However, I'm struggling to implement the red to yellow to green gradient effect achievable with MeshStandardMaterial
As seen in the code, I managed to create a partial gradient using vUv.y, but the alignment on the top face isn't correct. How can I modify the UVs and Shadercode to produce this effect within my existing custom shader?
In simpler terms, refer to an alternate JSFiddle: (https://jsfiddle.net/gentleman_goat66/o5wn3bpf/216/)
The objective is for the pink box in this JSFiddle to maintain its borders while exhibiting the red/green gradient effect.
https://i.sstatic.net/ScjJd.png
https://i.sstatic.net/Rk3uo.png
HTML
<script type="importmap">
{
"imports":
{
"three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f08498829595b0c0dec1c5c1dec3">[email protected]</a>/build/three.module.js",
"OrbitControls": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3978b918686a3d3cdd2d6d2cdd0">[email protected]</a>/examples/jsm/controls/OrbitControls.js"
}
}
</script>
...
JS
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';
class Heatmap {
constructor(){
console.log("Heatmap - constructor()");
//ThreeJS Variables
...
}
$(document).ready(function(){
console.log("DOM ready!");
new Heatmap();
});
CSS
body,html{
margin: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
background-color: black;
margin: 0;
}
UPDATE:
Here's an example demonstrating the desired color effect with boxGeometry: https://jsfiddle.net/gentleman_goat66/o5wn3bpf/249/
Now I just need to implement that functionality within the shader.