3d Three.js-三维空间中的二维对象（按顶点）_3d_Three.js_Geometry_2d

3d Three.js-三维空间中的二维对象（按顶点）

3d three.js geometry

3d Three.js-三维空间中的二维对象（按顶点）,3d,three.js,geometry,2d,3d,Three.js,Geometry,2d,我有一个问题：我有一组3D点。如何在三维空间中绘制由顶点给定的二维平面对象？我想从点[0]到点[1]，从点[1]到点[2]等等画一条线… 现在，我有了以下解决方案： var geometry = new THREE.BufferGeometry(); var vertices = faceToTriangles( VerticesArray ); // my function var uvs = new Float32Array([ 0.0, 0.0, 1.0, 0.

我有一个问题：

我有一组3D点。如何在三维空间中绘制由顶点给定的二维平面对象？我想从点[0]到点[1]，从点[1]到点[2]等等画一条线… 现在，我有了以下解决方案：

var geometry = new THREE.BufferGeometry();

var vertices = faceToTriangles( VerticesArray );  // my function

var uvs = new Float32Array([
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,

    0.0, 0.0,
    1.0, 1.0,
    0.0, 1.0
]);


geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
var material = new THREE.MeshLambertMaterial( {color: 'red' } );
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh( geometry, material );

FacetTrangles：

function faceToTriangles( VerticesArray )
{
    var Triangles = new Float32Array( (VerticesArray.length-2)*9 );

    var i = 0;
    for($v=1; $v < Face.Vertices3D.length-1; $v++)
    {
        Triangles[i++] = parseFloat(Face.Vertices3D[0].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[0].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[0].z);

        Triangles[i++] = parseFloat(Face.Vertices3D[$v].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v].z);


        Triangles[i++] = parseFloat(Face.Vertices3D[$v+1].x);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v+1].y);
        Triangles[i++] = parseFloat(Face.Vertices3D[$v+1].z);
    }

    return Triangles;
}

我不久前写的，在大多数情况下都是有效的。它从一个对象生成一个三角形。但在某些情况下，FacetTrainings函数工作不正确。它生成超出对象的三角形

如何正确制作？如何在三维空间中显示由顶点数组给定的二维平面对象？也许不用转换成三角形

用四元数表示我的英语：

var场景=新的三个场景； var摄像机=新的三视角摄像机60，window.innerWidth/window.innerHeight，11000； camera.position.set2、2、4.SetLength 40； var renderer=new THREE.WebGLRenderer{ 反别名：对 }; renderer.setSizewindow.innerWidth，window.innerHeight； renderer.setClearColor0x101010； document.body.appendChildrender.doElement； var controls=new THREE.OrbitControlscamera，renderer.domElement； scene.addnew THREE.AxesHelper3； var原始点=[{ x:10， y:10， z:1 }, { x:9.421052631578952， y:11.736842105263158， z:6.789473684210525 }, { x:5， y:12.142857142857142， z:7.7142857142857135 }, { x:5.285714285714286， y:13， z:10.628571428571426 }, { x:-1， y:13， z:10 }, { x:0,， y:10， z:0 }] var点=[]； rawPoints.forEachr=>{ 新三点矢量3r.x，r.y，r.z； }; var tri=新的三个三角形点[2]，点[1]，点[0]； var normal=新的三个向量3；三、正常； var baseNormal=新的三个向量30,0,1； var quaternion=new THREE.quaternion.setFromUnitVectorsnormal，baseNormal； var tempPoints=[]； points.forEachp=>{ tempPoints.pushp.clone.applyQuaternionquaternion； } var shape=新的三个.ShapetempPoints； var shapeGeom=新的3.ShapeGeometryshape； var mesh=新的THREE.MeshshapeGeom，新的THREE.MeshBasicMaterial{ 颜色：红色，三面，双面，线框：错误 }; 控制台。对数点； mesh.geometry.vertices=点； scene.addmesh；提供函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； } 身体{ 溢出：隐藏；保证金：0； }

只是一个概念，使用四元数：