<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>
</head>
html,
body {
margin: 0;
padding: 0;
background: linear-gradient(#266F92, #111214);
}
import Stats from 'https://unpkg.com/[email protected]/examples/jsm/libs/stats.module'
//postprocessing
let materials, bloom_pass, bloom_composer, render_scene, final_pass, bloom_layer, dark_material, final_composer;
var enemy = [];
var floor;
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
renderer.setClearColor(0x01010d, 1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 4, 1, 0.1);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
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);
// camera.addEventListener('change', render);
var stats = new Stats();
stats.domElement.style.left = '12px';
// stats.domElement.style.position = 'relative';
// stats.domElement.style.top = '50px';
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.domElement);
scene.add(new THREE.AmbientLight(0xffffff));
const gridHelper = new THREE.GridHelper(300, 100);
scene.add(gridHelper);
// crée les axes
const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);
init();
animate()
window.onresize = function () {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
renderer.setSize(width, height);
bloom_composer.setSize(width, height);
final_composer.setSize(width, height);
};
function init() {
//css declarations
Post_processing();
create_enemy();
create_floor();
}
function render() {
render_with_bloom();
// render the entire scene, then render bloom scene on top
final_composer.render();
}
function animate() {
render()
stats.update()
enemy.forEach((i) => {
i.rotation.y += 0.1
})
camera.updateMatrixWorld();
requestAnimationFrame(animate);
}
function create_floor() {
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 = -1 - 2
floor.layers.set(0);
};
function create_enemy() {
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].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(1);
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);
};
};
///////////////////////////////////////////////////////////////////////////////
// POST PROCESSS
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
function Post_processing() {
///////////////////////////////////////////////////////////////////////////////
// postprocessing
///////////////////////////////////////////////////////////////////////////////
/*
bloom_pass
bloom_composer
render_scene
final_pass
bloom_layer
dark_material
*/
bloom_layer = new THREE.Layers();
bloom_layer.set(1);
dark_material = new THREE.MeshBasicMaterial({
color: 'black'
});
materials = {};
bloom_pass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 4, 1, 0.1);
// bloom_pass.threshold = params.bloomThreshold;
// bloom_pass.strength = params.bloomStrength;
// bloom_pass.radius = params.bloomRadius;
bloom_composer = new THREE.EffectComposer(renderer);
bloom_composer.renderToScreen = false;
render_scene = new THREE.RenderPass(scene, camera);
bloom_composer.addPass(render_scene);
bloom_composer.addPass(bloom_pass);
final_pass = new THREE.ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: {
value: null
},
bloomTexture: {
value: bloom_composer.renderTarget2.texture
}
},
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
defines: {}
}), 'baseTexture'
);
final_pass.needsSwap = true;
final_composer = new THREE.EffectComposer(renderer);
final_composer.addPass(render_scene);
final_composer.addPass(final_pass);
///////////////////////////////////////////////////////////////////////////////
}
///////////////////////////////////////////////////////////////////////////////
// pour que les objets restent opaques sinon on voit à travers
///////////////////////////////////////////////////////////////////////////////
function render_with_bloom() {
scene.traverse(darken_non_bloomed);
bloom_composer.render();
scene.traverse(restore_material);
}
///////////////////////////////////////////////////////////////////////////////
function darken_non_bloomed(obj) {
if (obj.isMesh && bloom_layer.test(obj.layers) === false) {
materials[obj.uuid] = obj.material;
obj.material = dark_material;
}
}
///////////////////////////////////////////////////////////////////////////////
// pour restaurer les matériaux sinon tout noir
///////////////////////////////////////////////////////////////////////////////
function restore_material(obj) {
if (materials[obj.uuid]) {
obj.material = materials[obj.uuid];
delete materials[obj.uuid];
}
}
///////////////////////////////////////////////////////////////////////////////
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.