From 2ac1a6656f7c86020b53158306bcfdc02a2fdb58 Mon Sep 17 00:00:00 2001 From: z3dev Date: Sun, 8 Dec 2024 10:31:12 +0900 Subject: [PATCH 1/8] docs(verb): initial version of examples using standard import and UNPKG --- examplesES/README.md | 12 +++ examplesES/curveClosestPoint.html | 125 ++++++++++++++++++++++++++++++ examplesES/surface.html | 115 +++++++++++++++++++++++++++ 3 files changed, 252 insertions(+) create mode 100644 examplesES/README.md create mode 100644 examplesES/curveClosestPoint.html create mode 100644 examplesES/surface.html diff --git a/examplesES/README.md b/examplesES/README.md new file mode 100644 index 0000000..d28cce2 --- /dev/null +++ b/examplesES/README.md @@ -0,0 +1,12 @@ +# verb + +verb 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 new file mode 100644 index 0000000..e2df852 --- /dev/null +++ b/examplesES/curveClosestPoint.html @@ -0,0 +1,125 @@ + + + + + Curve Closest Point + + + + + +
+
+
+ + + + + + diff --git a/examplesES/surface.html b/examplesES/surface.html new file mode 100644 index 0000000..59d9689 --- /dev/null +++ b/examplesES/surface.html @@ -0,0 +1,115 @@ + + + + + Surface + + + + + +
+
+
+ + + + + + From 78a419451affaa62e789857cbcf7d22c9cbdcf6e Mon Sep 17 00:00:00 2001 From: z3dev Date: Sun, 9 Mar 2025 14:23:24 +0900 Subject: [PATCH 2/8] feat(verb): refactored code, added code viewer to examples --- examplesES/css/codemirror.css | 334 ++++++++++++++++++++++++++++++ examplesES/css/colorforth.css | 33 +++ examplesES/css/example.css | 49 +++++ examplesES/curveClosestPoint.html | 97 +++------ examplesES/js/codeViewer.js | 22 ++ examplesES/js/sceneThree.js | 61 ++++++ examplesES/js/tessellateThree.js | 37 ++++ examplesES/surface.html | 101 +++------ 8 files changed, 595 insertions(+), 139 deletions(-) create mode 100644 examplesES/css/codemirror.css create mode 100644 examplesES/css/colorforth.css create mode 100644 examplesES/css/example.css create mode 100644 examplesES/js/codeViewer.js create mode 100644 examplesES/js/sceneThree.js create mode 100644 examplesES/js/tessellateThree.js diff --git a/examplesES/css/codemirror.css b/examplesES/css/codemirror.css new file mode 100644 index 0000000..3543523 --- /dev/null +++ b/examplesES/css/codemirror.css @@ -0,0 +1,334 @@ +/* BASICS */ + +.CodeMirror { + /* Set height, width, borders, and global font properties here */ + font-family: monospace; + height: 300px; + color: black; +} + +/* PADDING */ + +.CodeMirror-lines { + padding: 4px 0; /* Vertical padding around content */ +} +.CodeMirror pre { + padding: 0 4px; /* Horizontal padding of content */ +} + +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + background-color: white; /* The little square between H and V scrollbars */ +} + +/* GUTTER */ + +.CodeMirror-gutters { + border-right: 1px solid #ddd; + background-color: #f7f7f7; + white-space: nowrap; +} +.CodeMirror-linenumbers {} +.CodeMirror-linenumber { + padding: 0 3px 0 5px; + min-width: 20px; + text-align: right; + color: #999; + white-space: nowrap; +} + +.CodeMirror-guttermarker { color: black; } +.CodeMirror-guttermarker-subtle { color: #999; } + +/* CURSOR */ + +.CodeMirror-cursor { + border-left: 1px solid black; + border-right: none; + width: 0; +} +/* Shown when moving in bi-directional text */ +.CodeMirror div.CodeMirror-secondarycursor { + border-left: 1px solid silver; +} +.cm-fat-cursor .CodeMirror-cursor { + width: auto; + border: 0; + background: #7e7; +} +.cm-fat-cursor div.CodeMirror-cursors { + z-index: 1; +} + +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background-color: #7e7; +} +@-moz-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@-webkit-keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} +@keyframes blink { + 0% {} + 50% { background-color: transparent; } + 100% {} +} + +/* Can style cursor different in overwrite (non-insert) mode */ +.CodeMirror-overwrite .CodeMirror-cursor {} + +.cm-tab { display: inline-block; text-decoration: inherit; } + +.CodeMirror-ruler { + border-left: 1px solid #ccc; + position: absolute; +} + +/* DEFAULT THEME */ + +.cm-s-default .cm-header {color: blue;} +.cm-s-default .cm-quote {color: #090;} +.cm-negative {color: #d44;} +.cm-positive {color: #292;} +.cm-header, .cm-strong {font-weight: bold;} +.cm-em {font-style: italic;} +.cm-link {text-decoration: underline;} +.cm-strikethrough {text-decoration: line-through;} + +.cm-s-default .cm-keyword {color: #708;} +.cm-s-default .cm-atom {color: #219;} +.cm-s-default .cm-number {color: #164;} +.cm-s-default .cm-def {color: #00f;} +.cm-s-default .cm-variable, +.cm-s-default .cm-punctuation, +.cm-s-default .cm-property, +.cm-s-default .cm-operator {} +.cm-s-default .cm-variable-2 {color: #05a;} +.cm-s-default .cm-variable-3 {color: #085;} +.cm-s-default .cm-comment {color: #a50;} +.cm-s-default .cm-string {color: #a11;} +.cm-s-default .cm-string-2 {color: #f50;} +.cm-s-default .cm-meta {color: #555;} +.cm-s-default .cm-qualifier {color: #555;} +.cm-s-default .cm-builtin {color: #30a;} +.cm-s-default .cm-bracket {color: #997;} +.cm-s-default .cm-tag {color: #170;} +.cm-s-default .cm-attribute {color: #00c;} +.cm-s-default .cm-hr {color: #999;} +.cm-s-default .cm-link {color: #00c;} + +.cm-s-default .cm-error {color: #f00;} +.cm-invalidchar {color: #f00;} + +.CodeMirror-composing { border-bottom: 2px solid; } + +/* Default styles for common addons */ + +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } +.CodeMirror-activeline-background {background: #e8f2ff;} + +/* STOP */ + +/* The rest of this file contains styles related to the mechanics of + the editor. You probably shouldn't touch them. */ + +.CodeMirror { + position: relative; + overflow: hidden; + background: white; +} + +.CodeMirror-scroll { + overflow: scroll !important; /* Things will break if this is overridden */ + /* 30px is the magic margin used to hide the element's real scrollbars */ + /* See overflow: hidden in .CodeMirror */ + margin-bottom: -30px; margin-right: -30px; + padding-bottom: 30px; + height: 100%; + outline: none; /* Prevent dragging from highlighting the element */ + position: relative; +} +.CodeMirror-sizer { + position: relative; + border-right: 30px solid transparent; +} + +/* The fake, visible scrollbars. Used to force redraw during scrolling + before actuall scrolling happens, thus preventing shaking and + flickering artifacts. */ +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { + position: absolute; + z-index: 6; + display: none; +} +.CodeMirror-vscrollbar { + right: 0; top: 0; + overflow-x: hidden; + overflow-y: scroll; +} +.CodeMirror-hscrollbar { + bottom: 0; left: 0; + overflow-y: hidden; + overflow-x: scroll; +} +.CodeMirror-scrollbar-filler { + right: 0; bottom: 0; +} +.CodeMirror-gutter-filler { + left: 0; bottom: 0; +} + +.CodeMirror-gutters { + position: absolute; left: 0; top: 0; + z-index: 3; +} +.CodeMirror-gutter { + white-space: normal; + height: 100%; + display: inline-block; + margin-bottom: -30px; + /* Hack to make IE7 behave */ + *zoom:1; + *display:inline; +} +.CodeMirror-gutter-wrapper { + position: absolute; + z-index: 4; + background: none !important; + border: none !important; +} +.CodeMirror-gutter-background { + position: absolute; + top: 0; bottom: 0; + z-index: 4; +} +.CodeMirror-gutter-elt { + position: absolute; + cursor: default; + z-index: 4; +} +.CodeMirror-gutter-wrapper { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.CodeMirror-lines { + cursor: text; + min-height: 1px; /* prevents collapsing before first draw */ +} +.CodeMirror pre { + /* Reset some styles that the rest of the page might have set */ + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; + border-width: 0; + background: transparent; + font-family: inherit; + font-size: inherit; + margin: 0; + white-space: pre; + word-wrap: normal; + line-height: inherit; + color: inherit; + z-index: 2; + position: relative; + overflow: visible; + -webkit-tap-highlight-color: transparent; +} +.CodeMirror-wrap pre { + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; +} + +.CodeMirror-linebackground { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + z-index: 0; +} + +.CodeMirror-linewidget { + position: relative; + z-index: 2; + overflow: auto; +} + +.CodeMirror-widget {} + +.CodeMirror-code { + outline: none; +} + +/* Force content-box sizing for the elements where we expect it */ +.CodeMirror-scroll, +.CodeMirror-sizer, +.CodeMirror-gutter, +.CodeMirror-gutters, +.CodeMirror-linenumber { + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.CodeMirror-measure { + position: absolute; + width: 100%; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.CodeMirror-cursor { position: absolute; } +.CodeMirror-measure pre { position: static; } + +div.CodeMirror-cursors { + visibility: hidden; + position: relative; + z-index: 3; +} +div.CodeMirror-dragcursors { + visibility: visible; +} + +.CodeMirror-focused div.CodeMirror-cursors { + visibility: visible; +} + +.CodeMirror-selected { background: #d9d9d9; } +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } +.CodeMirror-crosshair { cursor: crosshair; } +.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } +.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } + +.cm-searching { + background: #ffa; + background: rgba(255, 255, 0, .4); +} + +/* IE7 hack to prevent it from returning funny offsetTops on the spans */ +.CodeMirror span { *vertical-align: text-bottom; } + +/* Used to force a border model for a node */ +.cm-force-border { padding-right: .1px; } + +@media print { + /* Hide the cursor when printing */ + .CodeMirror div.CodeMirror-cursors { + visibility: hidden; + } +} + +/* See issue #2901 */ +.cm-tab-wrap-hack:after { content: ''; } + +/* Help users use markselection to safely style text background */ +span.CodeMirror-selectedtext { background: none; } diff --git a/examplesES/css/colorforth.css b/examplesES/css/colorforth.css new file mode 100644 index 0000000..696777d --- /dev/null +++ b/examplesES/css/colorforth.css @@ -0,0 +1,33 @@ +.cm-s-colorforth.CodeMirror { background: none; color: #f8f8f8; } +.cm-s-colorforth .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; } +.cm-s-colorforth .CodeMirror-guttermarker { color: #FFBD40; } +.cm-s-colorforth .CodeMirror-guttermarker-subtle { color: #78846f; } +.cm-s-colorforth .CodeMirror-linenumber { color: #bababa; } +.cm-s-colorforth .CodeMirror-cursor { border-left: 1px solid white; } + +.cm-s-colorforth span.cm-comment { color: #ededed; } +.cm-s-colorforth span.cm-def { color: #ff1c1c; font-weight:bold; } +.cm-s-colorforth span.cm-keyword { color: #ffd900; } +.cm-s-colorforth span.cm-builtin { color: #00d95a; } +.cm-s-colorforth span.cm-variable { color: #73ff00; } +.cm-s-colorforth span.cm-string { color: #007bff; } +.cm-s-colorforth span.cm-number { color: #00c4ff; } +.cm-s-colorforth span.cm-atom { color: #606060; } + +.cm-s-colorforth span.cm-variable-2 { color: #EEE; } +.cm-s-colorforth span.cm-variable-3 { color: #DDD; } +.cm-s-colorforth span.cm-property {} +.cm-s-colorforth span.cm-operator {} + +.cm-s-colorforth span.cm-meta { color: yellow; } +.cm-s-colorforth span.cm-qualifier { color: #FFF700; } +.cm-s-colorforth span.cm-bracket { color: #cc7; } +.cm-s-colorforth span.cm-tag { color: #FFBD40; } +.cm-s-colorforth span.cm-attribute { color: #FFF700; } +.cm-s-colorforth span.cm-error { color: #f00; } + +.cm-s-colorforth div.CodeMirror-selected { background: #333d53; } + +.cm-s-colorforth span.cm-compilation { background: rgba(255, 255, 255, 0.12); } + +.cm-s-colorforth .CodeMirror-activeline-background { background: #253540; } diff --git a/examplesES/css/example.css b/examplesES/css/example.css new file mode 100644 index 0000000..e7ce866 --- /dev/null +++ b/examplesES/css/example.css @@ -0,0 +1,49 @@ +body { + margin: 0; + font-family: 'Source Sans Pro', sans-serif; + color: white; +} + +.row, .col { overflow: hidden; position: absolute; } +.row { left: 0; right: 0; } +.col { top: 0; bottom: 0; } +.scroll-x { overflow-x: auto; } +.scroll-y { overflow-y: auto; } + +#viewer { + left: 0; + right: 0; +} + +#button { + font-size: 15px; + color: white; + position: absolute; + background: green; + bottom: 20px; + padding: 10px; + left: 20px; + z-index: 2; +} + +#button:hover{ + background: grey; +} + +#title { + font-size: 40px; + position: absolute; + top: 20px; + left: 20px; + text-shadow: 0px 2px black; +} + +#code-container { + padding: 20px; + background: rgba(0,0,0,0.75); + top: 80px; + position: absolute; + resize: none; + font-size: 14px; + display: none; +} diff --git a/examplesES/curveClosestPoint.html b/examplesES/curveClosestPoint.html index e2df852..d036ee1 100644 --- a/examplesES/curveClosestPoint.html +++ b/examplesES/curveClosestPoint.html @@ -3,20 +3,25 @@ Curve Closest Point + - + + + + + @@ -24,63 +29,13 @@
- + +
Show/Hide Code
+
+ + diff --git a/examplesES/js/codeViewer.js b/examplesES/js/codeViewer.js new file mode 100644 index 0000000..3bfa388 --- /dev/null +++ b/examplesES/js/codeViewer.js @@ -0,0 +1,22 @@ + +export function setupViewer() { + // create elements for the viewer + var codecontainer = document.getElementById("code-container") + codecontainer.innerHTML += '' + + // add the contents of the script to the viewer + var code = document.getElementById("code") + code.innerHTML = document.getElementById("script").innerHTML + + var button = document.getElementById("button") + var isHidden = true + button.addEventListener("click", function(){ + if (isHidden){ + codecontainer.style.display='block' + isHidden = false + } else { + codecontainer.style.display='none' + isHidden = true + } + }) +} diff --git a/examplesES/js/sceneThree.js b/examplesES/js/sceneThree.js new file mode 100644 index 0000000..a01c7ba --- /dev/null +++ b/examplesES/js/sceneThree.js @@ -0,0 +1,61 @@ +import * as THREE from 'three' + +export class Scene { + constructor () { + this.scene = new THREE.Scene() + + this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) + this.camera.position.z = 5 + + this.renderer = new THREE.WebGLRenderer() + this.renderer.setSize( window.innerWidth, window.innerHeight ) + + this.meshs = [] + + const viewerElement = document.getElementById("viewer"); + viewerElement.appendChild( this.renderer.domElement ); + + const titleElement = document.getElementById("title"); + titleElement.innerHTML += document.title; + } + + animate() { + return f => { + if (this.meshs.length) { + this.meshs.forEach(( mesh ) => { + mesh.rotation.x += 0.005 + mesh.rotation.y += 0.005 + }) + } + this.renderer.render( this.scene, this.camera ) + } + } + + render() { + this.renderer.setAnimationLoop( this.animate() ) + } + + addSurface( surface, material, wireframe = true ) { + material = material || new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide, wireframe: false } ) + + let mesh = new THREE.Mesh( surface, material ) + this.meshs.push( mesh ) + this.scene.add( mesh ) + + if (wireframe) { + const material2 = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, wireframe: true } ) + const mesh2 = new THREE.Mesh( surface, material2 ) + this.meshs.push( mesh2 ) + this.scene.add( mesh2 ) + } + } + + addCurve(curve, material) { + material = material || new THREE.LineBasicMaterial( { linewidth: 2, color: 0xdcdcdc } ) + + const line = new THREE.Line( curve, material ) + + this.meshs.push( line ) + this.scene.add( line ) + } +} diff --git a/examplesES/js/tessellateThree.js b/examplesES/js/tessellateThree.js new file mode 100644 index 0000000..310baff --- /dev/null +++ b/examplesES/js/tessellateThree.js @@ -0,0 +1,37 @@ +import * as THREE from 'three' + +const flatten = ( arr ) => arr.reduce(( acc, val ) => Array.isArray( val ) ? acc.concat( flatten( val ) ) : acc.concat( val ), []) + +export 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 +} + +export 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 +} + + diff --git a/examplesES/surface.html b/examplesES/surface.html index 59d9689..c2ecf15 100644 --- a/examplesES/surface.html +++ b/examplesES/surface.html @@ -3,20 +3,25 @@ Surface + - + + + + + @@ -24,72 +29,12 @@
- + +
Show/Hide Code
+
-const srf3 = tessellateSurface( srf ) + From 2234045753dbdc83ccc9d90a74a2973b16e9004f Mon Sep 17 00:00:00 2001 From: z3dev Date: Sun, 23 Mar 2025 17:36:48 +0900 Subject: [PATCH 3/8] fix(verb): added orbit controls to Scene, and fixes for tessellate --- examplesES/js/sceneThree.js | 47 ++++++++++++++++++-------------- examplesES/js/tessellateThree.js | 7 ++--- 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/examplesES/js/sceneThree.js b/examplesES/js/sceneThree.js index a01c7ba..afc0971 100644 --- a/examplesES/js/sceneThree.js +++ b/examplesES/js/sceneThree.js @@ -1,32 +1,34 @@ import * as THREE from 'three' +import { OrbitControls } from 'three/addons/controls/OrbitControls.js' + +const flatten = ( arr ) => arr.reduce(( acc, val ) => Array.isArray( val ) ? acc.concat( flatten( val ) ) : acc.concat( val ), []) export class Scene { constructor () { this.scene = new THREE.Scene() this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) - this.camera.position.z = 5 + this.camera.position.set( 0, 0, 5 ) this.renderer = new THREE.WebGLRenderer() this.renderer.setSize( window.innerWidth, window.innerHeight ) + this.controls = new OrbitControls( this.camera, this.renderer.domElement ) + this.meshs = [] - const viewerElement = document.getElementById("viewer"); - viewerElement.appendChild( this.renderer.domElement ); + const viewerElement = document.getElementById("viewer") + viewerElement.appendChild( this.renderer.domElement ) + + const titleElement = document.getElementById("title") + titleElement.innerHTML += document.title - const titleElement = document.getElementById("title"); - titleElement.innerHTML += document.title; + this.controls.update() } animate() { return f => { - if (this.meshs.length) { - this.meshs.forEach(( mesh ) => { - mesh.rotation.x += 0.005 - mesh.rotation.y += 0.005 - }) - } + this.controls.update() this.renderer.render( this.scene, this.camera ) } } @@ -35,19 +37,12 @@ export class Scene { this.renderer.setAnimationLoop( this.animate() ) } - addSurface( surface, material, wireframe = true ) { - material = material || new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide, wireframe: false } ) + addSurface( surface, material, wireframe = false ) { + material = material || new THREE.MeshNormalMaterial( { side: THREE.DoubleSide, wireframe, transparent: true, opacity: 0.4 } ) let mesh = new THREE.Mesh( surface, material ) this.meshs.push( mesh ) this.scene.add( mesh ) - - if (wireframe) { - const material2 = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide, wireframe: true } ) - const mesh2 = new THREE.Mesh( surface, material2 ) - this.meshs.push( mesh2 ) - this.scene.add( mesh2 ) - } } addCurve(curve, material) { @@ -58,4 +53,16 @@ export class Scene { this.meshs.push( line ) this.scene.add( line ) } + + addPoints(points) { + const geometry = new THREE.BufferGeometry() + const positions = new Float32Array(flatten(points)) + geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3, false)) + + const material = new THREE.PointsMaterial({ size: 0.1, color: 0xffffff }) + + const cloud = new THREE.Points(geometry, material) + + this.scene.add(cloud) + } } diff --git a/examplesES/js/tessellateThree.js b/examplesES/js/tessellateThree.js index 310baff..ceea67f 100644 --- a/examplesES/js/tessellateThree.js +++ b/examplesES/js/tessellateThree.js @@ -13,9 +13,8 @@ export function tessellateSurface( surface ) { geometry.setIndex( indices ) geometry.setAttribute( 'position', new THREE.BufferAttribute( coords, 3, false ) ) - - //geometry.center() - geometry.scale( 0.1, 0.1, 0.1 ) + geometry.computeVertexNormals() + geometry.normalizeNormals() return geometry } @@ -29,8 +28,6 @@ export function tessellateCurve( curve ) { geometry.setAttribute( 'position', new THREE.BufferAttribute( coords, 3, false ) ) - geometry.scale( 0.25, 0.25, 0.25 ) - return geometry } From 192f2f39a3b81f47741984a9302cf0efd5000afe Mon Sep 17 00:00:00 2001 From: z3dev Date: Sun, 23 Mar 2025 17:38:34 +0900 Subject: [PATCH 4/8] feat(verb): working versions of surface examples using ES modules --- examplesES/README.md | 4 + examplesES/conics.html | 68 +++++++++++++ examplesES/curveClosestPoint.html | 4 +- examplesES/meshIntersection.html | 107 ++++++++++++++++++++ examplesES/surface.html | 2 + examplesES/surfaceAdaptiveTessellation.html | 72 +++++++++++++ examplesES/surfaceBoundaries.html | 76 ++++++++++++++ examplesES/surfaceClosestPoint.html | 92 +++++++++++++++++ examplesES/surfaceIntersection.html | 103 +++++++++++++++++++ examplesES/surfaceIsocurves.html | 79 +++++++++++++++ examplesES/surfaceSplit.html | 74 ++++++++++++++ examplesES/sweptSurface.html | 64 ++++++++++++ 12 files changed, 744 insertions(+), 1 deletion(-) create mode 100644 examplesES/conics.html create mode 100644 examplesES/meshIntersection.html create mode 100644 examplesES/surfaceAdaptiveTessellation.html create mode 100644 examplesES/surfaceBoundaries.html create mode 100644 examplesES/surfaceClosestPoint.html create mode 100644 examplesES/surfaceIntersection.html create mode 100644 examplesES/surfaceIsocurves.html create mode 100644 examplesES/surfaceSplit.html create mode 100644 examplesES/sweptSurface.html diff --git a/examplesES/README.md b/examplesES/README.md index d28cce2..435b0ae 100644 --- a/examplesES/README.md +++ b/examplesES/README.md @@ -10,3 +10,7 @@ And then the Three.js geometry is rendered. Please read through the examples if interested in specific VERB supplied functionality. +``` +npx http-server +``` + diff --git a/examplesES/conics.html b/examplesES/conics.html new file mode 100644 index 0000000..66ff83b --- /dev/null +++ b/examplesES/conics.html @@ -0,0 +1,68 @@ + + + + + Conics + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/curveClosestPoint.html b/examplesES/curveClosestPoint.html index d036ee1..78e9c6a 100644 --- a/examplesES/curveClosestPoint.html +++ b/examplesES/curveClosestPoint.html @@ -57,7 +57,7 @@ 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 ] + const p0 = [i, j, k] orbitpts.push( p0 ) @@ -71,6 +71,8 @@ } } +scene.addPoints(orbitpts) + scene.render() diff --git a/examplesES/meshIntersection.html b/examplesES/meshIntersection.html new file mode 100644 index 0000000..c09072e --- /dev/null +++ b/examplesES/meshIntersection.html @@ -0,0 +1,107 @@ + + + + + Mesh-Mesh Intersection + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/surface.html b/examplesES/surface.html index c2ecf15..190756e 100644 --- a/examplesES/surface.html +++ b/examplesES/surface.html @@ -4,6 +4,8 @@ Surface + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/surfaceBoundaries.html b/examplesES/surfaceBoundaries.html new file mode 100644 index 0000000..58ea793 --- /dev/null +++ b/examplesES/surfaceBoundaries.html @@ -0,0 +1,76 @@ + + + + + Surface Boundary Curves + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/surfaceClosestPoint.html b/examplesES/surfaceClosestPoint.html new file mode 100644 index 0000000..df8138b --- /dev/null +++ b/examplesES/surfaceClosestPoint.html @@ -0,0 +1,92 @@ + + + + + Closest Point to a Surface + + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/surfaceIntersection.html b/examplesES/surfaceIntersection.html new file mode 100644 index 0000000..9fa79ab --- /dev/null +++ b/examplesES/surfaceIntersection.html @@ -0,0 +1,103 @@ + + + + + Surface-Surface Intersection + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/surfaceIsocurves.html b/examplesES/surfaceIsocurves.html new file mode 100644 index 0000000..90ee732 --- /dev/null +++ b/examplesES/surfaceIsocurves.html @@ -0,0 +1,79 @@ + + + + + Surface Isocurve Extraction + + + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + diff --git a/examplesES/surfaceSplit.html b/examplesES/surfaceSplit.html new file mode 100644 index 0000000..2a0d18c --- /dev/null +++ b/examplesES/surfaceSplit.html @@ -0,0 +1,74 @@ + + + + + Splitting a Surface + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + diff --git a/examplesES/sweptSurface.html b/examplesES/sweptSurface.html new file mode 100644 index 0000000..d32a4e9 --- /dev/null +++ b/examplesES/sweptSurface.html @@ -0,0 +1,64 @@ + + + + + Swept Surface + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + From 90125be5fd58ccaa7dd53f45d18a6597b7937d4b Mon Sep 17 00:00:00 2001 From: z3dev Date: Sat, 29 Mar 2025 11:22:42 +0900 Subject: [PATCH 5/8] fix(verb) : switch to jsdelivr in order to eliminate CORS errors --- examplesES/conics.html | 14 ++++++++------ examplesES/curveClosestPoint.html | 14 ++++++++------ examplesES/meshIntersection.html | 18 ++++++++++-------- examplesES/surface.html | 14 +++++++------- examplesES/surfaceAdaptiveTessellation.html | 14 +++++++------- examplesES/surfaceBoundaries.html | 14 +++++++------- examplesES/surfaceClosestPoint.html | 14 +++++++------- examplesES/surfaceIntersection.html | 14 +++++++------- examplesES/surfaceIsocurves.html | 14 +++++++------- examplesES/surfaceSplit.html | 14 +++++++------- examplesES/sweptSurface.html | 14 +++++++------- 11 files changed, 82 insertions(+), 76 deletions(-) diff --git a/examplesES/conics.html b/examplesES/conics.html index 66ff83b..6ce42c3 100644 --- a/examplesES/conics.html +++ b/examplesES/conics.html @@ -4,13 +4,15 @@ Conics + + - - + + diff --git a/examplesES/curveClosestPoint.html b/examplesES/curveClosestPoint.html index 78e9c6a..2ef050b 100644 --- a/examplesES/curveClosestPoint.html +++ b/examplesES/curveClosestPoint.html @@ -4,13 +4,15 @@ Curve Closest Point + + - - + + diff --git a/examplesES/meshIntersection.html b/examplesES/meshIntersection.html index c09072e..3ec533c 100644 --- a/examplesES/meshIntersection.html +++ b/examplesES/meshIntersection.html @@ -2,15 +2,17 @@ - Mesh-Mesh Intersection + Mesh-Mesh Intersection - + + - - + + diff --git a/examplesES/surface.html b/examplesES/surface.html index 190756e..bfc8306 100644 --- a/examplesES/surface.html +++ b/examplesES/surface.html @@ -4,15 +4,15 @@ Surface - + - - + + diff --git a/examplesES/surfaceAdaptiveTessellation.html b/examplesES/surfaceAdaptiveTessellation.html index 6878a76..b842fe2 100644 --- a/examplesES/surfaceAdaptiveTessellation.html +++ b/examplesES/surfaceAdaptiveTessellation.html @@ -4,15 +4,15 @@ Adaptive Surface Tessellation - + - - + + diff --git a/examplesES/surfaceBoundaries.html b/examplesES/surfaceBoundaries.html index 58ea793..0fde77c 100644 --- a/examplesES/surfaceBoundaries.html +++ b/examplesES/surfaceBoundaries.html @@ -4,15 +4,15 @@ Surface Boundary Curves - + - - + + diff --git a/examplesES/surfaceClosestPoint.html b/examplesES/surfaceClosestPoint.html index df8138b..b342e21 100644 --- a/examplesES/surfaceClosestPoint.html +++ b/examplesES/surfaceClosestPoint.html @@ -4,15 +4,15 @@ Closest Point to a Surface - + - - + + diff --git a/examplesES/surfaceIntersection.html b/examplesES/surfaceIntersection.html index 9fa79ab..dedd4cc 100644 --- a/examplesES/surfaceIntersection.html +++ b/examplesES/surfaceIntersection.html @@ -4,15 +4,15 @@ Surface-Surface Intersection - + - - + + diff --git a/examplesES/surfaceIsocurves.html b/examplesES/surfaceIsocurves.html index 90ee732..07262ba 100644 --- a/examplesES/surfaceIsocurves.html +++ b/examplesES/surfaceIsocurves.html @@ -4,15 +4,15 @@ Surface Isocurve Extraction - + - - + + diff --git a/examplesES/surfaceSplit.html b/examplesES/surfaceSplit.html index 2a0d18c..748e6f6 100644 --- a/examplesES/surfaceSplit.html +++ b/examplesES/surfaceSplit.html @@ -4,15 +4,15 @@ Splitting a Surface - + - - + + diff --git a/examplesES/sweptSurface.html b/examplesES/sweptSurface.html index d32a4e9..a3702c0 100644 --- a/examplesES/sweptSurface.html +++ b/examplesES/sweptSurface.html @@ -4,15 +4,15 @@ Swept Surface - + - - + + From 5f065e47676a65a8dab50db7e9171a181ddb5e9a Mon Sep 17 00:00:00 2001 From: z3dev Date: Sat, 29 Mar 2025 17:34:45 +0900 Subject: [PATCH 6/8] style(verb): changes to make style consistant --- examplesES/conics.html | 11 ++++----- examplesES/meshIntersection.html | 23 +++++++++--------- examplesES/surfaceAdaptiveTessellation.html | 12 +++++----- examplesES/surfaceBoundaries.html | 14 +++++------ examplesES/surfaceClosestPoint.html | 22 ++++++++--------- examplesES/surfaceIntersection.html | 26 ++++++++++----------- examplesES/surfaceIsocurves.html | 17 +++++++------- examplesES/surfaceSplit.html | 12 +++++----- examplesES/sweptSurface.html | 4 ++-- 9 files changed, 70 insertions(+), 71 deletions(-) diff --git a/examplesES/conics.html b/examplesES/conics.html index 6ce42c3..f6cbf44 100644 --- a/examplesES/conics.html +++ b/examplesES/conics.html @@ -32,18 +32,17 @@ + + diff --git a/examplesES/surfaceSplit.html b/examplesES/surfaceSplit.html index 748e6f6..a166e09 100644 --- a/examplesES/surfaceSplit.html +++ b/examplesES/surfaceSplit.html @@ -41,12 +41,12 @@ 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] ] + [ [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.geom.NurbsSurface.byKnotsControlPointsWeights( degree, degree, knots, knots, pts ) diff --git a/examplesES/sweptSurface.html b/examplesES/sweptSurface.html index a3702c0..e79fc67 100644 --- a/examplesES/sweptSurface.html +++ b/examplesES/sweptSurface.html @@ -38,8 +38,8 @@ const scene = new Scene() -const rail = new verb.geom.BezierCurve( [[0,0,0], [10,5,10], [20,10,10]] ) -const prof = new verb.geom.BezierCurve( [[0,0,0], [10,10,0], [20,0,0]] ) +const rail = new verb.geom.BezierCurve( [ [0, 0, 0], [10, 5, 10], [20,10,10] ] ) +const prof = new verb.geom.BezierCurve( [ [0, 0, 0], [10, 10, 0], [20, 0, 0] ] ) const srf = new verb.geom.SweptSurface( prof, rail ) From eb267ea1ef6ebff5b5384df9f24dd4344e32d368 Mon Sep 17 00:00:00 2001 From: z3dev Date: Sat, 29 Mar 2025 17:35:30 +0900 Subject: [PATCH 7/8] feature(verb): completed remaining ES examples --- examplesES/curveByPointInterpolation.html | 70 +++++++++++++++++ examplesES/curveDivide.html | 72 +++++++++++++++++ examplesES/curveIntersection.html | 83 ++++++++++++++++++++ examplesES/curveReverse.html | 67 ++++++++++++++++ examplesES/curveSplit.html | 75 ++++++++++++++++++ examplesES/cylindricalSurface.html | 70 +++++++++++++++++ examplesES/extrudedSurface.html | 64 +++++++++++++++ examplesES/loftedSurface.html | 69 ++++++++++++++++ examplesES/meshSlicing.html | 96 +++++++++++++++++++++++ examplesES/revolvedSurface.html | 64 +++++++++++++++ 10 files changed, 730 insertions(+) create mode 100644 examplesES/curveByPointInterpolation.html create mode 100644 examplesES/curveDivide.html create mode 100644 examplesES/curveIntersection.html create mode 100644 examplesES/curveReverse.html create mode 100644 examplesES/curveSplit.html create mode 100644 examplesES/cylindricalSurface.html create mode 100644 examplesES/extrudedSurface.html create mode 100644 examplesES/loftedSurface.html create mode 100644 examplesES/meshSlicing.html create mode 100644 examplesES/revolvedSurface.html diff --git a/examplesES/curveByPointInterpolation.html b/examplesES/curveByPointInterpolation.html new file mode 100644 index 0000000..f88e20a --- /dev/null +++ b/examplesES/curveByPointInterpolation.html @@ -0,0 +1,70 @@ + + + + + Curve by Point Interpolation + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/curveDivide.html b/examplesES/curveDivide.html new file mode 100644 index 0000000..b185d5c --- /dev/null +++ b/examplesES/curveDivide.html @@ -0,0 +1,72 @@ + + + + + Divide A Curve By Equal Arc Length + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/curveIntersection.html b/examplesES/curveIntersection.html new file mode 100644 index 0000000..8c46762 --- /dev/null +++ b/examplesES/curveIntersection.html @@ -0,0 +1,83 @@ + + + + + Curve-Curve Intersection + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/curveReverse.html b/examplesES/curveReverse.html new file mode 100644 index 0000000..da8cfed --- /dev/null +++ b/examplesES/curveReverse.html @@ -0,0 +1,67 @@ + + + + + Curve Reversal + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/curveSplit.html b/examplesES/curveSplit.html new file mode 100644 index 0000000..0d8cb0c --- /dev/null +++ b/examplesES/curveSplit.html @@ -0,0 +1,75 @@ + + + + + Splitting a Curve + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/cylindricalSurface.html b/examplesES/cylindricalSurface.html new file mode 100644 index 0000000..9c3e6fb --- /dev/null +++ b/examplesES/cylindricalSurface.html @@ -0,0 +1,70 @@ + + + + + Cylindrical Surface + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + + + + diff --git a/examplesES/extrudedSurface.html b/examplesES/extrudedSurface.html new file mode 100644 index 0000000..c59e23b --- /dev/null +++ b/examplesES/extrudedSurface.html @@ -0,0 +1,64 @@ + + + + + Extruded Surface + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/loftedSurface.html b/examplesES/loftedSurface.html new file mode 100644 index 0000000..c1ed35c --- /dev/null +++ b/examplesES/loftedSurface.html @@ -0,0 +1,69 @@ + + + + + Surface Lofting + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/meshSlicing.html b/examplesES/meshSlicing.html new file mode 100644 index 0000000..6159eee --- /dev/null +++ b/examplesES/meshSlicing.html @@ -0,0 +1,96 @@ + + + + + Mesh Slicing + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + diff --git a/examplesES/revolvedSurface.html b/examplesES/revolvedSurface.html new file mode 100644 index 0000000..6082ade --- /dev/null +++ b/examplesES/revolvedSurface.html @@ -0,0 +1,64 @@ + + + + + Revolved Surface + + + + + + + + + + + + +
+
+
+ + + +
Show/Hide Code
+
+ + + + + + From 045304f7652a63927911ff81423b7da3f119845d Mon Sep 17 00:00:00 2001 From: z3dev Date: Sat, 29 Mar 2025 17:47:15 +0900 Subject: [PATCH 8/8] docs(verb): added additional information to README --- examplesES/README.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/examplesES/README.md b/examplesES/README.md index 435b0ae..076ee70 100644 --- a/examplesES/README.md +++ b/examplesES/README.md @@ -2,15 +2,25 @@ verb 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). +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. + +The examples include specific functions which convert from VERB geometry to Three.js geometry, +and then render the Three.js geometry. + +See the 'js' folder. Please read through the examples if interested in specific VERB supplied functionality. +Because of CORS, these examples must be provided by a webserver. If you open one of the HTML files and see "Cross-Origin Request Blocked" then you will understand. + +The easiest HTTP server is provided by NPM. + ``` +cd examplesES npx http-server ``` +And follow the instructions to open one of the HTML pages. +