I'm trying to figure out how to point an arrow at a specific object in an Aframe scene. The arrow and object will be located at random positions, with the arrow initially facing "up" along the z-axis. I have some ideas on how to achieve this, but I'm unsure of the exact implementation. Can someone provide guidance?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene background="color: #ECECEC">
<a-sphere id="sphere" position="6 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-entity id="arrow"></a-entity>
</a-scene>
</body>
<footer>
<script>
const loader = new THREE.GLTFLoader();
loader.load("https://cdn.glitch.com/6ff6d9d5-f662-48cc-8e22-30eaf4dfc295%2Farrow.glb?v=1612557642197", function ( model ) {
model.scene.traverse(node => {
if (node.geometry && node.material) {
geometry = node.geometry;
}
})
geometry.scale( .5,.5,.5 );
geometry.computeVertexNormals();
material = new THREE.MeshLambertMaterial({ flatShading: true, color: 0xFF0000 });
mesh = new THREE.Mesh(geometry, material);
document.getElementById('arrow').object3D.add(mesh);
const arrow = document.getElementById('arrow').object3D;
arrow.position.set(1,1,1);
const sphere = document.getElementById('sphere').object3D;
// The angleTo method from Three.js seems promising.
// However, it only returns one angle. If I can find the axis connecting
// the arrow and sphere, I might be able to apply this angle to the arrow.
const ang = new THREE.Vector3(arrow.position.x, arrow.position.y, arrow.position.z).angleTo(new THREE.Vector3(sphere.position.x, sphere.position.y, sphere.position.z));
arrow.rotation.set(--need to determine these angles--);
});
</script>
</footer>
</html>