Mirror – ArgosVu

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Argos.Vu Verge3D Web Interactive</title>
  <meta charset="windows-1252">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

  <!-- Search Engines -->
  <meta name="description" content="The Terrence Howard Project">
  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Argos.Vu Web Interactive">
  <meta name="twitter:description" content="Verge 3D">
  <meta name="twitter:image:src" content="https://argos.vu/V3D/ArgosVuMirror.png">
  <!-- Open Graph -->
  <meta property="og:title" content="Argos.Vu Web Interactive">
  <meta property="og:description" content="Verge 3D">
  <meta property="og:image" content="https://argos.vu/V3D/ArgosVuMirror.png">
  <meta property="og:type" content="website">

  <meta name="generator" content="Verge3D 2.10.0">

  <!-- favicons -->
  <link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
  <link rel="manifest" href="media/manifest.json">
  <link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">

  <!-- WebXR origin trial -->
  <meta http-equiv="origin-trial" content="Aop1aS3O0LG/MKmDbfhMRdlXGxB1ETrJJScdLSaYLDCMJI5iOLQ0uwhBObewdZKbpu00Y+9f7YC5tALasZ7BOg0AAABoeyJvcmlnaW4iOiJodHRwczovL3NvZnQ4c29mdC5jb206NDQzIiwiZmVhdHVyZSI6IldlYlhSRGV2aWNlTTY5IiwiZXhwaXJ5IjoxNTUxODMwMzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">

  
  <script src="v3d.js"></script>
  <script src="All_Shape_Prints_001.js"></script>

  <link rel="stylesheet" type="text/css" href="All_Shape_Prints_001.css">
</head>
  <body>

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

    <script src="../build/v3d.js"></script>
    <script src="js/objects/Reflector.js"></script>
    <script src="js/controls/OrbitControls.js"></script>

    <script>
      // scene size
      var WIDTH = window.innerWidth;
      var HEIGHT = window.innerHeight;
      // camera
      var VIEW_ANGLE = 45;
      var ASPECT = WIDTH / HEIGHT;
      var NEAR = 1;
      var FAR = 500;
      var camera, scene, renderer;
      var cameraControls;
      var sphereGroup, smallSphere;
      init();
      animate();
      function init() {
        var container = document.getElementById('container');
        // renderer
        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(WIDTH, HEIGHT);
        container.appendChild(renderer.domElement);
        // scene
        scene = new v3d.Scene();
        // camera
        camera = new v3d.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
        camera.position.set(0, 75, 160);
        cameraControls = new v3d.OrbitControls(camera, renderer.domElement);
        cameraControls.target.set(0, 40, 0);
        cameraControls.maxDistance = 400;
        cameraControls.minDistance = 10;
        cameraControls.update();
        //
        var planeGeo = new v3d.PlaneBufferGeometry(100.1, 100.1);
        // reflectors/mirrors
        var geometry = new v3d.CircleBufferGeometry(40, 64);
        var groundMirror = new v3d.Reflector(geometry, {
          clipBias: 0.003,
          textureWidth: WIDTH * window.devicePixelRatio,
          textureHeight: HEIGHT * window.devicePixelRatio,
          color: 0x777777,
          recursion: 1
        });
        groundMirror.position.y = 0.5;
        groundMirror.rotateX(- Math.PI / 2);
        scene.add(groundMirror);
        var geometry = new v3d.PlaneBufferGeometry(100, 100);
        var verticalMirror = new v3d.Reflector(geometry, {
          clipBias: 0.003,
          textureWidth: WIDTH * window.devicePixelRatio,
          textureHeight: HEIGHT * window.devicePixelRatio,
          color: 0x889999,
          recursion: 1
        });
        verticalMirror.position.y = 50;
        verticalMirror.position.z = - 50;
        scene.add(verticalMirror);
        sphereGroup = new v3d.Object3D();
        scene.add(sphereGroup);
        var geometry = new v3d.CylinderBufferGeometry(0.1, 15 * Math.cos(Math.PI / 180 * 30), 0.1, 24, 1);
        var material = new v3d.MeshPhongMaterial({ color: 0xffffff, emissive: 0x444444 });
        var sphereCap = new v3d.Mesh(geometry, material);
        sphereCap.position.y = - 15 * Math.sin(Math.PI / 180 * 30) - 0.05;
        sphereCap.rotateX(- Math.PI);
        var geometry = new v3d.SphereBufferGeometry(15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120);
        var halfSphere = new v3d.Mesh(geometry, material);
        halfSphere.add(sphereCap);
        halfSphere.rotateX(- Math.PI / 180 * 135);
        halfSphere.rotateZ(- Math.PI / 180 * 20);
        halfSphere.position.y = 7.5 + 15 * Math.sin(Math.PI / 180 * 30);
        sphereGroup.add(halfSphere);
        var geometry = new v3d.IcosahedronBufferGeometry(5, 0);
        var material = new v3d.MeshPhongMaterial({ color: 0xffffff, emissive: 0x333333, flatShading: true });
        smallSphere = new v3d.Mesh(geometry, material);
        scene.add(smallSphere);
        // walls
        var planeTop = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0xffffff }));
        planeTop.position.y = 100;
        planeTop.rotateX(Math.PI / 2);
        scene.add(planeTop);
        var planeBottom = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0xffffff }));
        planeBottom.rotateX(- Math.PI / 2);
        scene.add(planeBottom);
        var planeFront = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0x7f7fff }));
        planeFront.position.z = 50;
        planeFront.position.y = 50;
        planeFront.rotateY(Math.PI);
        scene.add(planeFront);
        var planeRight = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0x00ff00 }));
        planeRight.position.x = 50;
        planeRight.position.y = 50;
        planeRight.rotateY(- Math.PI / 2);
        scene.add(planeRight);
        var planeLeft = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0xff0000 }));
        planeLeft.position.x = - 50;
        planeLeft.position.y = 50;
        planeLeft.rotateY(Math.PI / 2);
        scene.add(planeLeft);
        // lights
        var mainLight = new v3d.PointLight(0xcccccc, 1.5, 250);
        mainLight.position.y = 60;
        scene.add(mainLight);
        var greenLight = new v3d.PointLight(0x00ff00, 0.25, 1000);
        greenLight.position.set(550, 50, 0);
        scene.add(greenLight);
        var redLight = new v3d.PointLight(0xff0000, 0.25, 1000);
        redLight.position.set(- 550, 50, 0);
        scene.add(redLight);
        var blueLight = new v3d.PointLight(0x7f7fff, 0.25, 1000);
        blueLight.position.set(0, 50, 550);
        scene.add(blueLight);
      }
      function animate() {
        requestAnimationFrame(animate);
        var timer = Date.now() * 0.01;
        sphereGroup.rotation.y -= 0.002;
        smallSphere.position.set(
          Math.cos(timer * 0.1) * 30,
          Math.abs(Math.cos(timer * 0.2)) * 20 + 5,
          Math.sin(timer * 0.1) * 30
        );
        smallSphere.rotation.y = (Math.PI / 2) - timer * 0.1;
        smallSphere.rotation.z = timer * 0.8;
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>