Lichtstrahlen von Punktlicht three.js

Question

Gibt es eine Möglichkeit, die Lichtstrahlen von einem Punktlicht in einer Dreijs-Szene zu sehen. Ich habe versucht, Nebel, aber es macht die ganzen Objekte in der Szene die Farbe von Nebel.

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

} 

Wenn ich den obigen Code die ich kann nicht sehen, jeden Nebel in der Szene die Geige für obigen Code ausgeführt ist https://jsfiddle.net/bqv5ynbo/1/

Answer 1

‚Lichtstrahlen‘ sind nicht automatisch auftretende Sache.
In der Regel werden Lichtstrahlen mithilfe erweiterter Pixel-Shader (Schablonen-/Schattenprojektion über beleuchtete Region/volumetrischer Nebel) oder in einfachen Fällen durch einfache Alpha-Blended-Polygone mit angewendeten "Ray" -Texturen erzeugt.

Ein Punktlicht ist einfach ein Licht, das während der Abschattungsphase keine Richtungsberechnungen anwendet. Stattdessen werden nur entfernungsbasierte Berechnungen durchgeführt.

Viel Glück!

Answer 2

Möglicherweise können Sie VolumetricSpotlightMaterial von Jerome Etienne verwenden.

Für mich funktionierte es gut für Three.js r71, obwohl ich es mit späteren Revisionen nicht ausprobiert habe.

Example Nutzungs