<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 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>
  
.world {
	position: fixed;
	width: 100%;
	/* height: 100%; */
	height: auto !important;
	overflow: hidden;
}



const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
var enemy = [];
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 10);
camera.layers.enable(1);
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.75);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

// ---------------------------------------------------------------------------
// --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].layers.set(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.set(1);
    enemy[i].add(objBack);
    let pos = random(0, 300)
    let pos2 = random(0, 300)

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

// ---------------------------------------------------------------------------
// ---------------------------------------------------------------------------
// --ground
// ---------------------------------------------------------------------------
// create_ground()
var floor = new THREE.Mesh(new THREE.BoxGeometry(800, 1, 800), new THREE.MeshBasicMaterial({
    color: "#ffd100",
    wireframe: false,
    transparent: false,
    opacity: 1,
}));
scene.add(floor)
floor.position.y = -10
floor.position.z= 400
floor.position.x = 400
floor.layers.set(0);

// ---------------------------------------------------------------------------

/** COMPOSER */
var renderScene = new THREE.RenderPass(scene, camera)

var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader)
effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)

var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85)
bloomPass.threshold = 0.11
bloomPass.strength = 1.2
bloomPass.radius = 0.55
bloomPass.renderToScreen = true

var composer = new THREE.EffectComposer(renderer)
composer.setSize(window.innerWidth, window.innerHeight)

composer.addPass(renderScene)
composer.addPass(effectFXAA)
composer.addPass(bloomPass)

// renderer.gammaInput = true
// renderer.gammaOutput = true
// renderer.toneMappingExposure = Math.pow(0.4, 4.0)

render();

function render() {
    requestAnimationFrame(render);
    // ici que l'on définit la couleur du ciel
    renderer.setClearColor(0x3b3030);
    renderer.clear();
    camera.layers.set(1);
    composer.render();
    enemy.forEach((i) => {
        i.rotation.y += 0.01
    })
    renderer.clearDepth();
    camera.layers.set(0);
    renderer.render(scene, camera);
}

function create_ground() {
    o.floor = new Object(data.floor);
    o.floor.position.y = -.5;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.