使用THREE.JS的天花板灯效果

Posted 2021-05-02

我没有找到任何好的例子，所以任何帮助都会非常有用:)

我想在Three.js中在我家的天花板上实现这种类型的灯光

rectLight = new THREE.RectAreaLight( 0xffffff, 500, 10, 10 );
rectLight.position.set( 5, 5, 0 );
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );

我尝试了所有灯光类型，例如pointLight，DirectionalLight，SpotLight，最后我发现了这个ReactAreaLight，但我仍然没有在我的three.js场景中实现这种类型的灯光。

答案

您需要应用后处理。试试Effect Composer和BloomPass

//For adding additional effect an the top of rendering
function postprocessing() {
    renderScene = new THREE.RenderPass(scene, camera);
    effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
    effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
    var copyShader = new THREE.ShaderPass(THREE.CopyShader);
    copyShader.renderToScreen = true;
    bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, 0.1, 0.85); //( resolution, strenght, radius, threshold));
    composer = new THREE.EffectComposer(renderer);
    composer.setSize(window.innerWidth, window.innerHeight);
    composer.addPass(renderScene);
    composer.addPass(effectFXAA);
    composer.addPass(bloomPass);
    composer.addPass(copyShader);
}

// start the render loop
function render() {
    renderer.clear();
    composer.render();
    renderer.render(scene, camera);
    composer.render();
}