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; 

} 
}