Выравнивание BoxGeometry между двумя точками 3D

Question

Я делаю игру, в которой вы можете добавлять объекты в мир без использования сетки. Теперь я хочу сделать тропинку. Когда вы нажимаете «Create footpath», вы можете добавить точку в мир в позиции raycaster. После добавления первой точки вы можете добавить вторую точку в мир. Когда эти 2 объекта размещены. Линия/пешеходная дорожка видна с первой точки на вторую.

Я могу сделать это очень просто с THREE.Line. См. Код:

var lineGeometry = new THREE.Geometry(); 
lineGeometry.vertices.push(new THREE.Vector3(x1,0,z1), new THREE.Vector3(x2,0,z2)); 
lineGeometry.computeLineDistances(); 
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xFF0000 }); 
var line = new THREE.Line(lineGeometry, lineMaterial); 
scene.add(line); 

Но я не могу добавить текстуру на простой строке. Теперь я хочу сделать что-то одно с Mesh. У меня есть позиция первого пункта и позиция raycaster второй точки. У меня также есть длина между двумя объектами на длину пешеходной дорожки. Но я не знаю, как я могу получить ротацию, что нужно.

Примечание. Я видел что-то около LookAt, может быть, это хорошая идея, как я могу использовать это с сеткой?

Может ли кто-нибудь помочь мне получить правильное вращение для объекта пешеходной дорожки?

Я использую этот код для foodpath сетки:

var loader = new THREE.TextureLoader(); 
loader.load('images/floor.jpg', function (texture) { 
    var geometry = new THREE.BoxGeometry(10, 0, 2); 
    var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: 0.5 }); 
    var footpath = new THREE.Mesh(geometry, material); 
    footpath.position.copy(point2); 
    var direction = // What can I do here? 
    footpath.rotation.y = direction; 
    scene.add(footpath); 
}); 

Я хочу, чтобы получить правильное направление вращения для direction.

[ДОПОЛНЕНО] Код WestLangley помогает много. Но он работает не во всех направлениях. Я использовал этот код для длины:

var lenght = footpaths[i].position.z - point2.position.z; 

Что я могу сделать, чтобы длина работала во всех направлениях?

Answer 1

Вы хотите выровнять коробку между двумя 3D-очков. Вы можете сделать это следующим образом:

var geometry = new THREE.BoxGeometry(width, height, length); // align length with z-axis 

geometry.translate(0, 0, length/2); // so one end is at the origin 

... 

var footpath = new THREE.Mesh(geometry, material); 

footpath.position.copy(point1); 

footpath.lookAt(point2); 

Three.js R.84