可视化Raycaster

Mic*_*ach 5 three.js raycasting

我正在尝试使用射线广播检测相交。我当前的问题是我不确定我的光线投射是否朝着想要的方向瞄准。所以我的一般问题是:有没有办法使射线广播可见?如果是这样:怎么做?这对我有很大帮助。

麦可

小智 6

这是显示您的 raycsters 的另一种方法:

scene.add(new THREE.ArrowHelper(raycaster.ray.direction, raycaster.ray.origin, 300, 0xff0000) );
Run Code Online (Sandbox Code Playgroud)


gai*_*tat 4

为什么不从原点到光线方向画一条线呢?

更具体地说(使用 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 );
Run Code Online (Sandbox Code Playgroud)

Codepen 网址: https: //codepen.io/anon/pen/evNqGy