javascriptthree.jspost-processingbloom

ThreeJS How to use Bloom Post-Processing Without NPM in VanillaJS

I want a bloom effect for my scene when using an emissive map like shown in this ThreeJS Example.

I've tried to understand the code a little bit but I'm basically stuck. The examples are all made with NPM and I do not use this method for my project. I'm sure it is possible to have the bloom effect without the help of this but I struggle to make sense of it all.

As for what I have already, just a basic setup with StandarMeshMaterial:

scene = new THREE.Scene();
loader = new THREE.TextureLoader()
camera = new THREE.PerspectiveCamera( 47, (window.innerWidth/window.innerHeight) / (windowHeight*heightRatio), 0.01, 10000 );
renderer = new THREE.WebGLRenderer( { canvas: document.getElementById( canvasElement ), antialias: true, alpha: true } );
controls = new THREE.OrbitControls( camera, renderer.domElement );

ect..

function animate() {
    requestAnimationFrame( animate );           
    controls.update();              
    renderer.render( scene, camera );           
};  
        
ect..

I really just want to apply some post-processing effect so my emissive materials actually appear to be glowing, which is not whats happening at the moment but I just cannot figure out how..

What would be the simplest way to get this result?

Solution

  • First, NPM is not a framework. It is a package manager to install libraries your project depends on without manually downloading and copying the scripts to your project folder. What I read from your question is that you are not familiar with that module approach. You want to insert scripts and all three.js related stuff should be available under the global namespace THREE?

    Assuming that you downloaded three.js to a folder named three, you could import the scripts as follows. Ensure to load the scripts from examples/js and not examples/jsm.

    <script src="three/build/three.min.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script src="three/examples/js/loaders/GLTFLoader.js"></script>
<script src="three/examples/js/postprocessing/EffectComposer.js"></script>
<script src="three/examples/js/postprocessing/RenderPass.js"></script>
<script src="three/examples/js/postprocessing/UnrealBloomPass.js"></script>

    Now, you can use these classes under the THREE namespace.

    const renderScene = new THREE.RenderPass( scene, camera );

const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );

    Follow the example code, remove the import statements and add THREE where missing.