來自點光源的光線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

回答

相關問題