Generating random positions on a mesh using Three.js

Question

Generating random positions on a mesh using Three.js

Just starting out with three.js and looking for some help,

I want to place a simple mesh at a random position relative to the coordinates of another mesh, like this:

I want the small yellow box to be positioned randomly above the letter M.emphasized text

I attempted the following code snippet

var points = THREE.GeometryUtils.randomPointsInGeometry( geometry, nPoints );
        const cube2 = new THREE.Mesh(cube, jaune);
        cube2.position.set(1, 0, 0);
        scene.add(cube2);

Unfortunately, it doesn't seem to work. Apologies in advance if it's a basic mistake ;)

javascript random three.js

Answer 1

Answer №1

If you're searching for a way to generate random numbers within a specified range in JavaScript, you can utilize the THREE.MathUtils.randFloat() function. This function allows you to define a low and high range and will return a random number within that range.

Based on the screenshot provided, it appears that the letter M is located on the x/z plane. To position your cube randomly along the x and z axes, you can use the following code:

let xPos = THREE.MathUtils.randFloat(-10, -8);
let zPos = THREE.MathUtils.randFloat(-2, 2);
cube2.position.set(xPos, 0, zPos);

(Please note that the specific values used in the above example are arbitrary and may need adjustment based on the actual size of the letter M. Feel free to experiment with different ranges to achieve your desired result)

Answer 2

If you're searching for a way to generate random numbers within a specified range in JavaScript, you can utilize the THREE.MathUtils.randFloat() function. This function allows you to define a low and high range and will return a random number within that range.

Based on the screenshot provided, it appears that the letter M is located on the x/z plane. To position your cube randomly along the x and z axes, you can use the following code:

let xPos = THREE.MathUtils.randFloat(-10, -8);
let zPos = THREE.MathUtils.randFloat(-2, 2);
cube2.position.set(xPos, 0, zPos);

(Please note that the specific values used in the above example are arbitrary and may need adjustment based on the actual size of the letter M. Feel free to experiment with different ranges to achieve your desired result)

Generating random positions on a mesh using Three.js

Answer №1

Similar questions

Tips for improving the efficiency of your search feature

Mastering the Art of Crafting an Effortless Slide Showcase

When using PHP's `json_encode()`, don't forget to append a "1" at the

Uncovering the Magic of TypeScript Type Inference with Generics and Function Objects

Using a different method to handle multiple callbacks in Angular or a suitable replacement for $.Callbacks

Issue with Facebook request dialog continuously loading on live server

Having trouble with one of the stubs not working while unit testing with ava and sinon for an API call

Imitating the Frameset Separator's Actions

The Vuex mutation does not execute synchronously and does not resolve as a promise

Update my React shopping cart with fresh items

Can this JSON object be created? If so, what is the process to do so?

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

The SrollToTop function is ineffective when used with a component in Ionic 6/Angular

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

fetching data from a component modified by another component in Svelte

Can you provide guidance on utilizing the Login Event within the Electron Framework?

Monitor and retrieve live updates of links using Javascript

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

The Material UI Icon is missing from the location '@mui/icons-material/Send.js'

Tips for utilizing ngDoc comments in routeConfig