Babylon.js实现物体碰撞检测

最新推荐文章于 2024-01-08 18:26:11 发布

漫漫，

最新推荐文章于 2024-01-08 18:26:11 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： babylon

本文链接：https://blog.csdn.net/qq_44375977/article/details/118519760

babylon 专栏收录该内容

2 篇文章

订阅专栏

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>