SpotLightはThreeJSで動作しません

Question

私は、いくつかのサムネイルを表示するリボンを持っています。背景を与えるだけで、サムネイル画像はキャンバスにペイントされ、テクスチャに追加されます。ここまでで結構です

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

すべてを次のように

var texture = new THREE.Texture(textureCanvas); 

メッシュが作成されます。私はこれで何の不満を持っていない

次のようにリボンが作成されます。しかし、私はあなたが下のイメージで見るこの追加の効果が必要です。見ることができるように、中心（フォーカス）にあるサムネイルは、強調表示されている/選択可能であることを示すために、より暗い効果を有する必要がある。残りのすべてのサムネイルは、選択できないことを示す透明な効果があります。

私は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; 

} 
}