如何在Three.js中调整四面体初始姿态使其呈正立金字塔状

我想要创建一个初始呈正立金字塔形态的四面体，后续让它主要沿X轴像行星自转一样旋转。目前我用TetrahedronGeometry创建的四面体初始是侧立状态，调整相机角度太麻烦，有没有办法让四面体加载时就呈正立金字塔状？

我尝试过用自定义顶点通过PolyhedronGeometry绘制，但结果还是侧立的，代码如下：

const verticesOfCube = [
  1, 1, 1,  - 1, - 1, 1,    - 1, 1, - 1,    1, - 1, - 1
];

const indicesOfFaces = [
  2, 1, 0,  0, 3, 2,    1, 3, 0,    2, 3, 1
];

const geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 1, 0 );

我的初始代码（用TetrahedronGeometry）：

import * as THREE from 'three';

// Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 15;

// Tetrahedron（注：原变量名torus是笔误）
const geometry = new THREE.TetrahedronGeometry(6,0);
const material = new THREE.MeshStandardMaterial( { color: 0xFF6347 } );
const tetrahedron = new THREE.Mesh( geometry, material );
scene.add( tetrahedron );

// Light
const light = new THREE.AmbientLight( 0xffffff ); // soft white light
scene.add( light );

function animate() {
    requestAnimationFrame( animate );
  tetrahedron.rotation.x += 0.01;
  tetrahedron.rotation.y += 0;
  tetrahedron.rotation.z += 0;
    renderer.render( scene, camera );
}
animate();

解决方案 #

方法1：直接旋转几何体（最简便） #

Three.js默认的TetrahedronGeometry顶点朝向是斜的，你可以在创建网格后直接旋转几何体或者网格本身，让它初始呈正立状态。这种方法不需要修改相机位置，也不用重新定义顶点：

// 创建四面体后，添加旋转代码
const tetrahedron = new THREE.Mesh( geometry, material );
// 绕X轴旋转-90度（π/2弧度），让四面体的一个面朝下，形成正立金字塔
tetrahedron.rotation.x = -Math.PI / 2;
scene.add( tetrahedron );

或者直接旋转几何体（这样所有基于该几何体的网格都会继承这个旋转）：

const geometry = new THREE.TetrahedronGeometry(6,0);
geometry.rotateX(-Math.PI / 2); // 旋转几何体本身

方法2：自定义顶点创建正立四面体 #

如果你想从根源上定义正立的四面体，可以直接指定顶点坐标，让底部三个顶点在XY平面，顶部顶点在Z轴正方向：

// 自定义正立四面体顶点：三个底部点在XY平面，顶部点在Z轴上方
const vertices = [
  2, 0, 0,      // 底部右前
  -1, Math.sqrt(3), 0, // 底部左前
  -1, Math.sqrt(3)/3, 0, // 底部后
  0, Math.sqrt(3)/3, Math.sqrt(8/3) // 顶部顶点
];

// 定义面的索引（每个面由三个顶点组成）
const indices = [
  0, 1, 2, // 底部面
  0, 1, 3, // 正面
  1, 2, 3, // 左面
  2, 0, 3  // 右面
];

const geometry = new THREE.BufferGeometry();
geometry.setIndex(indices);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.computeVertexNormals(); // 用于标准材质的光照计算

方法3：修正PolyhedronGeometry的顶点 #

你之前用PolyhedronGeometry的顶点定义不对，导致四面体侧立。可以重新定义顶点，让四面体的一个面在XY平面：

// 正立四面体的顶点：三个底部点在Z=0平面，顶部点在Z轴正方向
const tetraVertices = [
  1, 1, 0,    // 底部右
  -1, 1, 0,   // 底部左
  0, -1, 0,   // 底部后
  0, 0, Math.sqrt(2) // 顶部点
];

// 面索引：四个三角形面
const tetraFaces = [
  0, 1, 2, // 底部面
  0, 1, 3,
  1, 2, 3,
  2, 0, 3
];

const geometry = new THREE.PolyhedronGeometry(tetraVertices, tetraFaces, 6, 0);

修改后的完整代码（方法1示例） #

import * as THREE from 'three';

// Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 15;

// Tetrahedron
const geometry = new THREE.TetrahedronGeometry(6,0);
const material = new THREE.MeshStandardMaterial( { color: 0xFF6347 } );
const tetrahedron = new THREE.Mesh( geometry, material );
// 初始旋转成正立金字塔
tetrahedron.rotation.x = -Math.PI / 2;
scene.add( tetrahedron );

// Light
const light = new THREE.AmbientLight( 0xffffff );
scene.add( light );

// 沿X轴旋转动画
function animate() {
    requestAnimationFrame( animate );
  tetrahedron.rotation.x += 0.01;
    renderer.render( scene, camera );
}
animate();

内容的提问来源于stack exchange，提问作者ewakwwg12