CODEWITHSUNDEEP
three.js
Phob1a
Phob1a

Reputation: 773

How to set pivot point for an arrow-like shape

I'm creating this arrow-like shape with three.js: 

let planeShape = new THREE.Shape()
planeShape.moveTo(0, 0)
planeShape.lineTo(3, 1)
planeShape.lineTo(0, 2)
planeShape.lineTo(1, 1)
planeShape.lineTo(0, 0)

var geometry = new THREE.ShapeGeometry( planeShape )
// Appropriate rotation or translation should take place here
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
var mesh = new THREE.Mesh( geometry, planeMaterial )
scene.add( mesh )

And I want to be able to use mesh.lookAt(position) so that the tip of the arrow ends up pointing the specified position. However, I haven't been able to set an appropriate pivot point. I think I'm having problems because I'm creating the arrow shape points in 2D but I end up with a 3D object losing track of my origin point.

Here's an example of what I want to accomplish: https://threejs.org/examples/misc_lookat.html

Upvotes: 0

Views: 170

Answers (1)

prisoner849
prisoner849

Reputation: 17586

After var geometry = new THREE.ShapeGeometry( planeShape ) add

geometry.translate(0, -1, 0); // center with x-axis
geometry.rotateY(-Math.PI * 0.5); // align with z-axis to use with lookAt()

Upvotes: 2

Related Questions