如何从Three.js中的3D点创建3D曲面？

本文介绍了如何从Three.js中的3D点创建3D曲面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在制作一个项目，以制作带有点和线（是否弯曲）的简单3d模型。对于第一个版本，我将SVG元素用于简单的渲染，平滑曲线和鼠标事件。

现在，我尝试使用 Three.js 渲染器，而不是SVG。我必须创建3d管来替换曲线，但是我不知道如何基于多个xyz坐标创建3d曲面。

这里是一个由4点和4线（3个直线和1个弯曲）组成的模型的示例：

然后我想创建一个表面（或平面），就像蓝色形状一样：

我从他的主题是：将bezier转换为三段平坦的道路。 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三.Vector3（点[1] .x，点[1] .y，-点[1] .z），新的三.Vector3（点[2] .x，点[2] .y， -dots [2] .z），新的三.Vector3（dots [3] .x，dots [3] .y，-dots [3] .z），新的三.Vector3（点[0] .x，点[0] .y，-点[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（geometry，material）; scene.add（mesh）;

但是此示例代码仅创建了另一个管状形状。

解决方案

而不是使用四个（Bezier）曲线来创建曲面-请使用贝塞尔曲面或 NURBS -他们是为此数学设计的。这是一些演示-查看其源代码。

I'm making a project to make simple 3d models with dots and lines (curved or not). For a first version I used SVG elements for simple render, smooth curves and mouse events.

Now I'm trying to use Three.js renderer instead of SVG. I got to create 3d tubes to replace the curved lines, but I don't know how to create 3d surfaces based on multiple xyz coordinates.

Here is an example of a model made of 4 points and 4 lines (3 straights and 1 curved):

We could imagine that the curve is extruded to more points, to something like this:

Then I would like to create a surface (or plane), just like the blue shape:

I got inspired of this topic: convert bezier into a plane road in three.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);

But this sample code only creates another tube-like shape.

解决方案

Instead of using four (Bezier) curves to create surface - use Bezier SURFACES or NURBS - their are mathematically designed for it. Here is some demo - look at it source code.