ParametricBufferGeometry in THREE.js

Question

In cloth simulation example code there is something called ParametricBufferGeometry which takes 3 parameters What does that function actually mean ?

clothGeometry = new THREE.ParametricBufferGeometry(clothFunction, cloth.w, cloth.h);

In the docs I couldn't find any proper documentation for it It says

ParametricBufferGeometry(func : Function, slices : Integer, stacks : Integer) func — A function that takes in a u and v value each between 0 and 1 and modifies a third Vector3 argument slices — The count of slices to use for the parametric function stacks — The count of stacks to use for the parametric function

Could anyone explain me what it is actually ..

Answer 1

Could anyone explain me what it is actually

The documentation states that func is a parametric function that gets as input two values (u, v) in the range of [0,1] and outputs the result into the target vector.

The idea is that you can generate an entire geometric surface by calling the function with gradually varying parameters. The more often you call the function, the higher the sampling rate and thus the more detailed the geometry. ParametricGeometry is responsible for controlling this process according to the slices and stacks parameters.

I suggest you google the term parametric surfaces if you want to learn more about this topic. The related literature is quite extensive.

Answer 2

What you tested is an Observable notebook address I'm also studying it. After some test I solved it in my local dev environment as following("three": "^0.142.0",):

async function _THREE(require) {
  // window variable called by modules in three/examples/js/
  const THREE = window.THREE = await 
  require("[email protected]/build/three.min.js");
  await require('three/examples/js/controls/OrbitControls.js')
  await require("three/examples/js/geometries/ParametricGeometry.js")
  return THREE;
}
// cloth geometry
clothGeometry = new THREE.ParametricGeometry(
  clothFunction,
  cloth.w,
  cloth.h
);