可视化 Raycaster

Posted 2023-02-27

【中文标题】可视化 Raycaster

【英文标题】：Visualizing Raycaster

【发布时间】：2013-01-28 10:13:42

【问题描述】：

我正在尝试使用光线投射来检测交叉路口。我目前的问题是我不确定我的光线投射是否瞄准了所需的方向。所以我的一般问题是：有没有办法让光线投射可见？如果是这样：它是如何完成的？这对我很有帮助。

迈克尔

【参考方案1】：

这是另一种显示光线的方法：

scene.add(new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 300, 0xff0000) );

【参考方案2】：

你为什么不从你的原点画一条线到射线的方向。

更具体（使用 r83）：

    // Draw a line from pointA in the given direction at distance 100
    var pointA = new THREE.Vector3( 0, 0, 0 );
    var direction = new THREE.Vector3( 10, 0, 0 );
    direction.normalize();

    var distance = 100; // at what distance to determine pointB

    var pointB = new THREE.Vector3();
    pointB.addVectors ( pointA, direction.multiplyScalar( distance ) );

    var geometry = new THREE.Geometry();
    geometry.vertices.push( pointA );
    geometry.vertices.push( pointB );
    var material = new THREE.LineBasicMaterial(  color : 0xff0000  );
    var line = new THREE.Line( geometry, material );
    scene.add( line );

代码笔在：https://codepen.io/anon/pen/evNqGy

【讨论】：

这就是我最后所做的。我只是希望有一种方便的方法来设置一些可见性标志，而无需额外的编程。谢谢！

关于您如何做到这一点的任何提示？我是threejs的新手，所以“从你的原点画一条线到射线的方向”对我来说不是小菜一碟:)

请进一步解释如何画线或其他东西...谢谢

非常感谢兄弟 :) 对我来说，codePen 演示仅在我将库更改为 r84 时才有效，但没关系，我了解基础知识。