Question

试图创建具有三个三角形的四面体。我无法确定面孔。这是代码：

HTML

<div id="myid"></div>

JAVASCRIPT

const divid = document.getElementById("myid");

let facesVectors = [ // triangles vertices
 [0, 0, 0], 
 [-1, 0, 0],
 [0, 1, 0],
 ]

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
let renderer = new THREE.WebGLRenderer({ alpha: true });

divid.appendChild(renderer.domElement);

camera.position.z = 2.5;

// equilateral triangle template
const geometry = new THREE.Geometry()
geometry.vertices.push(new THREE.Vector3(-0.48, 0, 0))
geometry.vertices.push(new THREE.Vector3(0.48, 0, 0))
geometry.vertices.push(new THREE.Vector3(0, 0.72, 0))
geometry.faces.push(new THREE.Face3(0, 1, 2))

let material, face, i
let faces = []
for (i = 0; i < facesVectors.length; i++) {
  material = new THREE.MeshBasicMaterial({ color: 0x00FF00, side: THREE.DoubleSide })
  face = new THREE.Mesh(geometry, material)
  face.position.set(facesVectors[i][0], facesVectors[i][1], facesVectors[i][2])
  if (i === 1) {
    face.rotation.x = -(Math.PI / 2)
  } else if (i === 2) {
    face.rotation.x = -(Math.PI / 2)
  }
  faces.push(face)
  scene.add(face)
}

let animate = function() {
  requestAnimationFrame(animate);
  faces.forEach((face)=>{
    face.rotation.x += 0.005;
    face.rotation.y += 0.01;
  })
  renderer.render(scene, camera);
};

animate();

演示：https://codepen.io/jeffprod/pen/GRJGYoQ

如何旋转三角形1和2，以便得到四面体？有最简单的方法吗？当然，我不想使用TetrahedronBufferGeomety，因为我将需要管理面部颜色和许多其他方向不同的三角形。

Answer 1

基于此forum topic。刚刚针对面孔和紫外线注释了两行：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, -1, 2);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

// tetrahedron
// ---------------------------------------------------------------------------------------
var pts = [ // https://en.wikipedia.org/wiki/Tetrahedron#Coordinates_for_a_regular_tetrahedron
  new THREE.Vector3(Math.sqrt(8 / 9), 0, -(1 / 3)),
  new THREE.Vector3(-Math.sqrt(2 / 9), Math.sqrt(2 / 3), -(1 / 3)),
  new THREE.Vector3(-Math.sqrt(2 / 9), -Math.sqrt(2 / 3), -(1 / 3)),
  new THREE.Vector3(0, 0, 1)
];

var faces = [ // triangle soup
  //pts[0].clone(), pts[2].clone(), pts[1].clone(),
  pts[0].clone(), pts[1].clone(), pts[3].clone(),
  pts[1].clone(), pts[2].clone(), pts[3].clone(),
  pts[2].clone(), pts[0].clone(), pts[3].clone()
];

var geom = new THREE.BufferGeometry().setFromPoints(faces);
geom.rotateX(-Math.PI * 0.5);
geom.computeVertexNormals();

geom.setAttribute("uv", new THREE.Float32BufferAttribute([ // UVs
  //0.5, 1, 0.06698729810778059, 0.2500000000000001, 0.9330127018922194, 0.2500000000000001,
  0.06698729810778059, 0.2500000000000001, 0.9330127018922194, 0.2500000000000001, 0.5, 1,
  0.06698729810778059, 0.2500000000000001, 0.9330127018922194, 0.2500000000000001, 0.5, 1,
  0.06698729810778059, 0.2500000000000001, 0.9330127018922194, 0.2500000000000001, 0.5, 1
], 2));
// ---------------------------------------------------------------------------------------

var tetrahedron = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"),
  side: THREE.DoubleSide
}));

scene.add(tetrahedron);

renderer.setAnimationLoop(() => {
  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>

绘制带有三角形的四面体

1 个答案: