Creating a NURBS surface in Three.js using an NxN grid of control points

Yesterday, I attempted to plot a 3D Math function [ F(x,y) ] by calculating various points (x, y, z) in space and representing them as white points.

Here is an example: https://i.sstatic.net/4kM4x.png

Inital Issue: When I adjusted the scenario using Orbital Control, the performance was unsatisfactory. After exploring options, I realized that NURBS surfaces might provide a solution. However, I encountered difficulty defining a larger number of Control Points. My intention was to create a NURBS surface with 50 x 50 control points, similar to the image shown, but I could only achieve a 3 x 4 point NURB surface. Below is the code snippet:

 [...]

Outcome:

https://i.sstatic.net/3BPft.png

The Query: Is there a method to instruct a NURBS Surface to use a 50x50 array/matrix of vectors for plotting?

Additional Concern: How can points be handled where the function is undefined?

Query: Is it possible to create a plane based on a Math function?

javascriptthree.jsnurbs

Answer №1

A step beyond the concept of THREE, verburbs is a freely available software tool designed for manipulating NURB surfaces. Take a look at this image captured from a sample within the toolkit that illustrates the topic at hand. Please note that I am not associated with the development of this software. https://i.sstatic.net/IWlKQ.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the URL of the parent window from a modal dialog using JavaScript

What is the proper syntax for obtaining the URL (specifically, the PATH) of the parent window from a modal dialog box in Internet Explorer. I have attempted several variations such as: window.opener.document.location window.opener.location this.opener.do ...

javascriptasp.nethtml

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

javascripthtmlvue.jsvue-component

What is preventing Node.js from executing my JavaScript code in the terminal?

https://i.sstatic.net/JJmg2.jpg I need help understanding why my JavaScript code isn't working properly. Can someone explain the Uncaught SyntaxError: Unexpected Identifier error message? ...

javascriptnode.jsvisual-studio-code

Modify the style of a div using my JavaScript code

Looking for assistance in updating my code to meet my requirements. Here is what I am looking for: You can find my full code here: http://jsfiddle.net/2urmku1h/ Specifically, I need to make a change to this section: <div style="display:none;">Chan ...

javascriptjqueryhtmlcssiframe

Using an HTML file as the source for an image in the <img src=""> tag is a simple process that can greatly enhance the visual appeal of your webpage

My goal is to utilize an html file as the source for an image file within the <img src=""> tag in order to prevent mixed-content warnings when using an http image over https. For instance: index.html: <img src="./image.html" > image.htm ...

javascriptjqueryhtmlhttpsmixed-content

What is the proper method for implementing an event listener exclusively for a left mouse click?

Is there a way to make Phaser recognize only left mouse clicks as click events, excluding right and middle clicks? Check out this Phaser example at the following link: https://phaser.io/examples/v2/basics/02-click-on-an-image. ...

javascripttypescripthtml5-canvasphaser-framework

Updating Vue 3 asynchronous data doesn't reflect changes when the local settings are modified

I have a dedicated external .js file designed to retrieve data from the backend depending on the website's locale. Check out the code snippet below: import { ref } from "vue"; export function fetchData(section, key) { // Making a GET requ ...

javascriptvue.jsfetch

managing the HTML class names and IDs for various functions such as styling, jQuery interactions, and Selenium automation

While there is an abundance of articles on writing clean HTML/CSS, one aspect that seems to be lacking advice is how to organize class names and IDs for different purposes such as design, jQuery, and Selenium testing. The challenge lies in deciphering the ...

javascriptjqueryhtmlcssselenium

Trigger a jQuery function upon clicking a button

I am attempting to create a jQuery function that can be called independently, and then trigger the function when a click event occurs. Below is the code I have put together: HTML: <input type="text" class="form-control email_input" name='email&ap ...

javascriptjqueryhtml

What is the method for binding context on a click event in Vue?

Can't access context function on click in Vue Example HTML with click function: <li v-on:click="itemClick($event, this)"></li> My Vue.js code snippet: var app = new Vue({ el: '#mainApp', methods: { ite ...

javascriptvue.jsthis

What is the most efficient way to calculate the current percentage of time that has elapsed today

Is there a way to calculate the current time elapsed percentage of today's time using either JavaScript or PHP? Any tips on how to achieve this? ...

phpjavascriptjquery

Creating dynamic captions in an Angular grid is an essential feature for enhancing the

Is there a way in Angular to dynamically update the grid titles based on an array of elements in the model? How can I display them as captions? For instance, imagine we are currently in week 202010. I would like to automatically generate the next five wee ...

javascriptangularjsangular

Running Protractor tests can be frustratingly sluggish and frequently result in timeouts

After spending most of the afternoon struggling with this test, I've tried different approaches but none seem to work. The task at hand is searching for users within the company, generating a table, and selecting the user that matches the name. Curren ...

javascripthtmlangularjsprotractor

Node.js, Express continues to execute an if statement even if the condition is false

My goal is to determine whether the user signed in is an admin or not. User data is structured like this: [ { "isAdmin": "true", "_id": "60c6df22f25d381e78ab5f31", "name": "Admin", ...

javascriptnode.jsexpressif-statement

Utilizing the power of THREE.ShaderLib.phong while integrating subsurface scattering within ThreeJS

My mesh utilizes a ShaderMaterial with THREE.ShaderLib.phong uniforms. I have successfully linked the map, bump, and specular maps textures. The code snippet below demonstrates this: defines = {}; defines["USE_MAP"] = ""; defines["USE_BUMPMAP"] = ""; defi ...

javascriptthree.jsfragment-shadervertex-shader

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...

javascriptcsslaravelpopper.jsbootstrap-5

Utilizing Restangular to refine search results with filters

I need help troubleshooting an issue with my Restangular query. Despite trying various methods, I am unable to retrieve filtered data successfully. Here are the different approaches I have attempted: $scope.welcomes = Restangular.all("projects").getList({ ...

javascriptnode.jsangularjsmongodbrestangular

The drag functionality can only be used once when applied to two separate div elements

Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and d ...

javascriptjqueryhtmlcss

What is the resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

When using import {Injectable} from '@angular/core';, does the module attribute in package.json point to a file that exports injectable? Also, for the format @angular/core/testing, is there a testing folder within @angular/core that contains anot ...

javascriptangularnpm

There has been a SecurityError (DOM Exception 18) detected, indicating that the current operation

Currently, I am utilizing 'FileMaker Pro' to display a 'three.js' drawing with a texture. Everything works perfectly within the FMP client, but when I attempt to access it through WebDirect, I encounter the following error: SecurityErr ...

three.jsfilemaker