Three.js 从两个向量创建具有三个.js四元数的面的类出错

我正在创建一个类来创建一个对象的面，但是我有一个四元数的problens。当我使用基本法向量作为（0,0,0）时，垂直面消失，我得到了这个错误

THREE.DirectGeometry:不支持无面几何图形。

但是，当我将基本法向量设置为（0,0,1）时，所有的面都变得水平并且远离实体。有人能帮我吗

---

请注意，的两个参数都应具有单位长度。向量

（0,0,0）

不是单位向量，因为它的长度

0

。所以你需要使用不同的输入向量。

我明白了，但是你能告诉我为什么当我使用（0,0,1）时它会爆炸吗？我应该使用哪种长度来自动计算所有面？我不确定我是否了解您的用例，以便在这方面给出建议。我唯一能说的是，如果你调用

length（）

，你应该总是使用一个向量作为单位向量，它产生

1

。如果没有，在进一步计算中使用它之前，应该调用

normalize（）

。零向量根本不应该被使用（因为它不能被标准化）。

'use strict'

// Classe Tface
// Representa visualmente o face

//three
import * as THREE from 'three'
import { Object3D } from 'three/src/core/Object3D.js'
import { Vector3 } from 'three/src/math/Vector3';
import {Triangle} from 'three/src/math/Triangle'


    /**
     * @param nome: string
   * @param arrTponto = []
   * @param arrFaces = []
    */

class Tface extends Object3D {
  constructor( nome, arrTponto, arrFaces ) { //Parametros: string, Vector3(X,Y,Z)

        super();

        this.type = 'Tface';
    //name of face
    this.nome = nome;
    //receives  Tpontos array  
    this.arrPt = arrTponto;
    //receives array of points name that makes up the face
    this.arrFaces = arrFaces
  }
/* recebe o array de pontos e o array com o nomes dos pontos de cada face, compara ambos 
e separa os pontos de cada face determina a normal de cada face, cria a malha da mesma e adiciona na cena.
*/

  //intersect array of point names with Tponto array (vector3)
 criaFace(){
  this.points=[]
  this.arrFaces.forEach((elemento) => {
          this.arrPt.forEach((e)=>{
           if(e.nome == elemento){
            this.pontV = new Vector3(e.X,e.Y,e.Z)
            this.points.push(this.pontV)
        }
      })
      
})

  //determines the normal of the faces
  this.triangulo = new Triangle(this.points[2], this.points[1], this.points[0])
  this.normal = new Vector3();
  this.triangulo.getNormal(this.normal);
 
  this.baseNormal = new Vector3(0,0,1);
  

  this.quaternion.setFromUnitVectors(this.normal, this.baseNormal);
  

  this.tempPoints = [];
  this.points.forEach(p => {
  this.tempPoints.push(p.clone().applyQuaternion(this.quaternion));
  console.log(p,this.tempPoints)
  })


  //generates the face mesh
  this.shape = new THREE.Shape(this.tempPoints);
  this.shapeGeom = new THREE.ShapeGeometry(this.shape);
  this.mesh = new THREE.Mesh(this.shapeGeom, new THREE.MeshBasicMaterial({
   color: 0xfcee2b,
    side: THREE.DoubleSide,
     transparent: true,
     opacity: .6,
     wireframe: false
   }));

     this.mesh.geometry.vertices = this.points;
     this.name = String
     this.mesh.name
     //add face to the scene
    this.add(this.mesh);

    this.geom = new THREE.BufferGeometry().setFromPoints(this.points);
    this.matLines = new THREE.LineBasicMaterial({color: "red"});
    this.lines = new THREE.LineLoop(this.geom, this.matLines);
    this.lines.name = "line"+ String(this.name);
    this.add(this.lines);
  
    //requestRenderIfNotRequested();

   }
dispose() {//libera a memória
  this.children.forEach(element => {
    element.material.dispose();
    element.geometry.dispose();
  });
  this.children = [];
}
update( nome, pt ) {//atualiza o ponto: nome e posição
  this.nome = nome;
  this.children.forEach(element => {
    element.position.copy(pt);
  });
}}


export { Tface };