Struggling to get EffectComposer to render

Questions
1

Hi there ! I’m sure I’m missing something, but I can’t get anything to render (not even basic render pass) through EffectComposer…

Here is my code :

<!DOCTYPE html>
<html>
	<head>
		<title>fml</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/js/loaders/OBJLoader.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/js/loaders/MTLLoader.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/jsm/postprocessing/EffectComposer.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/jsm/postprocessing/RenderPass.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/jsm/postprocessing/ShaderPass.js"></script>
		<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/jsm/postprocessing/SavePass.js"></script>
		<script>

      //Scene
			scene = new THREE.Scene();

      //Camera
			camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
			camera.position.set( 30, 30, 100 );

			//Light
			directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
      scene.add( directionalLight );

			//Loader
			mtlLoader = new THREE.MTLLoader();
			mtlLoader.setPath( "OBJ/" );
      mtlLoader.load("Helmet32.mtl",function ( materials ){

				materials.preload();

				objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
				objLoader.setPath("OBJ/");
				objLoader.load("Helmet33.obj",function ( object ){

          object.scale.set(0.1, 0.1, 0.1);

					scene.add(object);
				})

			});

      //Skybox (disabled)
			geometry = new THREE.BoxGeometry( 10000, 10000, 10000 );
	    cubeMaterials = [
	    	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader( ).load('textures/skbx/pz.png'), side: THREE.DoubleSide,color : 0x111455 } ),
	    	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader( ).load('textures/skbx/nx.png'), side: THREE.DoubleSide,color : 0x111455 } ),
	    	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader( ).load('textures/skbx/ny.png'), side: THREE.DoubleSide,color : 0x111455 } ),
	    	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader( ).load('textures/skbx/py.png'), side: THREE.DoubleSide,color : 0x111455 } ),
	     	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader( ).load('textures/skbx/nz.png'), side: THREE.DoubleSide,color : 0x111455 } ),
	    	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader( ).load('textures/skbx/px.png'), side: THREE.DoubleSide,color : 0x111455 } ),
      	]
    	cubeMaterial = new THREE.MeshFaceMaterial( cubeMaterials );
    	cube = new THREE.Mesh( geometry, cubeMaterial );
      //scene.add( cube );
			scene.background = new THREE.Color( 0xffffff );
    	cube.position.set (0, 000, 0);

      //Renderer
      renderer = new THREE.WebGLRenderer({
				antialias : true
			});
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

      //Controls
      controls = new THREE.OrbitControls( camera );
      THREE.OrbitControls = function ( camera ){
      }
      controls.enablePan = false;
      controls.enableZoom = false;
      controls.maxPolarAngle = 1.6;
      controls.minPolarAngle = 0.2;


			//Movement (rotate on scroll)
ySpeed = 0.1;

document.addEventListener("scroll", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {

        logo.rotation.y += ySpeed;

};

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			composer = new THREE.EffectComposer(renderer);
      renderPass = new THREE.RenderPass(scene, camera);
      composer.addPass(renderPass);
			renderPass.renderToScreen = true;


			//Render loop
			render = function () {
				//renderer.render( scene, camera );
				requestAnimationFrame(render);
				composer.render();
			};

			render();

		</script>
	</body>
</html>
2

Hi!
Any warnings/error messages in the console?

3

I tried running this in the console, and it’s giving me this : SyntaxError: Unexpected token '{'. import call expects exactly one argument. (anonymous function) — EffectComposer.js:1 RenderPass.js:1 and the same error for RenderPass

4

I was thinking maybe it could be a hierarchy related issue and the script was simply not loading properly, hence why I switched my src’s to online links even though im using a local environment but that didn’t fix my issue

5

image
image750×317 28.9 KB

6

You can use any of examples with postprocessing as a reference to see how it’s implemented there: three.js docs

7

yes i’ve been trying to start small, implementing only this:

                        composer = new THREE.EffectComposer(renderer);
                        renderPass = new THREE.RenderPass(scene, camera);
                        composer.addPass(renderPass);
			renderPass.renderToScreen = true;


			//Render loop
			render = function () {
				requestAnimationFrame(render);
			        composer.render();
			};

			render();

but even then all I get is a black screen, i’ve also tried with multiple ways of importing EffectComposer and RenderPass. I thought maybe my code needed a canvas so I put one in but it still didn’t solve it…

I have tried to work my way back from the examples but even saving an example code as an .html file and opening it in my browser doesn’t work for me

8

Of course. Without files didnt work.

10

I tried to make sure to rule out a file linkeage issue, I reinstalled threejs with npm, used this to make a new .html file then linked the src from my new npm install. so far everything works, the cube displays, life is great. Now I add my EffectComposer and RenderPass src, call them in my code and suddenly nothing works. I dont know what I am doing wrong.

Here is the code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="node_modules/three/build/three.js"></script>
		<script type="module" src="node_modules/three/examples/js/postprocessing/EffectComposer"></script>
		<script type="module" src="node_modules/three/examples/js/postprocessing/RenderPass"></script>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			const composer = new THREE.EffectComposer(renderer);
      const renderPass = new THREE.RenderPass(scene, camera);
      composer.addPass(renderPass);
			renderPass.renderToScreen = true;

			function animate() {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				composer.render();
			};

			animate();
		</script>
	</body>
</html>

I tried at least 10 different sources both online offline CDN etc. and nothing gets EffectComposer working

11

Can u send files?

node_modules/three/build/three.js
node_modules/three/examples/js/postprocessing/EffectComposer
node_modules/three/examples/js/postprocessing/RenderPass
12

sure, here they are:

13

Code didnt work may be because you using not moduled three.js and moduled EffectComposer RenderPass.
I get no moduled files and also add CopyShader.js ShaderPass.js from

examples/js/postprocessing/ShaderPass.js
examples/js/postprocessing/CopyShader.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="three.js"></script>
		<script src="EffectComposer.js"></script>
		<script src="RenderPass.js"></script>
		<script src="CopyShader.js"></script>
		<script src="ShaderPass.js"></script>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var composer = new THREE.EffectComposer(renderer);
      const renderPass = new THREE.RenderPass(scene, camera);
      composer.addPass(renderPass);
			renderPass.renderToScreen = true;

			function animate() {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				composer.render();
			};

			animate();
		</script>
	</body>
</html>

image

Full archive: dist_11.zip (229.2 KB)

14

Thank you so much, turns out I needed ShaderPass and CopyShader in order for this to work !

thanks again !