master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_raycast_sprite.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - raycast - sprite</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: #fff;
        color: #333;
      }
      a {
        color: #08f;
      }
    </style>
  </head>
<body>
  <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - webgl raycast sprite<br></div>

  <script type="module">
    import * as v3d from '../build/v3d.module.js';

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

    let renderer, scene, camera;
    let controls, group;

    init();
    animate();

    function init() {

      // init renderer
      renderer = new v3d.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // init scene
      scene = new v3d.Scene();
      scene.background = new v3d.Color(0xffffff);

      group = new v3d.Group();
      scene.add(group);

      // init camera
      camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.set(15, 15, 15);
      camera.lookAt(scene.position);

      controls = new OrbitControls(camera, renderer.domElement);
      controls.enableRotate = true;

      // add sprites

      const sprite1 = new v3d.Sprite(new v3d.SpriteMaterial({ color: '#69f' }));
      sprite1.position.set(6, 5, 5);
      sprite1.scale.set(2, 5, 1);
      group.add(sprite1);

      const sprite2 = new v3d.Sprite(new v3d.SpriteMaterial({ color: '#69f', sizeAttenuation: false }));
      sprite2.material.rotation = Math.PI / 3 * 4;
      sprite2.position.set(8, - 2, 2);
      sprite2.center.set(0.5, 0);
      sprite2.scale.set(.1, .5, .1);
      group.add(sprite2);

      const group2 = new v3d.Object3D();
      group2.scale.set(1, 2, 1);
      group2.position.set(- 5, 0, 0);
      group2.rotation.set(Math.PI / 2, 0, 0);
      group.add(group2);

      const sprite3 = new v3d.Sprite(new v3d.SpriteMaterial({ color: '#69f' }));
      sprite3.position.set(0, 2, 5);
      sprite3.scale.set(10, 2, 3);
      sprite3.center.set(- 0.1, 0);
      sprite3.material.rotation = Math.PI / 3;
      group2.add(sprite3);

      window.addEventListener('resize', onWindowResize, false);
      window.addEventListener("mousemove", onDocumentMouseMove, false);

    }

    function animate() {

      renderer.render(scene, camera);
      requestAnimationFrame(animate);

    }

    function onWindowResize() {

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

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

    }

    let selectedObject = null;

    function onDocumentMouseMove(event) {

      event.preventDefault();
      if (selectedObject) {

        selectedObject.material.color.set('#69f');
        selectedObject = null;

      }

      const intersects = getIntersects(event.layerX, event.layerY);

      if (intersects.length > 0) {

        const res = intersects.filter(function(res) {

          return res && res.object;

        })[0];

        if (res && res.object) {

          selectedObject = res.object;
          selectedObject.material.color.set('#f00');

        }

      }

    }

    const raycaster = new v3d.Raycaster();
    const mouseVector = new v3d.Vector3();

    function getIntersects(x, y) {

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

      mouseVector.set(x, y, 0.5);
      raycaster.setFromCamera(mouseVector, camera);

      return raycaster.intersectObject(group, true);

    }
  </script>
</body>
</html>