Create a new design of a Three.js element

Question

Create a new design of a Three.js element

After reviewing this particular example involving three.js for drawing particles with images, I found it to work flawlessly. However, I am interested in replacing the image by toggling it with a switch upon clicking a button. Here is the function for this purpose:


        const changeImg = function(num) {

        switch (num)
        {
            case 0:
                imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....";
            break;

            case 1:
                imgData = "data:image/png;base64,iVBORw0KGgoAAAAN...";
            break;
        }

        img.src = imgData;

        }

Although this approach works, I noticed that the website slows down upon multiple clicks. How can I efficiently update just the image without causing performance issues?

EDIT 1

Upon modifying the code as shown below:

And the THREE.WebGLRenderer is only applied once but when I click to change the image, it does not update and also I still have the problem that the website slows down

it's my first time using three js and i don't know if i'm applying well what it says in the documentation

EDIT 2

When I click to change the image, it does not update and also I still have the problem that the website slows down. I cahaged vertcies.push to vertices.vertices.push()

javascript three.js frontend

Answer 1

Answer №1

Instead of disposing of objects, let's focus on reusing them in a new approach.

particles - Integrate it into the scene immediately upon creation.

material - Assign it to particles right away; no need to constantly reassign it.

geometry - Avoid creating it globally; let it function within particles.

Our goal now is to update the vertices and notify three.js about the new data to upload to the GPU.

var drawTheMap = function() {

    let vertices = particles.geometry; // this serves as a REFERENCE!
    vertices.length = 0; // clears the vertices array

    for (var y = 0, y2 = imagedata.height; y < y2; y += 2) {
        for (var x = 0, x2 = imagedata.width; x < x2; x += 2) {
            if (imagedata.data[(x * 4 + y * 4 * imagedata.width)] < 128) {

                var vertex = new THREE.Vector3();
                vertex.x = x - imagedata.width / 2;
                vertex.y = -y + imagedata.height / 2;
                vertex.z = -Math.random()*500;

                vertex.speed = Math.random() / speed + 0.015;

                vertices.push(vertex);
            }
        }
    }

    particles.geometry.verticesNeedUpdate = true; // Notify three.js of the update

    requestAnimationFrame(render);
};

The crucial step here (aside from updating the vertices) is setting

particles.geometry.verticesNeedUpdate = true;

. This action prompts three.js to replace the vertices on the GPU. By reusing instead of recreating, the process should run smoothly.

Answer 2

Instead of disposing of objects, let's focus on reusing them in a new approach.

particles - Integrate it into the scene immediately upon creation.

material - Assign it to particles right away; no need to constantly reassign it.

geometry - Avoid creating it globally; let it function within particles.

Our goal now is to update the vertices and notify three.js about the new data to upload to the GPU.

var drawTheMap = function() {

    let vertices = particles.geometry; // this serves as a REFERENCE!
    vertices.length = 0; // clears the vertices array

    for (var y = 0, y2 = imagedata.height; y < y2; y += 2) {
        for (var x = 0, x2 = imagedata.width; x < x2; x += 2) {
            if (imagedata.data[(x * 4 + y * 4 * imagedata.width)] < 128) {

                var vertex = new THREE.Vector3();
                vertex.x = x - imagedata.width / 2;
                vertex.y = -y + imagedata.height / 2;
                vertex.z = -Math.random()*500;

                vertex.speed = Math.random() / speed + 0.015;

                vertices.push(vertex);
            }
        }
    }

    particles.geometry.verticesNeedUpdate = true; // Notify three.js of the update

    requestAnimationFrame(render);
};

The crucial step here (aside from updating the vertices) is setting

particles.geometry.verticesNeedUpdate = true;

. This action prompts three.js to replace the vertices on the GPU. By reusing instead of recreating, the process should run smoothly.

Answer 3

Answer №2

To solve the issue, simply replace THREE.geometry with THREE.BufferGeometry

var updateMap = function() {
    particles.geometry = new THREE.BufferGeometry();
    var positions = [];

    for (var row = 0, rowEnd = imagedata.height; row < rowEnd; row += 2) {
        for (var col = 0, colEnd = imagedata.width; col < colEnd; col += 2) {
            if (imagedata.data[(col * 4 + row * 4 * imagedata.width)] < 128)  {

                positions.push(col - imagedata.width / 2);
                positions.push(-row + imagedata.height / 2);
                positions.push(-Math.random()*500);

                particles.geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

            }
        }
    }
    
      particles.geometry.verticesNeedUpdate = true;

    requestAnimationFrame(render);
};

Answer 4

To solve the issue, simply replace THREE.geometry with THREE.BufferGeometry

var updateMap = function() {
    particles.geometry = new THREE.BufferGeometry();
    var positions = [];

    for (var row = 0, rowEnd = imagedata.height; row < rowEnd; row += 2) {
        for (var col = 0, colEnd = imagedata.width; col < colEnd; col += 2) {
            if (imagedata.data[(col * 4 + row * 4 * imagedata.width)] < 128)  {

                positions.push(col - imagedata.width / 2);
                positions.push(-row + imagedata.height / 2);
                positions.push(-Math.random()*500);

                particles.geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

            }
        }
    }
    
      particles.geometry.verticesNeedUpdate = true;

    requestAnimationFrame(render);
};

Create a new design of a Three.js element

Answer №1

Answer №2

Similar questions

Issue with Typescript Application not navigating into the node_modules directory

Tips for Customizing the Appearance of Material UI Select Popups

Is it the correct method to query names within JavaScript arrays?

Display the menu and submenus by making a request with $.get()

Finding the distance between two points in JavaScript requires a simple formula

Uninterrupted jQuery AJAX calls

Proper method for positioning text in a line

What is the best method to close a polygon infowindow when hovering over a map marker?

Exploring the Module System of TypeScript

Troubleshooting problem with resizing and links in IE11 for iframe-resizer

React NextJS: Unable to retrieve cookies or properties post redirection

Delay in loading Jquery accordion due to value binding

Delivering a Logo to a Remote Website Based on Specific Conditions

A collection of asynchronous requests stemming from a sole request

Vue alert: Issue with rendering - TypeError: Unable to access property 'NomeStr' as it is undefined

Invoke the JavaScript function on the HTML button click event, sending the ASP parameter

Encountered difficulties sending JSON data to a REST endpoint using Node.js

Guide to creating a unit test for canActivate guard in Angular routing

Utilizing Array.from with a XPathResult: A Comprehensive Guide

Similar to LINQ's Enumerable.First(predicate) method but with a slightly different syntax, this