pboyer · z3dev · Dec 8, 2024
diff --git a/examplesES/README.md b/examplesES/README.md
@@ -0,0 +1,12 @@
+# verb
+
+<strong>verb</strong> is a library for creating and manipulating NURBS surfaces and curves in many languages including JavaScript.
+
+These examples use the JavaScript import declaration to load Three.js, VERB and WebWorker modules (libraries).
+
+Each example is kept as simple as possible, creating surfaces, curves, etc.
+The examples include specific functions which convert from VERB geometry to Three.js geometry.
+And then the Three.js geometry is rendered.
+
+Please read through the examples if interested in specific VERB supplied functionality.
+
diff --git a/examplesES/curveClosestPoint.html b/examplesES/curveClosestPoint.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Curve Closest Point</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three/examples/jsm/",
+        "verb": "https://unpkg.com/[email protected]/build/js/verb.es.js",
+        "web-worker": "https://unpkg.com/[email protected]/browser.js"
+      }
+    }
+  </script>
+  <style>
+    body { margin: 0 }
+    #title { font-size: 40px; position: absolute; top: 20px; left: 20px; color: white; }
+  </style>
+</head>
+
+<body>
+  <div id="viewer">
+    <div id="title"></div>
+  </div>
+
+<script type="module" id="MODELING">
+
+import * as THREE from 'three'
+import * as VERB from 'verb'
+
+const scene = new THREE.Scene()
+const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
+
+camera.position.z = 5
+
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize( window.innerWidth, window.innerHeight )
+renderer.setAnimationLoop( animate )
+
+const vieweElement = document.getElementById("viewer");
+vieweElement.appendChild( renderer.domElement );
+
+const title = document.getElementById("title");
+title.innerHTML += document.title;
+
+let meshs = []
+
+function animate() {
+  if (meshs.length) {
+    meshs.forEach(( mesh ) => {
+      mesh.rotation.x += 0.001
+      mesh.rotation.y += 0.001
+    })
+  }
+
+  renderer.render( scene, camera )
+}
+
+const flatten = ( arr ) => arr.reduce(( acc, val ) => Array.isArray( val ) ? acc.concat( flatten( val ) ) : acc.concat( val ), [])
+
+function tessellateCurve( curve ) {
+  const points = curve.tessellate()
+
+  const coords = new Float32Array( flatten(points) )
+
+  const geometry = new THREE.BufferGeometry()
+
+  geometry.setAttribute( 'position', new THREE.BufferAttribute( coords, 3, false ) )
+
+  geometry.scale( 0.25, 0.25, 0.25 )
+
+  return geometry
+}
+
+function addCurveToScene(curve, material) {
+  material = material || new THREE.LineBasicMaterial( { linewidth: 2, color: 0xdcdcdc } )
+
+  const line = new THREE.Line( curve, material )
+
+  meshs.push( line )
+  scene.add( line )
+}
+
+// render the curve
+const pts = [
+  [ 0,  0, -5],
+  [10,  0,  0],
+  [10, 10, -5],
+  [ 0, 10,  5],
+  [ 5,  5,  0],
+]
+const interpCurve = VERB.default.geom.NurbsCurve.byPoints( pts, 3 )
+
+const interpCurve3 = tessellateCurve( interpCurve )
+
+addCurveToScene( interpCurve3 )
+
+// render lines between points in space and closest points on the curve
+const cpMaterial = new THREE.LineBasicMaterial( { linewidth: 1, color: 0x0000aa } )
+
+const orbitpts = []
+let w = 0
+for (let i = -10; i < 20; i += 4){
+    for (let j = -10; j < 20; j += 4){
+        for (let k = -10; k < 20; k += 4){
+            const p0 = [i, j, k ]
+
+            orbitpts.push( p0 )
+
+            const cp = interpCurve.closestPoint( p0 )
+
+            const cpLine = new VERB.default.geom.Line( cp, p0 )
+            addCurveToScene( tessellateCurve( cpLine ), cpMaterial )
+
+            w++
+        }
+    }
+}
+
+</script>
+
+</body>
+
+</html>
diff --git a/examplesES/surface.html b/examplesES/surface.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Surface</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three/examples/jsm/",
+        "verb": "https://unpkg.com/[email protected]/build/js/verb.es.js",
+        "web-worker": "https://unpkg.com/[email protected]/browser.js"
+      }
+    }
+  </script>
+  <style>
+    body { margin: 0 }
+    #title { font-size: 40px; position: absolute; top: 20px; left: 20px; color: white; }
+  </style>
+</head>
+
+<body>
+  <div id="viewer">
+    <div id="title"></div>
+  </div>
+
+<script type="module" id="MODELING">
+
+import * as THREE from 'three'
+import * as VERB from 'verb'
+
+const scene = new THREE.Scene()
+const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
+
+camera.position.z = 5
+
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize( window.innerWidth, window.innerHeight )
+renderer.setAnimationLoop( animate )
+
+const vieweElement = document.getElementById("viewer");
+vieweElement.appendChild( renderer.domElement );
+
+const title = document.getElementById("title");
+title.innerHTML += document.title;
+
+let meshs = []
+
+function animate() {
+  if (meshs.length) {
+    meshs.forEach(( mesh ) => {
+      mesh.rotation.x += 0.005
+      mesh.rotation.y += 0.005
+    })
+  }
+
+  renderer.render( scene, camera )
+}
+
+const flatten = ( arr ) => arr.reduce(( acc, val ) => Array.isArray( val ) ? acc.concat( flatten( val ) ) : acc.concat( val ), [])
+
+function tessellateSurface( surface ) {
+  const tess = surface.tessellate()
+
+  const coords = new Float32Array( flatten(tess.points) )
+  const indices = flatten( tess.faces )
+
+  const geometry = new THREE.BufferGeometry()
+
+  geometry.setIndex( indices )
+  geometry.setAttribute( 'position', new THREE.BufferAttribute( coords, 3, false ) )
+
+  //geometry.center()
+  geometry.scale( 0.1, 0.1, 0.1 )
+
+  return geometry
+}
+
+function addSurfaceToScene( surface, material, wireframe = true ) {
+  material = material || new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide, wireframe: false } )
+
+  let mesh = new THREE.Mesh( surface, material )
+  meshs.push( mesh )
+  scene.add( mesh )
+
+  if (wireframe) {
+    const material2 = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, wireframe: true } )
+    const mesh2 = new THREE.Mesh( surface, material2 )
+    meshs.push( mesh2 )
+    scene.add( mesh2 )
+  }
+}
+
+const degree = 3
+const knots = [0, 0, 0, 0, 0.333, 0.666, 1, 1, 1, 1]
+const pts = [
+  [ [0,   0, -10], [10,   0,  0], [20,   0,   0], [30,   0, 0] , [40,   0,   0], [50,   0,   0] ],
+  [ [0, -10,   0], [10, -10, 10], [20, -10,  10], [30, -10, 0] , [40, -10,   0], [50, -10,   0] ],
+  [ [0, -20,   0], [10, -20, 10], [20, -20,  10], [30, -20, 0] , [40, -20,  -2], [50, -20, -12] ],
+  [ [0, -30,   0], [10, -30,  0], [20, -30, -23], [30, -30, 0] , [40, -30,   0], [50, -30,   0] ],
+  [ [0, -40,   0], [10, -40,  0], [20, -40,   0], [30, -40, 4] , [40, -40, -20], [50, -40,   0] ],
+  [ [0, -50,  12], [10, -50,  0], [20, -50,  20], [30, -50, 0] , [50, -50, -10], [50, -50, -15] ],
+]
+
+const srf = VERB.default.geom.NurbsSurface.byKnotsControlPointsWeights( degree, degree, knots, knots, pts )
+
+const srf3 = tessellateSurface( srf )
+
+addSurfaceToScene( srf3 )
+
+</script>
+
+</body>
+
+</html>