点光源からの光線three.js

Question

3 jsシーンの点光源からの光線を見る方法はありますか？私は霧を試みましたが、シーン内のオブジェクト全体が霧の色になります。

var width = $('#g_pre_emo').width(); 

var scene = new THREE.Scene(); 
scene.fog = new THREE.Fog(0xffff00, 0, 10); 
var camera = new THREE.PerspectiveCamera(50, width/500, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer({antialias: false}); 
renderer.setSize(width, 500); 

$('#g_pre_emo').append(renderer.domElement); 


var intensity = 2.5; 
var distance = 5; 
var decay = 2.0; 

var light = new THREE.AmbientLight(0x404040); // soft white light 
scene.add(light); 

renderer.shadowMap.Enabled = true; 
renderer.setClearColor(0xffffff, 1); 
var happyGroup = new THREE.Object3D(); 
var sadGroup = new THREE.Object3D(); 
var angryGroup = new THREE.Object3D(); 
var relaxedGroup = new THREE.Object3D(); 

scene.add(happyGroup); 
scene.add(sadGroup); 
scene.add(angryGroup); 
scene.add(relaxedGroup); 
var c1 = 0xffff00; 


var sphere = new THREE.SphereGeometry(0.25, 16, 8); 
light1 = new THREE.PointLight(c1, intensity, distance, decay); 
light1.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: c1}))); 
scene.add(light1); 

happyGroup.position.set(-3, 3, 0); 
sadGroup.position.set(3, 3, 0); 
angryGroup.position.set(-3, -3, 0); 
relaxedGroup.position.set(3, -3, 0); 


var happyGeometry = new THREE.SphereGeometry(1, 50, 50); 
var happyMaterial = new THREE.MeshNormalMaterial(); 
var happySphere = new THREE.Mesh(happyGeometry, happyMaterial); 
scene.add(happySphere); 
happyGroup.add(happySphere); 

var sadGeometry = new THREE.SphereGeometry(1, 50, 50); 
var sadMaterial = new THREE.MeshNormalMaterial(); 
var sadSphere = new THREE.Mesh(sadGeometry, sadMaterial); 
scene.add(sadSphere); 
sadGroup.add(sadSphere); 

var angryGeometry = new THREE.SphereGeometry(1, 50, 50); 
var angryMaterial = new THREE.MeshNormalMaterial(); 
var angrySphere = new THREE.Mesh(angryGeometry, angryMaterial); 
scene.add(angrySphere); 
angryGroup.add(angrySphere); 

var relaxedGeometry = new THREE.SphereGeometry(1, 50, 50); 
var relaxedMaterial = new THREE.MeshNormalMaterial(); 
var relaxedSphere = new THREE.Mesh(relaxedGeometry, relaxedMaterial); 
scene.add(relaxedSphere); 
relaxedGroup.add(relaxedSphere); 


renderer.gammaInput = true; 
renderer.gammaOutput = true; 
camera.position.z = 15; 

function render() { 
    renderer.render(scene, camera); 
} 
; 
render(); 
animate(); 
function animate() { 
    requestAnimationFrame(animate); 

} 

私は上記のコードを実行する場合、私は 上記のコードのためのフィドルが https://jsfiddle.net/bqv5ynbo/1/

Answer 1

ある「光線は」自動的に発生するものではありません、シーン内の任意の霧を参照してください傾けます。
通常、光線は、高度なピクセルシェーダ（ライト領域/体積霧上のステンシル/シャドウ投影）を使用して作成されるか、単純な場合には「レイ」テクスチャが適用された単純なアルファブレンドポリゴンを作成することによって作成されます。

ポイントライトは、シェーディングフェーズで方向計算を適用しない単純なライトです。代わりに、距離に基づく計算だけが行われます。

Good Luck！

Answer 2

おそらく、ジェローム・エティエンヌのVolumetricSpotlightMaterialを使用できます。

私は、Three.js r71でうまくいきましたが、私は後の改訂でそれを試していませんでした。使い方