Three.js 中的旋转锚点 [英] Rotation anchor point in Three.js

问题描述

我正在定义一个锥体，我需要能够围绕它的顶点(锥体厚度最小的点)旋转它.我还找不到设置旋转发生点的方法.

I am defining a cone that I need to be able to rotate around its top point (the point where the cone thickness is the smallest one). I couldn't find yet the way to set the point around which the rotation to happen.

var coneGeometry = new THREE.CylinderGeometry(1000, 0, width, 50, 50, false);
var cone = new THREE.Mesh(coneGeometry, material);
cone.position.x = x;
cone.position.y = y + width / 2;
cone.position.z = z;
// I want this rotation to happen around the point given by the (x, y, z) location
cone.rotation.x = dip;

推荐答案

圆锥几何体以原点为中心.您需要做的是在创建锥体几何图形后立即对其进行平移，使锥体的尖端位于原点.

The cone geometry is centered at the origin. What you need to do is translate the cone geometry right after it is created so the tip of the cone is at the origin.

coneGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, coneHeight/2, 0 ) );

(平移的符号根据圆锥的哪一端是小端而变化.)

(The sign of the translation changes depending on which end of the cone is the small end.)

现在，当您旋转锥体时，它将围绕尖端旋转.提示也将位于您设置的位置.

Now, when you rotate the cone, it will rotate around the tip. The tip will also be located at the position you set.

您现在可以这样做:

coneGeometry.translate( 0, coneHeight/2, 0 ); // three.js r.72

这篇关于Three.js 中的旋转锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！