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 ..

score 2 · Accepted Answer · answered Apr 22 '20 at 11:20

2

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.

answered Apr 22 '20 at 11:20

Mugen87

28,829
4
27
50

1

`clothFunction` is just an alias for `plane`. So this particular parametric curve represents a plane geometry. – Mugen87 Apr 22 '20 at 12:18
I'm using three v0.133.1 and it seems `ParametricBufferGeometry` has been either renamed or deprecated. I get a 404 error at https://threejs.org/docs/#api/en/geometries/ParametricGeometry – kimbaudi Oct 11 '21 at 17:04
3

`ParametricGeometry` has been removed from core and is now located in the examples at `examples/jsm/geometries/ParametricGeometry.js`. – Mugen87 Oct 11 '21 at 19:54

Youth overturn · Answer 2 · 2022-07-29T16:47:58.243

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("three@0.121.1/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
);

ParametricBufferGeometry in THREE.js

2 Answers2