As a newcomer to Three.js and webGL programming, I have successfully created a cone and a cylinder in my scene using the script provided below:
var scene;
var camera;
var renderer;
var createACone = function() {
// Cone creation code here
}
var createACylinder = function(radiusTop, radiusBottom, height, x, y, z, opacity=0.5, z_rotate = 0, transparent=true, thetaStart=0, thetaLength=2*Math.PI) {
// Cylinder creation code here
}
var createLight = function () {
// Light creation code here
};
var init = function(){
// Scene initialization code here
}
window.onload = this.init;
I am now looking to divide the cone and cylinder horizontally into two colors based on their height. I want the lower base to halfway point of the cylinder to be red, and the rest to be blue. Similarly, I want the cone's vertex to midpoint to be red, with the rest being blue. I have explored the material and geometry sources but haven't found a solution. Splitting each geometry into two manually is not ideal, as I desire a dynamic color ratio. Is there a better method within Three.js to achieve this effect?
Thank you in advance for your assistance.