1/4

日記

2026/01/04

Three.js

カクカクのパスから滑らかなパスを生成

パス数の少ないinitialPointsから各パスの間を保管したパスをpointsに格納したい。
p0は現在の点、p1は次の点。

const initialPoints = [[x,y,z], [x,y,z],,,[x,y,z]];
const p0 = new THREE.Vector3();
const p1 = new THREE.Vector3();

const points: THREE.Vector3[] = [];
controlPoints.forEach((point, ndx) => {
  p0.set(...point);
  p1.set(...controlPoints[(ndx + 1) % controlPoints.length]);
  points.push(
    new THREE.Vector3().copy(p0),
    new THREE.Vector3().lerpVectors(p0, p1, 0.1),
    new THREE.Vector3().lerpVectors(p0, p1, 0.9)
  );
});
  • new THREE.Vector3().lerpVectors(p0, p1, 0.1)で現在点と次点の間の10%位置
  • const positions = curve.getPoints(250);で配列の曲線を等間隔に250分割した点の配列を取得

感想

デスノートおもろい

Death note is awesome.