master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_cubemap_balls_reflect...

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - materials - cube reflection [balls]</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> - webgl cube reflection demo.<br/>
      skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
    </div>

    <script type="module">

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

      let container;

      let camera, scene, renderer;

      const spheres = [];

      let mouseX = 0;
      let mouseY = 0;

      let windowHalfX = window.innerWidth / 2;
      let windowHalfY = window.innerHeight / 2;

      document.addEventListener('mousemove', onDocumentMouseMove, false);

      init();
      animate();

      function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100000);
        camera.position.z = 3200;

        scene = new v3d.Scene();
        scene.background = new v3d.CubeTextureLoader()
          .setPath('textures/cube/pisa/')
          .load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']);

        const geometry = new v3d.SphereBufferGeometry(100, 32, 16);
        const material = new v3d.MeshBasicMaterial({ color: 0xffffff, envMap: scene.background });

        for (let i = 0; i < 500; i++) {

          const mesh = new v3d.Mesh(geometry, material);

          mesh.position.x = Math.random() * 10000 - 5000;
          mesh.position.y = Math.random() * 10000 - 5000;
          mesh.position.z = Math.random() * 10000 - 5000;

          mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

          scene.add(mesh);

          spheres.push(mesh);

        }

        //

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

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

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

      }

      function onDocumentMouseMove(event) {

        mouseX = (event.clientX - windowHalfX) * 10;
        mouseY = (event.clientY - windowHalfY) * 10;

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        const timer = 0.0001 * Date.now();

        for (let i = 0, il = spheres.length; i < il; i++) {

          const sphere = spheres[i];

          sphere.position.x = 5000 * Math.cos(timer + i);
          sphere.position.y = 5000 * Math.sin(timer + i * 1.1);

        }

        camera.position.x += (mouseX - camera.position.x) * .05;
        camera.position.y += (- mouseY - camera.position.y) * .05;

        camera.lookAt(scene.position);

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>