three.jsを使用して平行移動、回転、縮尺をジオメトリに適用した後の頂点位置の取得方法は？

Question

私はthree.jsで遊んでいます。

私の目的は、シーンにカーブを作成し、それに何らかの変換を適用することです。関数は行を作成することです：

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

に変換を適用していません。 オブジェクトに変換を適用しました。

使用しているメソッドのソースコードを調べて、自分が行っていることを理解できるようにすることをお勧めします。あなたはそのように多くを学ぶでしょう。

var vector = new THREE.Vector3(); 

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

vector.applyMatrix4(curveObject.matrix); 

console.log(vector); 

three.js r.75