webgl_effects_ascii.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - effects - ascii</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>

  <body>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - effects - ascii</div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
      {
        "imports": {
          "v3d": "../build/v3d.module.js",
          "v3d/addons/": "./jsm/"
        }
      }
    </script>

    <script type="module">

      import * as v3d from 'v3d';

      import { AsciiEffect } from 'v3d/addons/effects/AsciiEffect.js';
      import { TrackballControls } from 'v3d/addons/controls/TrackballControls.js';

      let camera, controls, scene, renderer, effect;

      let sphere, plane;

      const start = Date.now();

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.y = 150;
        camera.position.z = 500;

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0, 0, 0);

        const pointLight1 = new v3d.PointLight(0xffffff);
        pointLight1.position.set(500, 500, 500);
        scene.add(pointLight1);

        const pointLight2 = new v3d.PointLight(0xffffff, 0.25);
        pointLight2.position.set(- 500, -500, -500);
        scene.add(pointLight2);

        sphere = new v3d.Mesh(new v3d.SphereGeometry(200, 20, 10), new v3d.MeshPhongMaterial({ flatShading: true }));
        scene.add(sphere);

        // Plane

        plane = new v3d.Mesh(new v3d.PlaneGeometry(400, 400), new v3d.MeshBasicMaterial({ color: 0xe0e0e0 }));
        plane.position.y = -200;
        plane.rotation.x = - Math.PI / 2;
        scene.add(plane);

        renderer = new v3d.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        effect = new AsciiEffect(renderer, ' .:-+*=%@#', { invert: true });
        effect.setSize(window.innerWidth, window.innerHeight);
        effect.domElement.style.color = 'white';
        effect.domElement.style.backgroundColor = 'black';

        // Special case: append effect.domElement, instead of renderer.domElement.
        // AsciiEffect creates a custom domElement (a div container) where the ASCII elements are placed.

        document.body.appendChild(effect.domElement);

        controls = new TrackballControls(camera, effect.domElement);

        //

        window.addEventListener('resize', onWindowResize);

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
        effect.setSize(window.innerWidth, window.innerHeight);

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        const timer = Date.now() - start;

        sphere.position.y = Math.abs(Math.sin(timer * 0.002)) * 150;
        sphere.rotation.x = timer * 0.0003;
        sphere.rotation.z = timer * 0.0002;

        controls.update();

        effect.render(scene, camera);

      }

    </script>

  </body>
</html>