基于Three.js实现自定义波形板房屋结构的技术咨询（附代码）

嘿，已经在Three.js里折腾波形板房屋结构啦？我把你给出的代码整理得更清晰，还补充了关键细节帮你把波形墙体做出来，直接看下面的示例就行：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 5);

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加入门级的灯光，让结构看得更清楚
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

// 核心：创建带足够分段数的BoxGeometry，分段少的话波形会很生硬
const boxGeo = new THREE.BoxGeometry(4, 3, 2, 20, 1, 1); // X轴设20个分段，方便做横向波形
const vertices = boxGeo.attributes.position.array;

// 遍历顶点生成波形效果
const frequency = 2; // 数值越大，波形的褶皱越多
const amplitude = 0.2; // 数值越大，波形起伏越明显
for (let i = 0; i < vertices.length; i += 3) {
    // 只修改前后两面的顶点（对应BoxGeometry的Z轴两端）
    if (Math.abs(vertices[i + 2]) > 0.9) {
        vertices[i + 1] = Math.sin(vertices[i] * frequency) * amplitude;
    }
}

// 必须更新这些属性，不然Three.js不会识别顶点的修改
boxGeo.attributes.position.needsUpdate = true;
boxGeo.computeVertexNormals();

// 用PBR材质让质感更真实一点
const material = new THREE.MeshStandardMaterial({ color: 0x88ccee });
const waveHouse = new THREE.Mesh(boxGeo, material);
scene.add(waveHouse);

// 加个旋转动画，方便多角度查看效果
function animate() {
    requestAnimationFrame(animate);
    waveHouse.rotation.y += 0.005;
    renderer.render(scene, camera);
}
animate();

• 如果想要屋顶也做成波形，只需要修改顶部面（Y坐标接近最大值的顶点）的Z或X坐标就行
• 要是觉得波形不够自然，可以试试把正弦函数换成余弦，或者叠加多个三角函数
• 如果需要不同面有不同的波形，只要调整顶点的判断条件（比如针对X轴两端的面修改Z坐标）

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