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（颜色可能较暗）以达到所需的效果。但那并不奏效。我有这样的事情

但中央聚焦图像没有任何影响。正如您在图片中看到的，我曾经使用助手来显示Light方向，但我无法真正看到图像上的任何光线。这是我用来开发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); 

我对Threejs和3D图形很新颖。任何帮助将不胜感激。谢谢。如果Lights不能用于实现最终结果，我也愿意接受其他建议。

Answer 1

您已将材质的不透明度设为0.7，因此添加另一个光线并不会完全为您提供预期结果。我建议使用射线识别器来识别中心的物体，并将该物体的不透明度设为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; 

} 
}