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中的Lights来解决这个问题，但不是很成功。我想过使用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图形的新手。任何帮助将不胜感激。谢谢。如果不使用Lights来达到最终结果，我也会接受任何其他建议。

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;

}
 }