examples/raycaster.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Raycaster | APE</title>
    <link rel="stylesheet" type="text/css" href="./base.css">

    <script type="text/javascript" src="./lib/THREE.min.js"></script>
    <script type="text/javascript" src="./lib/Stats.min.js"></script>
    <script type="text/javascript" src="./lib/dat.gui.min.js"></script>
    <script type="text/javascript" src="./lib/OrbitControls.min.js"></script>

    <script type="text/javascript" src="/APE/build/APE.min.js"></script>
    <script type="text/javascript" src="./base.js"></script>
  </head>

  <body></body>

  <script type="text/javascript">
    var staticBox, kinematicBox, dynamicBox;
    var prevTime = performance.now();
    var raycaster, ray, direction;
    var customGroup = false;

    var velocity = new THREE.Vector3();
    var rotation = new THREE.Vector2();
    var target = new THREE.Vector3();

    var move = {
      backward: false,
      forward: false,
      right: false,
      left: false,
      down: false,
      up: false
    };

    var rotate = {
      right: false,
      left: false,
      down: false,
      up: false
    };

    function createGround () {
      APE.Static.friction = 5.0;
      APE.Static.addBox(ground);
    }

    function createRigidBodies (customGroup) {
      if (customGroup) {
        var group = APE.createGroup('custom', 1);
        // group === APE.GROUP_CUSTOM
        APE.Kinematic.group = group;
        APE.Dynamic.group = group;
      } else {
        // Default settings:
        APE.Kinematic.group = APE.GROUP_KINEMATIC;
        APE.Dynamic.group = APE.GROUP_DYNAMIC;
      }

      // Static Body:
      staticBox = new THREE.Mesh(
        new THREE.BoxGeometry(5, 5, 5),
        new THREE.MeshPhongMaterial({
          color: 0xCCCCCC
        })
      );

      staticBox.castShadow = true;
      staticBox.position.z = 20;
      staticBox.position.y = 3;

      APE.Static.addBox(staticBox);
      scene.add(staticBox);

      // Kinematic Body:
      kinematicBox = new THREE.Mesh(
        new THREE.BoxGeometry(5, 5, 5),
        new THREE.MeshPhongMaterial({
          color: 0x444444
        })
      );

      kinematicBox.castShadow = true;
      kinematicBox.position.z = 10;
      kinematicBox.position.y = 3;

      APE.Kinematic.addBox(kinematicBox);
      scene.add(kinematicBox);

      // Dynamic Body:
      dynamicBox = new THREE.Mesh(
        new THREE.BoxGeometry(5, 5, 5),
        new THREE.MeshPhongMaterial({
          color: 0x00AAAA
        })
      );

      dynamicBox.castShadow = true;
      dynamicBox.position.y = 3;
      dynamicBox.position.z = 0;

      // Body mesh & mass
      APE.Dynamic.addBox(dynamicBox, 10);
      scene.add(dynamicBox);
    }

    function createSoftBodies () {
      // Soft Body:
      var boxGeometry = new THREE.BufferGeometry().fromGeometry(
        new THREE.BoxGeometry(5, 5, 5, 25, 25, 25)
      );

      boxGeometry.translate(0, 3, -10);

      var softBox = new THREE.Mesh(boxGeometry,
        new THREE.MeshPhongMaterial({
          color: 0xCCCC00
        })
      );

      // Body mesh, mass & pressure
      APE.Soft.addBody(softBox, 10, 500);
      softBox.castShadow = true;
      scene.add(softBox);

      var leftBase = new THREE.Mesh(
        new THREE.BoxGeometry(1, 0.2, 1),
        new THREE.MeshPhongMaterial({
          color: 0xCCCCCC
        })
      );

      leftBase.receiveShadow = true;
      leftBase.castShadow = true;

      leftBase.position.z = -17.5;
      leftBase.position.y = 0.1;

      var rightBase = leftBase.clone();
      rightBase.position.z = -25;
      rightBase.position.y = 0.1;

      scene.add(rightBase);
      scene.add(leftBase);

      var leftPole = new THREE.Mesh(
        new THREE.BoxGeometry(0.5, 10, 0.5),
        new THREE.MeshPhongMaterial({
          color: 0xCCCCCC
        })
      );

      leftPole.castShadow = true;
      leftPole.position.z = -17.5;
      leftPole.position.y = 5;

      var rightPole = leftPole.clone();
      rightPole.position.z = -25;
      rightPole.position.y = 5;

      scene.add(rightPole);
      scene.add(leftPole);

      var rod = new THREE.Mesh(
        new THREE.BoxGeometry(0.5, 0.5, 8),
        new THREE.MeshPhongMaterial({
          color: 0xCCCCCC
        })
      );

      rod.position.z = -21.25;
      rod.position.y = 10.25;
      rod.castShadow = true;

      APE.Static.addBox(rod);
      scene.add(rod);

      // Cloth Body:
      var geometry = new THREE.PlaneBufferGeometry(5, 7.5, 25, 25);
      var position = new THREE.Vector3(0, 2.75, -18.75);

      geometry.rotateY(Math.PI / 2.0);
      geometry.translate(position.x, position.y + 3.75, position.z - 2.5);

      var cloth = new THREE.Mesh(
        geometry,
        new THREE.MeshPhongMaterial({
          side: THREE.DoubleSide,
          color: 0x222222
        })
      );

      APE.Cloth.addBody(cloth, 1, position);
      APE.Cloth.append(cloth, 25, rod);
      APE.Cloth.append(cloth, 0, rod);

      cloth.receiveShadow = true;
      cloth.castShadow = true;
      scene.add(cloth);
    }

    function createRaycaster () {
      direction = new THREE.Vector3(-6, 0, 0);
      raycaster = new THREE.Mesh(
        new THREE.SphereGeometry(1, 20, 20),
        new THREE.MeshPhongMaterial({ color: 0x222222 })
      );

      raycaster.receiveShadow = true;
      raycaster.castShadow = true;

      raycaster.position.x = 15;
      raycaster.position.y = 2;
      raycaster.position.z = 0;

      var length = direction.length();
      var geometry = new THREE.CylinderGeometry(0.2, 0.2, length, 8);

      geometry.translate(0, -0.5 * length, 0);
      geometry.rotateX(-Math.PI * 0.5);
      geometry.lookAt(direction);

      ray = new THREE.Mesh(geometry,
        new THREE.MeshPhongMaterial({
          color: 0xCC0000
        })
      );

      ray.receiveShadow = true;
      ray.castShadow = true;
      scene.add(raycaster);
    }

    function createControls () {
      var rotation = new THREE.Euler(0, 0, 0, 'YXZ');
      var direction = new THREE.Vector3(0, 0, -1);

      var gui = new dat.GUI();
      var masks = [];

      document.addEventListener('keydown', function (event) {
        keyHandler(event.keyCode, true);
      }, false);

      document.addEventListener('keyup', function (event) {
        keyHandler(event.keyCode, false);
      }, false);

      Object.keys(APE).forEach(function (key) {
        if (!key.indexOf('MASK_')) {
          masks.push(key.slice(5));
        }
      });

      masks.push('CUSTOM_MASK');
      masks.push('CUSTOM_GROUP');

      var RaycastMask = function () { this.MASK = 'ALL'; };
      var mask = gui.add(new RaycastMask(), 'MASK', masks);

      mask.onFinishChange(function (current) {
        var selectedMask = '';

        if (customGroup) {
          resetRigidBodies(false);
        }

        if (current === 'CUSTOM_MASK') {
          selectedMask = APE.MASK_DYNAMIC | APE.MASK_SOFT;
        } else if (current === 'CUSTOM_GROUP') {
          resetRigidBodies(true);
          selectedMask = APE.GROUP_CUSTOM;
        } else {
          selectedMask = APE['MASK_' + current];
        }

        APE.Raycaster.setCollisionFilterMask(selectedMask);
      });

      raycaster.add(camera);
      raycaster.add(ray);
    }

    function keyHandler (code, pressed) {
      switch (code) {
        case 83:
          move.backward = pressed;
          break;
        
        case 87:
          move.forward = pressed;
          break;

        case 68:
          move.right = pressed;
          break;

        case 65:
          move.left = pressed;
          break;
        
        case 16:
          move.down = pressed;
          break;
        
        case 32:
          move.up = pressed;
          break;
        
        case 39:
          rotate.right = pressed;
          break;
        
        case 37:
          rotate.left = pressed;
          break;
        
        case 40:
          rotate.down = pressed;
          break;

        case 38:
          rotate.up = pressed;
          break;
      }
    }

    function resetRigidBodies (custom) {
      APE.Kinematic.remove(kinematicBox);
      APE.Dynamic.remove(dynamicBox);
      APE.Static.remove(staticBox);

      createRigidBodies(custom);
      customGroup = custom;
    }

    function update () {
      var time = performance.now();
      var delta = (time - prevTime) / 1000;

      var acceleration = 150 * delta;
      var torque = acceleration / 10;
      var deceleration = 10 * delta;

      stats.begin();

      velocity.x -= velocity.x * deceleration;
      velocity.y -= velocity.y * deceleration;
      velocity.z -= velocity.z * deceleration;

      rotation.x -= rotation.x * deceleration;
      rotation.y -= rotation.y * deceleration;

      if (move.backward) {
        velocity.x += acceleration;
      }

      if (move.forward) {
        velocity.x -= acceleration;
      }

      if (move.right) {
        velocity.z -= acceleration;
      }

      if (move.left) {
        velocity.z += acceleration;
      }

      if (move.down) {
        velocity.y -= acceleration;
      }

      if (move.up) {
        velocity.y += acceleration;
      }

      if (rotate.right) {
        rotation.y -= torque;
      }

      if (rotate.left) {
        rotation.y += torque;
      }

      if (rotate.down) {
        rotation.x += torque;
      }

      if (rotate.up) {
        rotation.x -= torque;
      }

      var x = velocity.x * delta;
      var y = velocity.y * delta;
      var z = velocity.z * delta;

      raycaster.translateX(x);
      raycaster.translateY(y);
      raycaster.translateZ(z);

      x = rotation.x * delta;
      y = rotation.y * delta;

      raycaster.rotateZ(x);
      raycaster.rotateY(y);

      raycaster.position.y = Math.max(1, Math.min(25, raycaster.position.y));
      target.copy(direction).applyMatrix4(raycaster.matrixWorld);

      var hit = APE.Raycaster.cast(raycaster.position, target);
      ray.material.color.setHex(hit ? 0x00CC00 : 0xCC0000);

      APE.Cloth.update();
      APE.Soft.update();
      APE.update();

      stats.end();
      prevTime = time;

      renderer.render(scene, camera);
      requestAnimationFrame(update);
    }

    window.addEventListener('DOMContentLoaded', () => {
      APE.init(true);
      createGround();

      createRigidBodies(false);
      createSoftBodies();

      createRaycaster();
      createControls();

      requestAnimationFrame(update);
    });
  </script>
</html>