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
      }));

到这里为止一切都很好。功能区的创建方法如下

​

​

我对此没有什么意见。但我需要你在下图中看到的这个额外的效果。可以看出，位于中心(焦点)的缩略图需要具有较暗的效果，以显示其被突出显示/可选择。所有剩下的缩略图都有一个透明的效果，说明它们是不可选的。

​

​

我试着用Lights in 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 );

我对Threejs和3d图形非常陌生。任何帮助都将不胜感激。谢谢。我也对任何其他的建议持开放态度，如果光不是用来达到最终结果的。

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;

}
 }