使用PlaneGeometry - Three.js创建具有弯曲边的平面

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(5, 5, 32, 32);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });

const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

geometry.vertices.forEach((vertex) => {
  const distance = vertex.distanceTo(new THREE.Vector3(0, 0, 0));
  const height = Math.sin(distance) * 0.5;
  vertex.z = height;
});
geometry.verticesNeedUpdate = true;

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);

function animate() {
  requestAnimationFrame(animate);
  // 添加动画效果的代码
  renderer.render(scene, camera);
}
animate();