在three.js中在raycaster的方向上繪製線

在three.js中，我使用PointerLock控制製作基本的第一人稱射擊遊戲。我用在three.js中在raycaster的方向上繪製線

function onDocumentMouseDown(event) { 
    var raycaster = new THREE.Raycaster(); 
    mouse3D.normalize(); 
    controls.getDirection(mouse3D); 
    raycaster.set(controls.getObject().position, mouse3D); 
    var intersects = raycaster.intersectObjects(objects); 
    ... 
}

檢測與對象，這意味着你「出手」的對象碰撞。

現在，我想要可視化子彈的路徑。我正在考慮從用戶所在的位置向raycaster的方向畫一條線，但我無法弄清楚如何做到這一點...任何能夠幫助我的人？我剛剛接觸three.js，從來沒有想過畫一條線會很難。

更新： 我試圖用畫一條線：

var geometry = new THREE.Geometry(); 
geometry.vertices.push(...); 
geometry.vertices.push(...); 
var line = new THREE.Line(geometry, material); 
scene.add(line);

，但我想不出該怎麼把到位的「...」。我該如何檢測線路應該去哪個點？以及如何確定它從哪一點開始？玩家可以移動甚至跳躍，所以起點總是不同。

來源

2016-07-05 binoculars

https://github.com/mrdoob/three.js/wiki/Drawing-lines – 2pha

感謝該參考。我現在知道如何畫一條線，但仍然無法弄清楚如何解決我的問題。我更新了我的問題。 – binoculars

我想你只需要發送'push（）'方法的起點和終點（向量）。第一個可能是你的相機位置'geometry.vertices.push（camera.position）'。第二個是intersectObjects函數返回的第一個交點。 'geometry.vertices.push（相交[0] .point）'。我沒有使用Raycaster，所以沒有測試過，但它會是這樣的。 – 2pha

您可以使用以下（使用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);

Codepen在：https://codepen.io/anon/pen/evNqGy

來源

2017-02-28 00:28:11 gaitat

在three.js中在raycaster的方向上繪製線

回答

相關問題