SpotLight не работает в ThreeJS

Question

У меня есть лента, которая отображает несколько миниатюр. Чтобы дать задний фон, миниатюры будут нарисованы на холсте, а затем добавлены в текстуру.

var texture = new THREE.Texture(textureCanvas); 

Сетка создается следующим образом

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, 
     //shading: THREE.SmoothShading, 
     map: texture 
     })); 

Все, что до здесь хорошо. Лента создается следующим образом

У меня нет никаких жалоб с этим. Но мне нужен этот дополнительный эффект, который вы видите на изображении ниже. Как можно видеть, эскиз, находящийся в центре (фокус), должен иметь более темный эффект, чтобы показать, что он подсвечивается/выбирается. Все остальные миниатюры имеют прозрачный эффект, изображающий, что они не могут быть выбраны.

Я пытаюсь обернуть мою голову вокруг этого, используя Свет в Threejs, но не очень успешно. Я думал об использовании AmbientLight, чтобы пролить свет на всю ленту, а затем на SpotLight только на центральном изображении (возможно, с более темным цветом) для достижения желаемого эффекта. Но это не сработало. У меня что-то вроде этого

Но центр сфокусированное изображение не имеет никакого эффекта. Как вы можете видеть на изображении, я использовал помощника, чтобы показать направление «Свет», но я не вижу на нем какого-либо света. Это код, который я использую для разработки SpotLight

var spotLight = new THREE.SpotLight(0xffeedd); 
spotLight.position.set(0, -50, 50); 
spotLight.castShadow = true; 
    //spotLight.penumbra = 0.2; 
spotLight.decay = 2; 
spotLight.distance = 300; 
spotLight.angle = 0.5; 
var helper = new THREE.SpotLightHelper(spotLight, 2.5); 
scene.add(helper); 

scene.add(spotLight); 

Я очень новичок в трехмерной и трехмерной графике. Любая помощь будет оценена. Спасибо. Я открыт для любого другого предложения, если для достижения конечного результата не использовать огни.

Answer 1

Вы дали непрозрачность материала как 0,7, поэтому добавление другого света точно не даст вам ожидаемого результата. Я бы предложил использовать raycaster, чтобы идентифицировать объект в центре и сделать непрозрачность этого объекта как 1, а остальное - 0,7.

var intersects = raycaster.intersectObjects(objects); 

использовать это, чтобы получить объекты, которые пересекаются в массиве. И в функции рендеринга задается непрозрачность первого элемента в массиве, который является объектом в середине до 1. Это работает только в том случае, если миниатюрами являются все отдельные объекты.

//set as the center of you vision 
var mouse = new THREE.Vector2(); 
mouse.x = 0; 
mouse.y = 0; 

function highlightObject() { 

// update the picking ray with the camera and mouse position  
raycaster.setFromCamera(mouse, camera); 

// calculate objects intersecting the picking ray 
var intersects = raycaster.intersectObjects(scene.children); 

//sets the object in the center opacity = 0.2 
if(intersects.length > 0) { 
    intersects[0].object.material.opacity = 0.2; 
} 

//sets the opacity of the rest of the objects in scene to opacity = 1.0 
for (var i = scene.children.length - 1; i >= 0; i--) { 
    var obj = scene.children[i]; 
    obj.material.opacity = 1.0; 

} 
}