时间戳

首页 > 解决方案 > Three.js 光线投射碰撞不起作用

three.js - Three.js 光线投射碰撞不起作用

问题描述

我正在开发街机风格的珠穆朗玛峰飞行模拟器。

在我正在构建它的调试器中，我有一个地形和直升机类，它生成 BufferGeometry 地形网格、直升机停机坪几何体的组以及直升机摄像机和几何体的组。

我的问题是，目前我似乎无法检测到任何碰撞。我想它可能不支持 BufferGeometries，所以这对我来说是个问题，因为我需要地形成为缓冲区，因为它太广阔了......作为标准几何图形，它会导致浏览器中的内存崩溃。

但是，单独测试直升机停机坪的几何形状仍然不会触发。它们在一个组中，因此我将这些组添加到全局窗口数组并将碰撞检查设置为递归但无济于事。

最终，我对其他形式的碰撞检测持开放态度，并且可能需要两种类型，因为我必须使用缓冲几何。关于如何解决这个问题或更好的解决方案的任何想法？

直升机物体本身

// Rect to Simulate Helicopter
const geometry = new THREE.BoxGeometry( 2, 1, 4 ),
      material = new THREE.MeshBasicMaterial(),
      rect = new THREE.Mesh( geometry, material );

rect.position.x = 0;
rect.position.y = terrain.returnCameraStartPosY();
rect.position.z = 0;
rect.rotation.order = "YXZ";
rect.name = "heli";

// Link Camera and Helicopter
const heliCam = new THREE.Group(),
      player = new Helicopter(heliCam, "OH-58 Kiowa", 14000);

heliCam.add(camera);
heliCam.add(rect);
heliCam.position.set( 0, 2040, -2000 );
heliCam.name = "heliCam";
scene.add(heliCam);

将对象添加到全局碰撞数组

// Add Terrain
const terrain = new Terrain.ProceduralTerrain(),
      terrainObj = terrain.returnTerrainObj(),
      helipadEnd = new Terrain.Helipad( 0, 1200, -3600, "Finish", true ),
      helipadStart = new Terrain.Helipad( 0, 2000, -2000, "Start", false ),
      helipadObjStart = helipadStart.returnHelipadObj(),
      helipadObjEnd = helipadEnd.returnHelipadObj();

window.collidableMeshList.push(terrainObj);
window.collidableMeshList.push(helipadObjStart);
window.collidableMeshList.push(helipadObjEnd);

碰撞检测功能运行每一帧

collisionDetection(){
    const playerOrigin = this.heli.children[1].clone(); // Get Box Mesh from Player Group

    for (let i = playerOrigin.geometry.vertices.length - 1; i >= 0; i--) {
        const localVertex      = playerOrigin.geometry.vertices[i].clone(),
              globalVertex     = localVertex.applyMatrix4( playerOrigin.matrix ),
              directionVector  = globalVertex.sub( playerOrigin.position ),
              ray              = new THREE.Raycaster( playerOrigin, directionVector.clone().normalize() ),
              collisionResults = ray.intersectObjects( window.collidableMeshList, true ); // Recursive Boolean for children

        if ( collisionResults.length > 0 ){
            this.landed = true;
            console.log("Collision");
        }

        // if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ){
        //  this.landed = true;
        //  console.log("Collision with vectorLength")
        // }    
    }
}

标签： three.jscollision-detectionraycasting

解决方案

很难说出自定义类中发生了什么，但看起来您使用的Object3D是 raycaster 的第一个参数，而不是Vector3使用this.heli.children[1].clone(). 你为什么不尝试类似的东西：

var raycaster = new THREE.Raycaster();
var origin = this.heli.children[1].position;

raycaster.set(origin, direction);

另外，你确定你使用的是 BufferGeometry 吗？因为当您访问这样的顶点值时：playerOrigin.geometry.vertices[i]，它应该会给您一个错误。a中没有vertices属性，BufferGeometry所以我不知道您是如何确定方向向量的。

推荐阅读