Adding a geometry to three.js and dynamically rotating it in real-time

Question

Adding a geometry to three.js and dynamically rotating it in real-time

Check out https://jsfiddle.net/pmankar/svt0nhuv/ for more info.

The primary large red icosahedron geometry continues rotating along the y-axis. I successfully incorporated a small red sphere geometry and merged it with the primary geometry. Everything was functioning well up until this point. To achieve this, I utilized

THREE.GeometryUtils.merge(point_sphere_iso_geom, sphere);

However, whenever I attempt to dynamically add spheres with a mouse click, although they are successfully added (appearing as yellow spheres), they do not rotate alongside the primary large red icosahedron geometry.

Could someone clarify why this functioned initially but not when added dynamically, along with suggestions on how to enable this functionality dynamically as well.

javascript three.js

Answer 1

Answer №1

It seems like the process involves creating a new geometry for each mouse click, starting from the previous one by merging it with a new sphere geometry. This new geometry is then applied to a fresh mesh, replacing the old one in the process.

There are also some changes in variables:

var geometry, material, point_sphere_iso_geom, mesh;

The initial merged mesh creation involves:

point_sphere_iso_geom = new THREE.IcosahedronGeometry(100, 4);
cygeo = new THREE.SphereGeometry(5, 10, 10);
cygeo.translate(0,0,120);
point_sphere_iso_geom.merge( cygeo );
mesh = new THREE.Mesh(point_sphere_iso_geom, material);

And here's the function for adding a yellow point:

function addYellowPoint(valX, valY) {
    var sgeometry = new THREE.SphereGeometry(2.5, 10, 10);

    var range = 150;
    var x = Math.random() * range - range / 2;
    var y = Math.random() * range - range / 2;
    var z = Math.random() * range - range / 2;
    sgeometry.translate(x,y,z);
    point_sphere_iso_geom = mesh.geometry.clone();
    point_sphere_iso_geom.applyMatrix(mesh.matrix);
    point_sphere_iso_geom.merge(sgeometry);

    scene.remove(mesh);
    mesh.geometry.dispose();
    mesh.material.dispose();
    mesh = new THREE.Mesh(point_sphere_iso_geom, material);
    scene.add(mesh);
}

Answer 2

It seems like the process involves creating a new geometry for each mouse click, starting from the previous one by merging it with a new sphere geometry. This new geometry is then applied to a fresh mesh, replacing the old one in the process.

There are also some changes in variables:

var geometry, material, point_sphere_iso_geom, mesh;

The initial merged mesh creation involves:

point_sphere_iso_geom = new THREE.IcosahedronGeometry(100, 4);
cygeo = new THREE.SphereGeometry(5, 10, 10);
cygeo.translate(0,0,120);
point_sphere_iso_geom.merge( cygeo );
mesh = new THREE.Mesh(point_sphere_iso_geom, material);

And here's the function for adding a yellow point:

function addYellowPoint(valX, valY) {
    var sgeometry = new THREE.SphereGeometry(2.5, 10, 10);

    var range = 150;
    var x = Math.random() * range - range / 2;
    var y = Math.random() * range - range / 2;
    var z = Math.random() * range - range / 2;
    sgeometry.translate(x,y,z);
    point_sphere_iso_geom = mesh.geometry.clone();
    point_sphere_iso_geom.applyMatrix(mesh.matrix);
    point_sphere_iso_geom.merge(sgeometry);

    scene.remove(mesh);
    mesh.geometry.dispose();
    mesh.material.dispose();
    mesh = new THREE.Mesh(point_sphere_iso_geom, material);
    scene.add(mesh);
}

Adding a geometry to three.js and dynamically rotating it in real-time

Answer №1

Similar questions

What is the impact of a floated element on vertical spacing?

The dropdown feature does not activate when the checkbox is selected, leading to the dropdown remaining disabled

Adjust the border color of Material UI's DatePicker

What is the process for retrieving the user's information following successful social media login?

Determine future dates based on selected date and time

Struggling with react three fiber and encountering the error message: THREE.WebGLRenderer: Context Lost

Can someone guide me on integrating Apache Superset as an application within a Django project?

Steps for resolving the "endless redirection loop" issue in Sharepoint

Toggle the state of a Material UI checkbox in ReactJS based on the data from hooks that return a true or checked value

center text above images in flexbox when page is resized

In JavaScript, can you combine values within an array of objects that share the same key value pair?

Having trouble getting my Win and Lose Divs to display in my IF statement within the Card Game

Displaying elements above my React sidebar

The form submission feature is malfunctioning due to JavaScript issues

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Troubleshooting CORS Problems with jQuery and Spring Boot

Challenges with Hangman in JavaScript

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

Looking for JavaScript code that can dynamically create an HTML table from JSON data

Guide to incorporating JSON data into HTML through JavaScript