欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Babylon.js实现物体碰撞检测

程序员文章站 2024-03-16 21:20:46
...

Babylon.js实现物体碰撞检测

  • 通过intersectsMesh()api实现物体间碰撞检测
  • 通过intersectsPoint()api实现物体与点间的碰撞检测

代码

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Babulon</title>
    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
      const canvas = document.getElementById("renderCanvas");
      const engine = new BABYLON.Engine(canvas, true);

      const initScene = () => {
        // 场景
        const scene = new BABYLON.Scene(engine);
        scene.ambientColor = new BABYLON.Color3(1, 1, 1);
        // 相机
        const camera = new BABYLON.ArcRotateCamera(
          "Camera",
          Math.PI / 2,
          Math.PI / 2,
          30,
          new BABYLON.Vector3(0, 0, 0),
          scene
        );
        camera.attachControl(canvas, true);
        // 灯光
        const light1 = new BABYLON.HemisphericLight(
          "light1",
          new BABYLON.Vector3(0, 1000, 0),
          scene
        );
        const light2 = new BABYLON.HemisphericLight(
          "light2",
          new BABYLON.Vector3(0, -1000, 0),
          scene
        );
        return {
          scene,
          camera,
          light1,
          light2,
        };
      };

      const createScene = (scene) => {
        const myBox1 = BABYLON.MeshBuilder.CreateBox(
          "myBox1",
          {
            height: 2,
            width: 2,
            depth: 2,
            faceColors: new Array(6).fill(new BABYLON.Color4(0, 0.5, 0.5, 1)),
          },
          scene
        );
        myBox1.position = new BABYLON.Vector3(-5, 0, 0);
        const myBox2 = BABYLON.MeshBuilder.CreateBox(
          "myBox1",
          {
            height: 2,
            width: 2,
            depth: 2,
            faceColors: new Array(6).fill(new BABYLON.Color4(0, 1, 1, 1)),
          },
          scene
        );
        myBox2.position = new BABYLON.Vector3(5, 0, 0);

        const box1Ani = BABYLON.Animation.CreateAndStartAnimation(
          "boxscale",
          myBox1,
          "position.x",
          30,
          120,
          -5,
          0
        );
        const box2Ani = BABYLON.Animation.CreateAndStartAnimation(
          "boxscale",
          myBox2,
          "position.x",
          30,
          120,
          5,
          0
        );

        const animation = () => {
          // params2 = false 模糊校验=>边界框bounding box
          // params2 = true  真实校验=>定向边界框Oriented Bounding Box
          // 物体与物体碰撞
          if (myBox1.intersectsMesh(myBox2, false)) {
            alert("物体相交了");
            console.log("物体相交");
          } else {
            console.log("物体未相交");
          }
          // 点与物体碰撞
          if (myBox1.intersectsPoint(new BABYLON.Vector3(0, 0, 0))) {
            console.log("点相交");
          }
        };
        return { animation };
      };

      const initRender = (scene, animation) => {
        engine.runRenderLoop(function () {
          scene.render();
          animation();
        });
        window.addEventListener("resize", function () {
          engine.resize();
        });
      };

      (() => {
        const { scene } = initScene();
        const { animation } = createScene(scene);
        initRender(scene, animation);
      })();
    </script>
  </body>
</html>
相关标签: babylon