In my game, I have the ability for players to add objects to a world without being restricted to a grid. Now, I am working on adding footpaths to the game. When the player clicks on "Create footpath", they can add a point in the world at the location of the raycaster. Once the first point is placed, they can then add a second point to create a line/footpath visible from the first to the second point.
Creating a simple line using THREE.Line is straightforward. Here's the code snippet:
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);
Now, I want to achieve something similar with a Mesh object but add a texture to it. I have the positions of the first and second points, as well as the length between them for the footpath. However, I'm unsure how to calculate the necessary rotation.
I've heard about LookAt, could this be a solution? How can I implement this with a mesh?
Any help on determining the correct rotation for the footpath object would be greatly appreciated.
Here is the code snippet I use for creating the footpath mesh:
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 do I need here?
footpath.rotation.y = direction;
scene.add(footpath);
});
I am trying to figure out the correct rotation value for direction.
[UPDATE] The code by WestLangley has been helpful, but it doesn't work in all directions. I used the following code to calculate the length:
var length = footpaths[i].position.z - point2.position.z;
How can I ensure that the length works accurately in all directions?