Question

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

Answer 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()

如何设置箭头形状的枢轴点

1 个答案: