Three.js-3D空间中的2D对象（通过顶点） [英] Three.js - 2D object in 3D space (by Vertices)

问题描述

我有一个问题：

我有一系列3D点。
如何在3D空间中绘制顶点提供的2D平面对象？
我想从点[0]到点[1]，从点[1]到点[2]等绘制线...
现在我有以下解决方案：

I have an array of 3D Points. How to draw 2D, flat object given by Vertices in 3D Space? I want to draw line from Points[0] to Points[1], from Points[1] to Points[2] etc… Now I have a following solution:

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 );

faceToTriangles（）：

faceToTriangles() :

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;
}

我之前写过它，并且在大多数情况下都可以使用。
它由一个对象组成一个三角形。但是在某些情况下，函数faceToTriangles（）无法正确工作。它会生成超出对象的三角形。

I wrote it some time ago, and it’s works in most of cases. It makes a triangles from an objects. But in some cases, function faceToTriangles() works incorretly. It generates triangles going beyond the Object.

如何使其正确？
如何在3D空间中显示2D平面对象（由顶点数组提供）？
也许不转换为三角形？

How make it correctly? How to display 2D flat object (given by an array of vertices) in 3D space? Maybe without converting to triangles?

（对不起，我的英语）

推荐答案

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

Just a concept, using a quaternion:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 4).setLength(40);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101010);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AxesHelper(3));

var rawPoints = [{
  "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 points = [];
rawPoints.forEach(r => {
  points.push(new THREE.Vector3(r.x, r.y, r.z));
});

var tri = new THREE.Triangle(points[2], points[1], points[0]);
var normal = new THREE.Vector3();
tri.getNormal(normal);

var baseNormal = new THREE.Vector3(0, 0, 1);
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, baseNormal);

var tempPoints = [];
points.forEach(p => {
  tempPoints.push(p.clone().applyQuaternion(quaternion));
})

var shape = new THREE.Shape(tempPoints);
var shapeGeom = new THREE.ShapeGeometry(shape);
var mesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
  color: "red",
  side: THREE.DoubleSide,
  wireframe: false
}));
console.log(points);
mesh.geometry.vertices = points;
scene.add(mesh);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

这篇关于Three.js-3D空间中的2D对象（通过顶点）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！