master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_interactive_cubes.html

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

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

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';

      let container, stats;
      let camera, scene, raycaster, renderer;

      let INTERSECTED;
      let theta = 0;

      const mouse = new v3d.Vector2();
      const radius = 100;

      init();
      animate();

      function init() {

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

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);

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

        const light = new v3d.DirectionalLight(0xffffff, 1);
        light.position.set(1, 1, 1).normalize();
        scene.add(light);

        const geometry = new v3d.BoxBufferGeometry(20, 20, 20);

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

          const object = new v3d.Mesh(geometry, new v3d.MeshLambertMaterial({ color: Math.random() * 0xffffff }));

          object.position.x = Math.random() * 800 - 400;
          object.position.y = Math.random() * 800 - 400;
          object.position.z = Math.random() * 800 - 400;

          object.rotation.x = Math.random() * 2 * Math.PI;
          object.rotation.y = Math.random() * 2 * Math.PI;
          object.rotation.z = Math.random() * 2 * Math.PI;

          object.scale.x = Math.random() + 0.5;
          object.scale.y = Math.random() + 0.5;
          object.scale.z = Math.random() + 0.5;

          scene.add(object);

        }

        raycaster = new v3d.Raycaster();

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

        stats = new Stats();
        container.appendChild(stats.dom);

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

        //

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

      }

      function onWindowResize() {

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

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

      }

      function onDocumentMouseMove(event) {

        event.preventDefault();

        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

      }

      function render() {

        theta += 0.1;

        camera.position.x = radius * Math.sin(v3d.MathUtils.degToRad(theta));
        camera.position.y = radius * Math.sin(v3d.MathUtils.degToRad(theta));
        camera.position.z = radius * Math.cos(v3d.MathUtils.degToRad(theta));
        camera.lookAt(scene.position);

        camera.updateMatrixWorld();

        // find intersections

        raycaster.setFromCamera(mouse, camera);

        const intersects = raycaster.intersectObjects(scene.children);

        if (intersects.length > 0) {

          if (INTERSECTED != intersects[0].object) {

            if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);

            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
            INTERSECTED.material.emissive.setHex(0xff0000);

          }

        } else {

          if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);

          INTERSECTED = null;

        }

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>