I am relatively new to three.js and trying to implement a bloom effect on my object using UnrealBloomPass.js through the effect composer function. However, I have encountered some errors related to THREE.ShaderPass in the Effect Composer that I am unable to resolve due to my lack of experience. Can anyone offer assistance?
Below is my code:
// Setting up Canvas and Renderer
const canvas = document.querySelector("#canv")
const width = window.innerWidth;
const height = window.innerHeight;
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize( width, height );
renderer.setClearColor( 0x111, 1);
const fov = 100;
const aspect = width/height;
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
// Loading Geometry
const loader = new THREE.GLTFLoader().setPath("./");
loader.load("assets/model.glb", (gltf) =>{
root1 = gltf.scene;
scene.add(root1);
});
loader.load("assets/model2.glb", (gltf) =>{
root2 = gltf.scene;
scene.add(root2);
});
// Lighting Setup
const light1 = new THREE.DirectionalLight(0x404040);
const light2 = new THREE.AmbientLight(0x404040);
light1.position.y = 2;
light1.position.z = 2;
light1.intensity = 2;
light1.shadowDarkness = .1
light2.position.y = -2;
light2.position.z = -2;
light2.intensity = 2;
light2.shadowDarkness = .1
scene.add(light1);
scene.add(light2);
// Setting Controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enablePan = false;
controls.maxDistance = 2;
controls.minDistance = 1.3;
controls.maxPolarAngle = 2.5;
controls.minPolarAngle = .5;
controls.enableDamping = true;
controls.update();
// Implementing Effect Composer
const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = 0;
bloomPass.strength = 3;
bloomPass.radius = 1;
composer.addPass(bloomPass);
// Rendering Scene
function animate() {
var delta = clock.getDelta();
requestAnimationFrame( animate );
root1.rotation.y += 0.002;
root2.rotation.y += 0.0035;
controls.update()
// renderer.render( scene, camera );
composer.render(delta);
}
animate();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canv"></canvas>
<script src="build/three.min.js"></script>
<script src="build/OrbitControls.js"></script>
<script src="build/GLTFLoader.js"></script>
<script src="build/EffectComposer.js"></script>
<script src="build/RenderPass.js"></script>
<script src="build/UnrealBloomPass.js"></script>
<script src="exp.js"></script>
</body>
</html>