来自点光源three.js的光线

Question

有没有办法在 Three 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

“光线”不是自动发生的。
通常，光线是使用高级像素着色器（照明区域上的模板/阴影投影/体积雾）创建的，或者在简单的情况下，通过创建应用“光线”纹理的简单 alpha 混合多边形来创建。

点光源只是一种在其着色阶段不应用方向计算的光源。相反，只进行基于距离的计算。

祝你好运！

Answer 2

您可以使用 Jerome Etienne 的 VolumetricSpotlightMaterial。

对我来说，它在 Three.js r71 上运行良好，虽然我没有在以后的版本中尝试过。

Example 的使用率