Creating point illustrations with Three.js

Question

Creating point illustrations with Three.js

Looking to incorporate random points into a web project using Three.js.

Here's the current code:

<script type="module">

  import * as THREE from 'https://threejs.org/build/three.module.js';

            import { TrackballControls } from 'https://threejs.org/examples/jsm/controls/TrackballControls.js';

            let camera, scene, renderer, controls;

            init();
            animate();

            function init() {

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xffffff );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set( 0, 0, 500 );

                controls = new TrackballControls( camera, renderer.domElement );
                controls.minDistance = 200;
                controls.maxDistance = 500;

                scene.add( new THREE.AmbientLight( 0x222222 ) );

                const light = new THREE.PointLight( 0xffffff );
                light.position.copy( camera.position );
                scene.add( light );

                //

                const randomPoints = [];

                for ( let i = 0; i < 10; i ++ ) {

                    randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.MathUtils.randFloat( - 50, 50 ), THREE.MathUtils.randFloat( - 50, 50 ) ) );

                }

                const randomSpline = new THREE.CatmullRomCurve3( randomPoints );

                //

                const extrudeSettings2 = {
                    steps: 120,
                    bevelEnabled: false,
                    extrudePath: randomSpline
                };


                const pts2 = [], numPts = 5;

                for ( let i = 0; i < numPts * 2; i ++ ) {

                    const l = i % 2 == 1 ? 10 : 10;

                    const a = i / numPts * Math.PI;

                    pts2.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );

                }

                const shape2 = new THREE.Shape( pts2 );

                const geometry2 = new THREE.ExtrudeGeometry( shape2, extrudeSettings2 );

                const material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );

                const mesh2 = new THREE.Mesh( geometry2, material2 );

                scene.add( mesh2 );


                //

                const materials = [  material2 ];

                const extrudeSettings3 = {
                    depth: 40,
                    steps: 1,
                    bevelEnabled: true,
                    bevelThickness: 2,
                    bevelSize: 4,
                    bevelSegments: 1
                };

                const geometry3 = new THREE.ExtrudeGeometry( shape2, extrudeSettings3 );

                const mesh3 = new THREE.Mesh( geometry3 );

                mesh3.position.set( 150, 100, 0 );


            }

            function animate() {

                requestAnimationFrame( animate );

                controls.update();
                renderer.render( scene, camera );

            }

        </script>

Seeking guidance on how to introduce random points instead of relying solely on splines for the output. Is there a specific function or method that can be utilized for this purpose?

Your assistance would be greatly appreciated! :)

javascript three.js

Answer 1

Answer №1

To begin, I suggest exploring the capabilities of ConvexGeometry. By providing an array of points or Vector3 (which it seems you have stored in the variable randomPoints), this tool can generate a shape for you.

I noticed your use of CatmullRomCurve3, which could be useful in creating curves between points. Combining these two approaches could result in a more curvaceous model.

const divisions = 25; // The number of divisions between points
const catmullPoints = new THREE.CatmullRomCurve3(randomPoints, true, "catmullrom", 0.5).getPoints(divisions);
const geometryConvex = new ConvexGeometry(randomPoints);

Now, you have a geometry with a somewhat irregular shape. However, it may appear more structured compared to the example shapes you provided. To achieve a more abstract shape, you can divide your randomPoints into chunks (i.e., multiple sub-arrays) and follow a similar approach as above. By storing the created geometries in a separate array, let's say geometries, you can then use mergeBufferGeometries to combine them into a single geometry. Here's the code:

const size = THREE.MathUtils.randInt(2, 10); // Another parameter to randomize the number of sub-arrays
const pointsChunk = chunk([...randomPoints], size); // You can use lodash or other chunk algorithms available online

const geometries = [];
for (let i = 0; i < pointsChunk.length; i++) {
    const divisions = 25;
    const catmullPoints = new THREE.CatmullRomCurve3(pointsChunk[i], true, "catmullrom", 0.5).getPoints(divisions);
    geometries.push(new ConvexGeometry(catmullPoints));
}

const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);

There are various approaches you can take, but starting with ConvexGeometry seems promising. Feel free to experiment with different methods. You can check out my attempt on this Fiddle link.

Answer 2

To begin, I suggest exploring the capabilities of ConvexGeometry. By providing an array of points or Vector3 (which it seems you have stored in the variable randomPoints), this tool can generate a shape for you.

I noticed your use of CatmullRomCurve3, which could be useful in creating curves between points. Combining these two approaches could result in a more curvaceous model.

const divisions = 25; // The number of divisions between points
const catmullPoints = new THREE.CatmullRomCurve3(randomPoints, true, "catmullrom", 0.5).getPoints(divisions);
const geometryConvex = new ConvexGeometry(randomPoints);

Now, you have a geometry with a somewhat irregular shape. However, it may appear more structured compared to the example shapes you provided. To achieve a more abstract shape, you can divide your randomPoints into chunks (i.e., multiple sub-arrays) and follow a similar approach as above. By storing the created geometries in a separate array, let's say geometries, you can then use mergeBufferGeometries to combine them into a single geometry. Here's the code:

const size = THREE.MathUtils.randInt(2, 10); // Another parameter to randomize the number of sub-arrays
const pointsChunk = chunk([...randomPoints], size); // You can use lodash or other chunk algorithms available online

const geometries = [];
for (let i = 0; i < pointsChunk.length; i++) {
    const divisions = 25;
    const catmullPoints = new THREE.CatmullRomCurve3(pointsChunk[i], true, "catmullrom", 0.5).getPoints(divisions);
    geometries.push(new ConvexGeometry(catmullPoints));
}

const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);

There are various approaches you can take, but starting with ConvexGeometry seems promising. Feel free to experiment with different methods. You can check out my attempt on this Fiddle link.

Creating point illustrations with Three.js

Answer №1

Similar questions

Use jQuery to retrieve the response from a JSON request and showcase it on the existing HTML page

The function window.scrollBy seems to be causing a conflict with jjmslideshow, resulting in the page being unable to

Unexpected object returned by the spread operator

Arranging JavaScript object by object properties (name)

Encountering an error in Laravel 5.1 and Vue.js - Error code 21678: Uncaught TypeError: Unable to retrieve 'data' property from null

Implement a basic JavaScript prompt feature within a Node.js application that can be integrated into

Why does one image render while the other with the same src does not?

Steps for creating a dynamic validation using a new form control

Repairing the orientation in unique threejs capsule geometric shape

Increase the progress bar at regular intervals of x seconds

Utilizing multiple div IDs within the same script functionality

Switch the designation to Hover Class

Initiate a click on a radio button while also retaining the selected option when the page is

SOLVING the issue of page flicker in SVELTE

Thinking of hosting an event centered around Google Maps?

What is the best way to access a JSON Array in php without using any specified keys?

Why is my JSON object showing up as undefined in my Node.js POST request?

Choose various selections from a drop-down menu using AngularJs

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

The requested resource lacks the 'Access-Control-Allow-Origin' header in a basic HTML form