如何为类似箭头的形状设置枢轴点答案

【问题标题】：How to set pivot point for an arrow-like shape如何为类似箭头的形状设置枢轴点
【发布时间】：2018-09-15 22:35:31
【问题描述】：

我正在用 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 )

我希望能够使用 mesh.lookAt(position) 以便箭头的尖端最终指向指定的位置。但是，我无法设置适当的枢轴点。我认为我遇到了问题，因为我在 2D 中创建箭头形状点，但最终导致 3D 对象丢失了我的原点。

这是我想要完成的示例：https://threejs.org/examples/misc_lookat.html

【问题讨论】：

标签： three.js

【解决方案1】：

在var geometry = new THREE.ShapeGeometry( planeShape )之后添加

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

【讨论】：