<body>
    <div id="container"></div>

    <script src="https://unpkg.com/three@0.85.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/Detector.js"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/libs/stats.min.js"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>

</body>
*{
    margin: 0;
    padding: 0;
}
body {
    overflow: hidden;
    background: #222222;
}

console.clear();
window.addEventListener('load', function() {
    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var w = window.innerWidth,
        h = window.innerHeight;

    var container, renderer, scene, camera, controls, children;
    var raycaster, mouse = new THREE.Vector2();

    var stats, isDown = false,
        isDragging = false;

    (function init() {
        // renderer
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(w, h);
        container = document.getElementById('container');
        container.appendChild(renderer.domElement);
        
        stats = new Stats();
        container.appendChild(stats.dom);
        stats.dom.style.position = 'absolute';

        // world
        scene = new THREE.Scene();
        renderer.setClearColor(0x333833);

        // camera
        camera = new THREE.PerspectiveCamera(60, w / h, 1, 5000);
        camera.position.x = 140;
        camera.position.y = 55;
        camera.position.z = 140;
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        controls = new THREE.OrbitControls(camera, renderer.domElement);

        var gridXZ = new THREE.GridHelper(500, 10);
        scene.add(gridXZ);

        light = new THREE.AmbientLight(0x222222);
        scene.add(light);

        for (let i = 0; i < 20; i++) {
            var plane = new THREE.PlaneGeometry(400, 400);
            var mat = new THREE.MeshBasicMaterial({
                color: 0xbb4444,
                transparent: true,
                opacity: .5,
                side: THREE.DoubleSide,
            });
            var mesh = new THREE.Mesh(plane, mat);
            mesh.rotation.set(Math.PI/2, 0, 0)
            // mesh.position.set((i%10) * 200, 0, (i / 10)*200);
            mesh.position.set(0, 0, 0);
            scene.add(mesh);
        }

        window.addEventListener('resize', onWindowResize, false);
        container.addEventListener('mousemove', onMouseMove, false);
        container.addEventListener('mousedown', onMouseDown, false);
        container.addEventListener('mouseup', onMouseUp, false);
        container.addEventListener('click', onClick, false);
    })();

    function onWindowResize() {
        w = window.innerWidth;
        h = window.innerHeight;

        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        renderer.setSize(w, h);

    }

    function onMouseMove(event) {
        event.preventDefault();
        if (isDown) isDragging = true;

       
    }

    function onClick(event) {
        event.preventDefault();
    }

    function onMouseDown(event) {
        event.preventDefault();
        isDown = true;
    }

    function onMouseUp(event) {
        event.preventDefault();
        isDown = false;
        isDragging = false;
    }

    (function animate() {
        requestAnimationFrame(animate);

        // camHelper.visible = false;
        renderer.render(scene, camera);
        stats.update();
    })();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.