master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_mirror.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - mirror</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">
    <style>
      body {
        color: #444;
      }
      a {
        color: #08f;
      }
    </style>
  </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 type="module">

      import * as v3d from '../build/v3d.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { Reflector } from './jsm/objects/Reflector.js';

      // scene size
      const WIDTH = window.innerWidth;
      const HEIGHT = window.innerHeight;

      // camera
      const VIEW_ANGLE = 45;
      const ASPECT = WIDTH / HEIGHT;
      const NEAR = 1;
      const FAR = 500;

      let camera, scene, renderer;

      let cameraControls;

      let sphereGroup, smallSphere;

      init();
      animate();

      function init() {

        const 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 OrbitControls(camera, renderer.domElement);
        cameraControls.target.set(0, 40, 0);
        cameraControls.maxDistance = 400;
        cameraControls.minDistance = 10;
        cameraControls.update();

        //

        const planeGeo = new v3d.PlaneBufferGeometry(100.1, 100.1);

        // reflectors/mirrors

        let geometry, material;

        geometry = new v3d.CircleBufferGeometry(40, 64);
        const groundMirror = new Reflector(geometry, {
          clipBias: 0.003,
          textureWidth: WIDTH * window.devicePixelRatio,
          textureHeight: HEIGHT * window.devicePixelRatio,
          color: 0x777777
        });
        groundMirror.position.y = 0.5;
        groundMirror.rotateX(- Math.PI / 2);
        scene.add(groundMirror);

        geometry = new v3d.PlaneBufferGeometry(100, 100);
        const verticalMirror = new Reflector(geometry, {
          clipBias: 0.003,
          textureWidth: WIDTH * window.devicePixelRatio,
          textureHeight: HEIGHT * window.devicePixelRatio,
          color: 0x889999
        });
        verticalMirror.position.y = 50;
        verticalMirror.position.z = - 50;
        scene.add(verticalMirror);


        sphereGroup = new v3d.Object3D();
        scene.add(sphereGroup);

        geometry = new v3d.CylinderBufferGeometry(0.1, 15 * Math.cos(Math.PI / 180 * 30), 0.1, 24, 1);
        material = new v3d.MeshPhongMaterial({ color: 0xffffff, emissive: 0x444444 });
        const sphereCap = new v3d.Mesh(geometry, material);
        sphereCap.position.y = - 15 * Math.sin(Math.PI / 180 * 30) - 0.05;
        sphereCap.rotateX(- Math.PI);

        geometry = new v3d.SphereBufferGeometry(15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120);
        const 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);

        geometry = new v3d.IcosahedronBufferGeometry(5, 0);
        material = new v3d.MeshPhongMaterial({ color: 0xffffff, emissive: 0x333333, flatShading: true });
        smallSphere = new v3d.Mesh(geometry, material);
        scene.add(smallSphere);

        // walls
        const planeTop = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0xffffff }));
        planeTop.position.y = 100;
        planeTop.rotateX(Math.PI / 2);
        scene.add(planeTop);

        const planeBottom = new v3d.Mesh(planeGeo, new v3d.MeshPhongMaterial({ color: 0xffffff }));
        planeBottom.rotateX(- Math.PI / 2);
        scene.add(planeBottom);

        const 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);

        const 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);

        const 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
        const mainLight = new v3d.PointLight(0xcccccc, 1.5, 250);
        mainLight.position.y = 60;
        scene.add(mainLight);

        const greenLight = new v3d.PointLight(0x00ff00, 0.25, 1000);
        greenLight.position.set(550, 50, 0);
        scene.add(greenLight);

        const redLight = new v3d.PointLight(0xff0000, 0.25, 1000);
        redLight.position.set(- 550, 50, 0);
        scene.add(redLight);

        const blueLight = new v3d.PointLight(0x7f7fff, 0.25, 1000);
        blueLight.position.set(0, 50, 550);
        scene.add(blueLight);

      }

      function animate() {

        requestAnimationFrame(animate);

        const 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>