[英]How to get the vertex position after applying translate, rotate and scale to geometry using three.js?
我一直在玩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()
檢查了頂點位置,它們在幾何上下文中沒有變化。 那么,有什么方法可以計算這些頂點的新位置嗎?
您沒有將變換應用於幾何體 。 您已將轉換應用於對象 。
研究正在使用的方法的源代碼是一個好主意,以便您了解它們的作用。 這樣您將學到很多東西。
修改對象的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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.