Three.js碰撞检测

最近看到网上这个项目，然后使用ts面向对象的方式开发了一边，关于物理检测实现了一小部分，对于这块还是比较不熟悉。

<template>
    <div class="box" style="width:100%;height:100%" ref="domRef"></div>
    <div id="webglDom"></div>
</template>

<script  lang="ts"  setup>
import * as THREE from 'three';
import { onMounted, ref, reactive, toRefs } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import jsons from 'three/examples/fonts/optimer_regular.typeface.json'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import Ammo from "ammo.js";
import img1 from './images/BeachBallColor.jpg'
import earthImg from './images/earth.jpg'
import gsap from 'gsap';
import woodTexture from './images/woodTexture.jpg';
import { boxTexture, boxTexture1 } from './textures';
import Stats from 'three/examples/jsm/libs/stats.module.js'
import { Am } from './am';


interface THREERef {
    scene: THREE.Scene | null;
    camera: THREE.Camera | null;
    renderer: THREE.WebGLRenderer | null;
    manager: THREE.LoadingManager
}
const domRef = ref<HTMLDivElement>();
const threeRef = reactive<THREERef>({
    scene: null,
    camera: null,
    renderer: null,
    manager: new THREE.LoadingManager(),
})
const stats = ref<any>();
const manager = new THREE.LoadingManager();

const initStats = () => {
    //stats对象初始化  
    stats.value = new (Stats as any)();
    stats.value.domElement.style.position = 'absolute'; //绝对坐标  
    stats.value.domElement.style.left = '0px';// (0,0)px,左上角  
    stats.value.domElement.style.top = '0px';
    (document.getElementById('webglDom') as any).appendChild(stats.value.domElement);
}

onMounted(() => {
    if (!domRef.value) return;
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(45, domRef.value?.clientWidth / domRef.value?.clientHeight, 1, 5000);
    camera.position.set(135.9516762817743, 126.18969198084729, 80.58103594490744);
    (window as any).camear = camera;
    scene.add(camera);
    const axseHelper = new THREE.AxesHelper(100);
    scene.add(axseHelper)

    initStats();


    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.shadowMap.enabled = true;


    renderer.setSize(domRef.value.clientWidth, domRef.value.clientHeight);
    domRef.value.appendChild(renderer.domElement);
    const control = new OrbitControls(camera, renderer.domElement);
    control.enableDamping = true;
    threeRef.scene = scene;
    threeRef.camera = camera;
    threeRef.renderer = renderer;
    // createLight();
    const am = new Am({
        scene,
        camera,
        manager,
    });
    am.createAllObject();

    const animate = () => {
        let deltaTime = am.clock.getDelta();
        //移动小球
        am.moveBall();
        am.updatePhysics(deltaTime)
        renderer.render(scene, camera)
        requestAnimationFrame(animate);
        control.update();
        stats.value && stats.value.update();
    }
    animate();




})
</script>