three.js - 使用来自两个向量的三个.js 四元数创建面的类出错

问题描述

我正在创建一个类来制作对象的面孔，但我遇到了四元数的问题。当我将 baseNormal 向量用作 (0,0,0) 时，垂直面消失了，我得到了这个错误。

THREE.DirectGeometry：不支持无面几何。

但是，当我将 baseNormal 向量设置为 (0,0,1) 时，所有的面都变得水平并且远离实体。有人能帮我吗？

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

标签： three.jsquaternions

three.js - 使用来自两个向量的三个.js 四元数创建面的类出错

问题描述

解决方案

推荐阅读