javascript - threejs 光线转换 - 相机和加载的对象模型之间的交集

标签 javascript three.js webgl collision-detection raycasting

我在一个场景中移动相机,该场景包含一个我作为网格加载的对象,我想检测相机是否与对象的任何墙壁发生碰撞。

我的代码基于这个 threejs 示例:http://threejs.org/examples/misc_controls_pointerlock.html ,并尝试在此处应用您的示例:http://stemkoski.github.io/Three.js/Collision-Detection.html - 但我似乎无法碰撞。

我的例子是here

相关的javascript是here :

如果有人能指出正确的方向来检测碰撞,我将不胜感激。这是相关的代码片段:

var objects = [];

var oLoader = new THREE.OBJLoader();
  //oLoader.load('models/chair.obj', function(object, materials) {
    oLoader.load('models/model-for-threejs.obj', function(object, materials) {

    // var material = new THREE.MeshFaceMaterial(materials);
    var material = new THREE.MeshLambertMaterial({ color: 0x000000 });
    //var material = new THREE.MeshBasicMaterial({wireframe: true});


    object.traverse( function(child) {
      if (child instanceof THREE.Mesh) {
        //objects.push(child); //MH - not sure if the object needs to be added here or not, but if I do, this really bogs down things down
      }
    });

    object.position.x = 0;
    object.position.y = 12;
    object.position.z = 0;

    scene.add(object);

    objects.push(object);


  });
}

var curPos = controls.getObject().position; //gives the position of my camera

    raycaster.ray.origin.copy( curPos );
    //raycaster.ray.origin.y -= 10; 
    raycaster.ray.origin.z +=10; //guessing here, but since I'm moving in 2d space (z / x), maybe I should be moving my ray ahead in z space?


    var intersections = raycaster.intersectObjects( objects ); //

    var isOnObject = intersections.length > 0;

    if (isOnObject){ console.log('collide' }; //MH - nothing happening here

最佳答案

Raycaster 的相交对象采用带子对象的 Object3D,并具有递归标志。

https://github.com/mrdoob/three.js/blob/master/src/core/Raycaster.js#L33

所以它应该是这样的:

var intersections = raycaster.intersectObjects( yourRootObject3D, true );

关于javascript - threejs 光线转换 - 相机和加载的对象模型之间的交集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28131026/

相关文章:

javascript - d3 为每个 Enter() 附加元素调用函数

three.js - BokehPass 与其他后处理 THREE.js 混合

javascript - THREE.js 代码仅在存在断点时运行

javascript - 如何在 webGL 和 HTML5 中移动整个场景?

javascript - Angular : Validate multiple dependent fields

javascript - JS或jQuery如何删除键值对

javascript - 此代码在 pc 浏览器上运行良好,但在移动设备上不起作用

javascript - Three.js 的输入标签不起作用

javascript - Three.js 在鼠标点击的地方绘制,但完全平行于相机方向

Webgl gl.viewport 更改