来自点光源的光线three.js

有没有办法从三点js场景中的点光源中看到光线。我尝试了雾，但它使场景中的所有物体变成雾的颜色。来自点光源的光线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/

来源

2016-12-04 suhail c

的Example请仔细阅读我们的[问]页关于如何改善这个问题的提示。你可以开始在手边添加[mcve]问题 – ochi

“光线”不是自动发生的事情。
典型地，通过创建与应用“射线”纹理简单阿尔法混合多边形采用先进的像素着色器（模版/阴影投射在点亮区域/体积雾），或在简单的情况下创建的光线。

点光源仅仅是在它的阴影阶段不适用定向计算光。相反，只进行基于距离的计算。

祝你好运！

来源

2016-12-05 04:55:41 Monza

如果我添加聚光灯，它会在有雾的场景中产生光线吗？ –

你可以给我一个链接？ – Monza

检查我的小提琴https://jsfiddle.net/bqv5ynbo/2/ –

可能的话，你可以使用VolumetricSpotlightMaterial从杰罗姆·艾蒂安。

对于我来说，工作的很好three.js所R71，虽然我还没有与后来的修改尝试过。

使用

来源

2016-12-05 12:15:30 prisoner849

来自点光源的光线three.js

回答

相关问题