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>
<title>fml</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<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>
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
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>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<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
Can u send files?
node_modules/three/build/three.js
node_modules/three/examples/js/postprocessing/EffectComposer
node_modules/three/examples/js/postprocessing/RenderPass
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>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<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>
Full archive: dist_11.zip (229.2 KB)
Thank you so much, turns out I needed ShaderPass and CopyShader in order for this to work !
thanks again !
