2016-07-05 4 views
1

В three.js, я использую элементы управления PointerLock, чтобы сделать основной шутер от первого лица. Я используюНичья линии в направлении raycaster в three.js

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, никогда не думал, что рисовать линию будет так сложно.

Update: Я пытаюсь нарисовать линию с помощью:

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

, но я не могу понять, что поставить на место «...». Как определить, на какую точку должна идти линия? И как определить, с какого момента он начинается? Игрок может двигаться и даже прыгать, поэтому начальная точка всегда отличается.

+0

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

+0

Спасибо за это справка. Теперь я знаю, как рисовать линию, но до сих пор не могу понять, как решить мою проблему. Я обновил свой вопрос. – binoculars

+0

Я думаю, вам просто нужно отправить метод 'push()' отправной точкой и конечной точкой (векторы). Первым, возможно, является ваша позиция камеры 'geometry.vertices.push (camera.position)'. Второй - первая точка пересечения, возвращаемая функцией intersectObjects. 'Geometry.vertices.push (пересекает [0] .point)'. Я не использовал Raycaster, поэтому не тестировал это, но это будет что-то вроде этого. – 2pha

ответ

1

Вы можете использовать следующую (с помощью 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

Смежные вопросы