computational method for organizing balls in a circular formation

Question

computational method for organizing balls in a circular formation

I need help arranging 10 spheres in a ring using code. So far, this is what I have, but it's not working as expected.


            const sphereGeometry = new THREE.SphereGeometry(300, 20, 20);
            const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
            const numSpheres = 10;
            let sphere;
            const spheres = [];
            let startX = 0;
            let startY = 500;
            let radius = 80 * Math.sin(angle);

            for (let i = 0; i < numSpheres; i++) {
                sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
                console.log("sphere" + i);
                let angle = (360 / numSpheres) * i * Math.PI / 180;
                sphere.position.set((startX + Math.cos(angle) * radius), 
                                    (startY + Math.sin(angle) * radius), 
                                    100);
                scene.add(sphere);
                spheres.push(sphere);
            }

I'm not very good at math, so if anyone can spot where I've gone wrong, I would really appreciate the help. Thank you!

javascript three.js

Answer 1

Answer №1

            Creating a series of bubbles in a 3D scene involves setting various parameters such as radius, geometry, material, and positioning. In this example, five bubbles are generated with a specific start position and angle.
            var bubbleR = 400;
            var bubbleGeo = new THREE.SphereGeometry(bubbleR, 10, 10);
            var bubbleMat = new THREE.MeshLambertMaterial( { color: 0x888888 } );
            var numBubbles = 5;
            var bubbleMesh;
            bubbles = [];
            var startX = 1000;
            var startZ = 1000;
            for (var i=0; i<numBubbles; i++) {
                bubbleMesh = new THREE.Mesh(bubbleGeo, bubbleMat);
                var angle = 360/numBubbles*i*Math.PI/180;
                bubbleMesh.position.set((startX + Math.sin(angle)*bubbleR) * 2, 
                                         1000, 
                                         startZ + (Math.cos(angle)*bubbleR) * 2
                );
                scene.add(bubbleMesh);
                bubbles.push(bubbleMesh);       
            }

It seems that adding the array of bubbles to the scene after the loop is causing some issues. Additionally, attempting to group the bubbles using THREE.group is not working as intended at the moment, preventing the ability to position the entire group.

Answer 2

            Creating a series of bubbles in a 3D scene involves setting various parameters such as radius, geometry, material, and positioning. In this example, five bubbles are generated with a specific start position and angle.
            var bubbleR = 400;
            var bubbleGeo = new THREE.SphereGeometry(bubbleR, 10, 10);
            var bubbleMat = new THREE.MeshLambertMaterial( { color: 0x888888 } );
            var numBubbles = 5;
            var bubbleMesh;
            bubbles = [];
            var startX = 1000;
            var startZ = 1000;
            for (var i=0; i<numBubbles; i++) {
                bubbleMesh = new THREE.Mesh(bubbleGeo, bubbleMat);
                var angle = 360/numBubbles*i*Math.PI/180;
                bubbleMesh.position.set((startX + Math.sin(angle)*bubbleR) * 2, 
                                         1000, 
                                         startZ + (Math.cos(angle)*bubbleR) * 2
                );
                scene.add(bubbleMesh);
                bubbles.push(bubbleMesh);       
            }

It seems that adding the array of bubbles to the scene after the loop is causing some issues. Additionally, attempting to group the bubbles using THREE.group is not working as intended at the moment, preventing the ability to position the entire group.

computational method for organizing balls in a circular formation

Answer №1

Similar questions

Using Node.js for a game loop provides a more accurate alternative to setInterval

Advantages of using individual CSS files for components in React.js

Split up the author page description with a new line break for better readability on WordPress

Ensuring the model accurately reflects the input's value attribute in AngularJS

Ways to verify the element prior to the completion of the request?

Discovering the presence of a component in Angular 1.5

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Turn off a feature on older buttons

Animating CSS Pixel Fragments

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

What is the best way to convert a graphql query into a JSON object?

Error message: "Property undefined when Angular attempts to call a function from jQuery/JavaScript."

Having trouble initiating NPM in a terminal

auto-scrolling webpage as elements come into view

There seems to be a syntax error lurking within npm.js, and for some reason npm insists on utilizing version 10.19.0 of Node.js despite my attempts to update it. The reason behind this behavior

Unable to navigate beyond the boundaries of an app

jQuery wrapAll issue

How can I deactivate a Material UI button after it has been clicked once?

Using a timer to make Ajax calls twice on a single webpage

Tips for passing the id using jQuery in an AJAX request to execute a delete action