Aligner BoxGeometry entre deux points 3D

Question

Je crée un jeu dans lequel vous pouvez ajouter des objets à un monde sans utiliser de grille. Maintenant, je veux faire un sentier. Lorsque vous cliquez sur "Créer sentier", vous pouvez ajouter un point sur le monde à la position raycaster. Après avoir ajouté un premier point, vous pouvez ajouter un deuxième point au monde. Lorsque ces 2 objets ont été placés. Une ligne/un sentier est visible du premier point au second. Je peux le faire très simplement avec THREE.Line. Voir le code:

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); 

Mais je ne peux pas ajouter une texture sur une simple ligne. Maintenant, je veux faire quelque chose pareil avec un mesh. J'ai la position du premier point et la position du raycaster du second point. J'ai aussi la longueur entre les deux objets pour la longueur du sentier. Mais je ne sais pas comment je peux obtenir la rotation dont j'ai besoin.

Remarque. J'ai vu quelque chose à propos de LookAt, est-ce peut-être une bonne idée, comment puis-je l'utiliser avec un maillage?

Quelqu'un peut-il m'aider à obtenir la bonne rotation pour l'objet du sentier?

J'utilise ce code pour le maillage 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); 
}); 

Je veux obtenir la rotation correcte pour direction.

[MISE À JOUR] Le code de WestLangley aide beaucoup. Mais ça ne marche pas dans toutes les directions. J'ai utilisé ce code pour la durée:

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

Que puis-je faire pour que la longueur fonctionne dans toutes les directions?

Answer 1

Vous souhaitez aligner une boîte entre deux points 3D. Vous pouvez le faire comme ceci:

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