Я делаю проект по созданию простых 3d моделей с точками и линиями (изогнутыми или нет).Для первой версии я использовал элементы SVG для простого рендеринга, плавных кривых и событий мыши.
Теперь я пытаюсь использовать Three.js рендерер вместо SVG.Мне нужно создать 3d трубы для замены изогнутых линий, но я не знаю как создавать трехмерные поверхности на основе нескольких координат xyz .
Вот пример модели, сделанной из4 точки и 4 линии (3 прямые и 1 изогнутые):
Мы можем представить, что кривая вытянута в большее количество точек, что-то вроде этого:
Затем я хотел бы создать поверхность (или плоскость), аналогичную синей форме:
Меня вдохновила эта тема: преобразовать Безье в плоскую дорогу за три.js
var material = new THREE.MeshBasicMaterial({ color: 0xc0c0c0 });
var path = new THREE.CatmullRomCurve3([
new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z),
new THREE.Vector3(dots[1].x, dots[1].y, -dots[1].z),
new THREE.Vector3(dots[2].x, dots[2].y, -dots[2].z),
new THREE.Vector3(dots[3].x, dots[3].y, -dots[3].z),
new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z)
]);
var pts = [],
a ;
for (var i = 0 ; i < 3 ; i++) {
a = i / 3 * Math.PI;
pts.push(new THREE.Vector2(Math.cos(a) * 1, Math.sin(a) * 1));
}
var shape = new THREE.Shape(pts);
var geometry = new THREE.ExtrudeGeometry(shape, {
steps : 10,
bevelEnabled : false,
extrudePath : path
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Но этот пример кода создает толькодругая трубообразная форма.