Tips for rendering only the descending portion of a spline in three.js

In three.js, I have the ability to draw a spline using three coordinates - start, mid, and end. When creating this spline, the curve starts at the 'start' coordinates, rises to the 'mid' position, and then falls to the 'end' coordinates. You can view the demonstration on this jsbin.

Now, I am interested in drawing only the falling half of the spline, specifically the part from 'mid' to 'end'.

This is the original spline: https://i.sstatic.net/kpeyZ.png

My goal is to extract only the falling half of the spline and fit it into the scene, similar to the image below: https://i.sstatic.net/FZCM9.png

EDIT: Here's the code snippet:

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>

<script>
    // Global Variables
    var renderer;
    var scene;
    var camera;
    var geometry;

    var control;

    var count = 0;
    var animationTracker;

    // Initialize the scene
    init();
    drawSpline();

    function init()
    {
        // Create a scene to hold all elements
        scene = new THREE.Scene();

        // Define the camera
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // Create a renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);

        // Set camera position and orientation
        camera.position.set(0, 40, 40);
        camera.lookAt(scene.position);

        // Add renderer output to html
        document.body.appendChild(renderer.domElement);
    }

    function drawSpline(numPoints)
    {
        var numPoints = 100;
        var start = new THREE.Vector3(-5, 0, 20);
        var middle = new THREE.Vector3(0, 35, 0);
        var end = new THREE.Vector3(5, 0, -20);

        var curveQuad = new THREE.QuadraticBezierCurve3(start, middle, end);

        var tube = new THREE.TubeGeometry(curveQuad, numPoints, 0.5, 20, false);
        var mesh = new THREE.Mesh(tube, new THREE.MeshNormalMaterial({
            opacity: 0.9,
            transparent: true
        }));

        scene.add(mesh);
        renderer.render(scene, camera);
    }
</script>
</body>
</html>

My intention is to adjust the falling portion of the spline to occupy the same space as the full image, as illustrated in the second image. Trimming out vertices after 'mid' would result in a very small spline section.

Answer №1

In this explanation, I present a method for drawing half or any desired proportion of a 3D quadratic bezier curve. The approach involves utilizing DeCasteljau's algorithm for the mathematical calculations. The code includes additional functions like splitQuadraticBezierCurve and getPointAtT to support the math implementation. While THREE.js provides similar functions such as getPoint and getTangent, I opted to develop my own math for handling this task.

Understanding the concept of splitting the curve is aided by the diagram below:

https://i.sstatic.net/o0Iz5.png

Here, v represents a vector or point, with v0, v1, and v2 denoting the original start, middle, and end points from the input quadratic curve. The distances t are shown as v01, v12, and v012, aiding in splitting the curve proportionally. The function returns two parts of the original quadratic curve - with the first part's points being v0, v01, and v012, while the second part's points are v012, v12, and v2.

For the second 'half' curve, the code generates the following image:

https://i.sstatic.net/l2lDS.png

Note that the image is manually adjusted for display. Automating the process for screen filling depends on various factors like camera settings, object positions, or screen dimensions. The emphasis here is on understanding how to split a quadratic bezier curve rather than fine-tuning the display parameters.

// Further code and functions follow here...

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

Using formidable to parse form data in Node.js

Hello everyone, I'm a beginner with node.js and I'm currently working on setting up a file/image upload script. After successfully installing node on my VPS, I came across this helpful guide that assisted me in setting up the app with formidable ...

`A brief disruption in loading the visual style of Google Maps`

Using the Ionic Framework, AngularJS, and Google Maps API, I encountered an irritating issue with my mobile app. Every time the map loads, there is a noticeable delay in loading the map style. This delay is particularly problematic as my map style converts ...

Using an npm package in client-side JavaScript

I've been exploring client-side GitHub packages recently and came across developers mentioning that the packages can be downloaded using npm. This confuses me as I thought these were client-side JavaScript packages. They also mentioned something about ...

No data received from AJAX response

I've spent around 8 hours trying to figure this out with no success. Using $.ajax, I am trying to retrieve data from my database through a PHP script. However, it seems like it's not working in this particular case and I have no idea why. The va ...

What is the best way to incorporate both a view and a partial view into an MVC project using JavaScript?

I am facing an issue where the order of actions being performed in my code is not as desired. I am trying to refresh the entire page after an ajax call completes a specific action, followed by loading a particular partial view. Here is my current attempt: ...

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

Is it possible for Javascript to handle a string of 27601 characters in length?

I have created a webmethod that returns an object containing strings. Each string in the object is of length 27601. This pattern continues for all array members - str(0) to str(n). When my webmethod returns this exact object, I encounter an issue on the c ...

Tips for displaying previous values when discarding changes to a record in a material-ui table

How can I prevent changes from reflecting in a material-ui table when clicking on the X icon while editing a row? Is there a way to only save the edited record on the check (_) icon instead? Any suggestions or solutions would be greatly appreciated as I am ...

Modify Twig template variable using AJAX

I'm attempting to dynamically reload a section of my HTML with new data fetched through AJAX. Within the code, there is a loop that iterates over clients: {% for client in clients %} After making an AJAX request and receiving updated client informa ...

Encountering issues: Texture lacks cubemap completeness and INVALID_VALUE error with texImage2D in Internet Explorer 11

I have come across several instances where cubemaps were created using images from the local file system, but I haven't been able to find any examples where the images are loaded dynamically from an external website to populate the cubemap. Fortunatel ...

What's the Purpose of Using an Arrow Function Instead of Directly Returning a Value in a React Event Handler?

After skimming through various textbooks and blog posts, I've noticed that many explanations on event handlers in React are quite vague... For example, when instructed to write, onChange = {() => setValue(someValue)} onChange = {() => this.pro ...

Accessing the `this` element in ES6 after binding to the class

Is there a way to retrieve and interact with this element after applying the this class? For instance, when not using this: $(".button-open").click(function(event) { console.log(this); // <a href="#" class="button-open">Open</a> this. ...

Creating Filled DIVs using JavaScript

Although it may appear to be a common inquiry, my specific needs have not been addressed in any of the Stack threads I've come across. I am dealing with a series of nested DIV statements, as demonstrated here (not all CSS included). I am looking to ...

Searching for dates within a range on DataTables using CodeIgniter

Can someone assist me in displaying data within a selected date range? Here is the code snippet I have so far: Below is the code for displaying the data tables: View <div class="box-body"> <div class="table-responsive"> ...

Utilizing the push method to add a JavaScript object to an array may not be effective in specific scenarios

When I tried using users.push within the 'db.each' function in the code below, it didn't work. However, moving the 'users.push' outside of it seemed to do the trick. Is there a way to successfully push the new objects from db.each ...

Having trouble displaying a JSON response on an HTML page with AJAX

I've written an AJAX function that goes like this: function ajx(){ var ajaxRequest; // This variable makes Ajax possible! try{ // Works in Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // For Internet Exp ...

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

jqGrid: Efficiently edit a row inline by focusing on the specific cell clicked to enter edit mode

We have integrated jqGrid into our web application for data entry, allowing users to edit data inline and in rows. One of our customers has requested a more "Excel-like" experience, where clicking on a cell to switch a row to inline editing will focus spe ...

Tips for turning off the auto save password option on browsers for user registration forms

Is there a way to prevent browsers from saving passwords on the add users form? I've tried using autocomplete="off" but it doesn't seem to work for saved passwords. I've searched extensively for a solution but haven't found the right on ...

Having difficulty accessing the API response accurately

The response from my API is as follows: {"__v":0,"short":"8xdn4a5k","_id":"5404db5ac27408f20440babd","branches":[{"version":1,"code":""}],"ext":"js","language":"javascript"} When I use this code, it works perfectly: console.log(response.short); However ...