CODEWITHSUNDEEP
javascriptthree.jswebgllight
Darshit Hedpara
Darshit Hedpara

Reputation: 670

Ceiling Lights Effect Using THREE.JS

I don't find any good example to do that so any help would be very useful :)

I want achieve this type of light in ceiling of my house object in Three.js

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

I have Tried all the light type for example pointLight , DirectionalLight , SpotLight and in last i found this ReactAreaLight but still i don't achieve this type of light in my three.js scene.

enter image description here enter image description here

Upvotes: 0

Views: 1306

Answers (1)

Atul Mourya
Atul Mourya

Reputation: 191

You need to apply postprocessing. Try Effect Composer and 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();
}

Upvotes: 1

Related Questions