<div class="world" id="world">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script type="x-shader/x-vertex" id="vertexshader">

    varying vec2 vUv;

    void main() {

      vUv = uv;

      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    }

  </script>

  <script type="x-shader/x-fragment" id="fragmentshader">

    uniform sampler2D baseTexture;
    uniform sampler2D bloomTexture;

    varying vec2 vUv;

    void main() {

      gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );

    }

  </script>
 <script src="https://threejs.org/build/three.min.js"></script>
  <script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
  <script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
  <script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
  <script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
  <script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
  <script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
  <script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
  <script type="module" src="src/test.js"></script>
</head>
  
html,
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(#266F92, #111214);
}
const ENTIRE_SCENE = 0,
	BLOOM_SCENE = 1;
var enemy = [];
var floor;
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

const bloomLayer = new THREE.Layers();
bloomLayer.set(BLOOM_SCENE);

const params = {
	exposure: 1,
	bloomStrength: 5,
	bloomThreshold: 0,
	bloomRadius: 0,
	scene: 'Scene with Glow'
};

const darkMaterial = new THREE.MeshBasicMaterial({
	color: 'black'
});
const materials = {};

const renderer = new THREE.WebGLRenderer({
	antialias: true
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = Math.pow(1, 0);

// renderer.setClearColor(0x332233);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
// scene.background = new THREE.Color(0x0024ff);
scene.fog = new THREE.Fog(0x020C26, 0, 250);


const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 0, 20);
camera.lookAt(0, 0, 0);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 1;
controls.maxDistance = 100000;
controls.addEventListener('change', render);

scene.add(new THREE.AmbientLight(0xffffff));

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);
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;

const bloomComposer = new THREE.EffectComposer(renderer);
bloomComposer.renderToScreen = false;
bloomComposer.addPass(renderScene);
bloomComposer.addPass(bloomPass);

const finalPass = new THREE.ShaderPass(
	new THREE.ShaderMaterial({
		uniforms: {
			baseTexture: {
				value: null
			},
			bloomTexture: {
				value: bloomComposer.renderTarget2.texture
			}
		},
		vertexShader: document.getElementById('vertexshader').textContent,
		fragmentShader: document.getElementById('fragmentshader').textContent,
		defines: {}
	}), 'baseTexture'
);
finalPass.needsSwap = true;

const finalComposer = new THREE.EffectComposer(renderer);
finalComposer.addPass(renderScene);
finalComposer.addPass(finalPass);

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2();

window.addEventListener('pointerdown', onPointerDown);

const gridHelper = new THREE.GridHelper(300, 100);
scene.add(gridHelper);
// crée les axes 
const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);
// ---------------------------------------------------------------------------
// --gui effect
// ---------------------------------------------------------------------------

// ---------------------------------------------------------------------------
// const gui = new GUI();

// gui.add(params, 'scene', ['Scene with Glow', 'Glow only', 'Scene only']).onChange(function (value) {

// 	switch (value) {

// 		case 'Scene with Glow':
// 			bloomComposer.renderToScreen = false;
// 			break;
// 		case 'Glow only':
// 			bloomComposer.renderToScreen = true;
// 			break;
// 		case 'Scene only':
// 			// nothing to do
// 			break;

// 	}

// 	render();

// });

// const folder = gui.addFolder('Bloom Parameters');

// folder.add(params, 'exposure', 0.1, 2).onChange(function (value) {

// 	renderer.toneMappingExposure = Math.pow(value, 4.0);
// 	render();

// });

// folder.add(params, 'bloomThreshold', 0.0, 1.0).onChange(function (value) {

// 	bloomPass.threshold = Number(value);
// 	render();

// });

// folder.add(params, 'bloomStrength', 0.0, 10.0).onChange(function (value) {

// 	bloomPass.strength = Number(value);
// 	render();

// });

// folder.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function (value) {

// 	bloomPass.radius = Number(value);
// 	render();

// });
//------------------------------------------------------------------------------------------------


setupScene();

function onPointerDown(event) {

	// mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
	// mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

	// raycaster.setFromCamera(mouse, camera);
	// const intersects = raycaster.intersectObjects(scene.children, false);
	// if (intersects.length > 0) {

	// 	const object = intersects[0].object;
	// 	object.layers.toggle(BLOOM_SCENE);
	// 	render();

	// }

}

window.onresize = function () {

	const width = window.innerWidth;
	const height = window.innerHeight;

	camera.aspect = width / height;
	camera.updateProjectionMatrix();

	renderer.setSize(width, height);

	bloomComposer.setSize(width, height);
	finalComposer.setSize(width, height);

	render();

};

function setupScene() {

	scene.traverse(disposeMaterial);
	scene.children.length = 0;

	const geometry = new THREE.IcosahedronGeometry(1, 15);

	for (let i = 0; i < 50; i++) {

		const color = new THREE.Color();
		color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);

		const material = new THREE.MeshBasicMaterial({
			color: color
		});
		const sphere = new THREE.Mesh(geometry, material);
		sphere.position.x = Math.random() * 10 - 5;
		sphere.position.y = Math.random() * 10 - 5;
		sphere.position.z = Math.random() * 10 - 5;
		sphere.position.normalize().multiplyScalar(Math.random() * 4.0 + 2.0);
		sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
		scene.add(sphere);

		if (Math.random() < 0.25) sphere.layers.enable(BLOOM_SCENE);

	}
	for (let i = 0; i < 50; i++) {
		enemy[i] = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshLambertMaterial({
			color: "black",
			wireframe: false
		}));
		//enemy[i].layers.enable(1)
		enemy[i].position.z = 0;
		scene.add(enemy[i]);

		var objBack = new THREE.Mesh(new THREE.BoxGeometry(5, 5, .1), new THREE.MeshBasicMaterial({
			color: "white",
			wireframe: false,
			transparent: false,
			opacity: 1,
		}));
		objBack.position.z = -2.51;
		objBack.layers.enable(BLOOM_SCENE);
		enemy[i].add(objBack);
		let pos = random(-100, 100)
		let pos2 = random(-100, 100)

		enemy[i].position.set(pos, random(0, 100), pos2)
		enemy[i].rotation.y = random(0, 2);
	};

	floor = new THREE.Mesh(new THREE.BoxGeometry(300, 1, 300), new THREE.MeshBasicMaterial({
		color: "#fff",
		wireframe: false,
		transparent: false,
		opacity: 1,
	}));
	scene.add(floor)
	floor.position.y = -10
	floor.layers.set(0);

	render();

}

function disposeMaterial(obj) {

	if (obj.material) {

		obj.material.dispose();

	}

}

function render() {

	switch (params.scene) {

		case 'Scene only':
			renderer.render(scene, camera);
			break;
		case 'Glow only':
			renderBloom(false);
			break;
		case 'Scene with Glow':
		default:
			// render scene with bloom
			renderBloom(true);

			// render the entire scene, then render bloom scene on top
			finalComposer.render();
			break;
			// renderer.setClearColor(0x131315);

	}

}

function renderBloom(mask) {

	if (mask === true) {

		scene.traverse(darkenNonBloomed);
		bloomComposer.render();
		scene.traverse(restoreMaterial);

	} else {

		camera.layers.set(BLOOM_SCENE);
		bloomComposer.render();
		camera.layers.set(ENTIRE_SCENE);

	}

}

function darkenNonBloomed(obj) {

	if (obj.isMesh && bloomLayer.test(obj.layers) === false) {

		materials[obj.uuid] = obj.material;
		obj.material = darkMaterial;
		// renderer.setClearColor(0x442288);

	}

}

function restoreMaterial(obj) {

	if (materials[obj.uuid]) {

		obj.material = materials[obj.uuid];
		delete materials[obj.uuid];

	}

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.