如何在使用 three.js 对几何应用平移、旋转和缩放后获取顶点位置？

Question

我一直在玩three.js。

我的 objective 是在场景中创建一条曲线并对其应用一些变换。函数是创建行是：

var random_degree = Math.round(Math.rand() * 180);
var tmp = [
    new THREE.Vector3(-5, 0, 0),
    new THREE.Vector3(0, 0, 5),
    new THREE.Vector3(5, 0, 0),
    new THREE.Vector3(0, 0, -5),
];
var canvasW = window.innerWidth;
var canvasH = window.innerHeight;
// so the initial curve is a circle on x-z plain.

function get_line_geo() {
    var angle = (random_degree + 1 * 0.25) % 360 * (Math.PI / 180);
    var tx = Math.cos(angle) * canvasW * 0.25;
    angle = (random_degree + 1 * 0.3) % 360 * (Math.PI / 180);
    var ty = Math.sin(angle) * canvasH * 0.25;

    var curve = new THREE.CatmullRomCurve3(tmp);
    curve.closed = true;

    var geometry = new THREE.Geometry();
    geometry.vertices = curve.getPoints(300);
    console.log(geometry.vertices[0].x + ' ' +geometry.vertices[0].y + ' ' +geometry.vertices[0].z);
    var material = new THREE.LineBasicMaterial();
    var curveObject = new THREE.Line(geometry, material);
    curveObject.translateX((canvasW - margin * 2) / 2 + tx);
    curveObject.translateY((canvasH - margin * 2) / 2 + ty);
    curveObject.translateZ((canvasH - margin * 2) / 2 + ty);

    curveObject.rotation.x = ((random_degree + 1 * 0.25) % 360) * Math.PI / 180;
    curveObject.rotation.y = ((random_degree + 1 * 0.25) % 360) * Math.PI / 180;
    curveObject.rotation.z = ((random_degree + 1 * 0.25) % 360) * Math.PI / 180;

   curveObject.scale.x = 10;
   curveObject.scale.y = 10;
   curveObject.scale.z = 10;

   console.log(curveObject.geometry.vertices[0].x + ' ' +curveObject.geometry.vertices[0].y + ' ' +curveObject.geometry.vertices[0].z);

   return curveObject;
}

我使用 console.log() 检查了顶点位置，它们在几何上下文中没有改变。那么有什么方法可以计算这些顶点的新位置吗？

Answer 1

您没有对几何体应用变换。您对对象.

应用了转换

研究您正在使用的方法的源代码是个好主意，这样您就可以了解它们在做什么。这样你会学到很多东西。

修改对象的position、rotation或scale属性后，需要调用

curveObject.updateMatrix();

然后这样做：

var vector = new THREE.Vector3();

vector.copy( curveObject.geometry.vertices[ 0 ] );

vector.applyMatrix4( curveObject.matrix );

console.log( vector );

three.js r.75

如何在使用 three.js 对几何应用平移、旋转和缩放后获取顶点位置？

How to get the vertex position after applying translate, rotate and scale to geometry using three.js?

javascript

3d

geometry

transform

three.js