次の関数でチューブ ジオメトリを作成しました。
function plotPath()
{
var obj = getPath();
var segments = 60;
var closed = false;
var debug = false;
var radiusSegments = 12;
var tube;
var points = [];
var x=0,y=0,z=0;
for(var i=0; i<obj.path.length; i++)
{
console.log(obj.path[i].point);
points.push(obj.path[i].point);
}
extrudePath = new THREE.SplineCurve3(points);
tube = new THREE.TubeGeometry(extrudePath, segments, 10, radiusSegments, closed, debug);
tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial({
color: 0x000000, side: THREE.DoubleSide,
opacity: 0.5, transparent: false, wireframe: true}));
tubeMesh.add(new THREE.AxisHelper());
var v = new THREE.Vector3(1,0,0).normalize();
tubeMesh.applyMatrix(matrix.makeRotationAxis(v, 0));
tubeMesh.applyMatrix(matrix.makeTranslation(-500,0,0));
if ( tube.debug ) tubeMesh.add( tube.debug );
scene.add(tubeMesh);
objects.push(tubeMesh);
}
ここでextrudePath
は、 に引数として渡されたポイントで構築されていますTHREE.SplineCurve3(points)
。ポイントは JSON 形式で外部の JavaScript ファイルに保存されます。このチューブ ジオメトリでは、最初の部分を回転/回転させることができます。ズームアウトして、チューブの中央または端の部分を回転/スピンしようとすると、できません。回転がおかしい。
チューブ ジオメトリの特定の部分を回転/スピンするにはどうすればよいですか? 回転をスムーズにするために、いくつかの小さな部分に分割する必要がありますか? またはTHREE.AxisHelper
、回転/スピンを簡単に見せるために各ポイントに追加することは可能ですか?