I have a ribbon showcasing various thumbnails. These thumbnails are painted on a canvas and then added to a Texture.
var texture = new THREE.Texture(textureCanvas);
The mesh is generated as shown below
loader.load('mesh_blender.js', function(geom) {
var mesh = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({
color: 0xffffffff,
opacity: 0.7,
overdraw: 0.21,
side: THREE.DoubleSide,
transparent: true,
map: texture
}));
The ribbon creation is great as it is, but I am aiming to add an additional effect as depicted in the image below. I want the central thumbnail to appear darker to indicate it is highlighted/selectable, while the rest have a transparent effect implying they are not selectable.
I have been trying to figure out a way to achieve this using Lights in Threejs, but my attempts have not been successful so far. My initial idea was to use an AmbientLight to illuminate the entire ribbon and then apply a SpotLight specifically on the central image with a darker color to achieve the desired effect. However, my results have been inconclusive.
I've managed to create something like this
But the focus on the central image is not evident. Despite using a helper to display the Light direction in the image, the light does not seem to affect the central image as intended. Here is the code snippet I used to implement the SpotLight
var spotLight = new THREE.SpotLight( 0xffeedd );
spotLight.position.set( 0, -50, 50 );
spotLight.castShadow = true;
spotLight.decay = 2;
spotLight.distance = 300;
spotLight.angle = 0.5;
var helper = new THREE.SpotLightHelper( spotLight, 2.5 );
scene.add(helper);
scene.add( spotLight );
Being new to Threejs and 3D graphics, I would greatly appreciate any assistance or guidance. Thank you. I am also open to alternative suggestions if using Lights is not the best approach to achieve the desired outcome.