ThreeJS - 拉伸参数几何

Question

有什么方法可以将 ExtrudeGeometry 与 ParametricGeometry 一起使用？
像这样：

function exampleGeometryF(u,v){
  var x = -(width/2) + width * u;
  var y = -(height/2) + height *v;
  var z = (Math.sin(u*Math.PI))* -20;
  return new THREE.Vector3(x,y,z);
}

let parametricGeometry = new THREE.ParametricGeometry(exampleGeometryF, 100, 100);
let extrudedGeometry = new THREE.ExtrudeGeometry(parametricGeometry, {amount:10, ...});

所以这个例子中的 parametricGeometry 描述了一个 plane like 几何。现在我想给这个几何图形一个深度。 欢迎使用解决方法！

Answer 1

特别是对于具有一定“深度”的平面几何体，您可以对盒子几何体进行变形：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(3);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var boxGeom = new THREE.BoxGeometry(2, 2, 3, 10, 10, 1);
boxGeom.vertices.forEach(v => {
  v.z += Math.cos(v.x * 2) * Math.sin(v.y * 2) * 0.125;
});

var deformed = new THREE.Mesh(boxGeom, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(deformed);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>