What are the steps for creating a unique plane geometry using three.js?

Question

What are the steps for creating a unique plane geometry using three.js?

I am hoping to develop a three.js plane with a higher number of points than the default setup. This means I won't be using PlaneGeometry since it doesn't allow me to define custom points. My goal is to have the flexibility to animate or move any point at any given time.

Here is my initial progress:

var camera;
var scene;
var renderer;
var mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);

    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 1, 1 ).normalize();
    scene.add(light);


    var geometry = new THREE.PlaneGeometry( 50, 50);  

    var texture = THREE.ImageUtils.loadTexture('images/03032122.png', {}, function() {
    renderer.render(scene, camera);
    })
    var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })


    mesh = new THREE.Mesh(geometry, material );
    mesh.position.z = -50;
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize( window.innerWidth, window.innerHeight );

    renderer.setClearColor( 0xffffff, 1);
    document.body.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );

    render();
}

function animate() {
    //mesh.scale.x+= 0.0003;


    render();
    requestAnimationFrame( animate );

}

function render() {
    renderer.render( scene, camera );
}


function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
    render();
}

My objective is to create something akin to this visual:

javascript 3d three.js polygon

Answer 1

Answer №1

Make sure to pay attention to PlaneGeometry, as it is now deprecated (meaning it will be removed in a future update). Instead, use PlaneBufferGeometry.

@pailhead's response is accurate if you are looking for the standard plane division.

If you want the vertices to have different positions, you will need to construct the geometry vertex by vertex, which is a different approach.

Additionally, if you need to move/animate the vertices later on, you can adjust each vertex's position after creating the geometry with this code:

planeMesh.geometry.vertices[i].set(x, y, z); // This allows you to change the coordinates of each vertex
planeMesh.geometry.verticesNeedUpdate = true;

*: For example, creating a plane with 4 vertices (2 triangles):

var geo = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3(x1, y1, z1), // vertex0
    new THREE.Vector3(x2, y2, z2), // 1
    new THREE.Vector3(x3, y3, z3), // 2
    new THREE.Vector3(x4, y4, z4) // 3
    );
geometry.faces.push(
    new THREE.Face3(2, 1, 0), // using vertices with rank 2, 1, 0
    new THREE.Face3(3, 1, 2) // vertices[3], 1, 2...
    );

It is important to note that what defines this geometry as a plane is that the 4 vertices are coplanar.

When dealing with geometries with numerous faces, you may find it helpful to draw them out on paper. Depending on the complexity of your geometry, you may also need to utilize an algorithm.

Answer 2

Make sure to pay attention to PlaneGeometry, as it is now deprecated (meaning it will be removed in a future update). Instead, use PlaneBufferGeometry.

@pailhead's response is accurate if you are looking for the standard plane division.

If you want the vertices to have different positions, you will need to construct the geometry vertex by vertex, which is a different approach.

Additionally, if you need to move/animate the vertices later on, you can adjust each vertex's position after creating the geometry with this code:

planeMesh.geometry.vertices[i].set(x, y, z); // This allows you to change the coordinates of each vertex
planeMesh.geometry.verticesNeedUpdate = true;

*: For example, creating a plane with 4 vertices (2 triangles):

var geo = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3(x1, y1, z1), // vertex0
    new THREE.Vector3(x2, y2, z2), // 1
    new THREE.Vector3(x3, y3, z3), // 2
    new THREE.Vector3(x4, y4, z4) // 3
    );
geometry.faces.push(
    new THREE.Face3(2, 1, 0), // using vertices with rank 2, 1, 0
    new THREE.Face3(3, 1, 2) // vertices[3], 1, 2...
    );

It is important to note that what defines this geometry as a plane is that the 4 vertices are coplanar.

When dealing with geometries with numerous faces, you may find it helpful to draw them out on paper. Depending on the complexity of your geometry, you may also need to utilize an algorithm.

Answer 3

Answer №2

I designed my own unique aircraft using the following code:

        // Custom Aircraft
            var size = 600, step = 150;
            var geometry = new THREE.Geometry();
            for ( var i = - size; i <= size; i += step ) {

                geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
                geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );

                geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
                geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );

            }

            var material = new THREE.LineBasicMaterial( { color: 0xFF0000, opacity: 0.7 } );

            var line = new THREE.Line( geometry, material, THREE.LinePieces );
            scene.add( line );

Answer 4

I designed my own unique aircraft using the following code:

        // Custom Aircraft
            var size = 600, step = 150;
            var geometry = new THREE.Geometry();
            for ( var i = - size; i <= size; i += step ) {

                geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
                geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );

                geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
                geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );

            }

            var material = new THREE.LineBasicMaterial( { color: 0xFF0000, opacity: 0.7 } );

            var line = new THREE.Line( geometry, material, THREE.LinePieces );
            scene.add( line );

Answer 5

Answer №3

Consider expanding the arguments of THREE.PlaneGeometry by adding two more parameters.

THREE.PlaneGeometry( width, height, widthSegments, heightSegments )

Refer to the library (observe a function call) and check the documentation for guidance.

Alternatively, you may explore the following resource:

Answer 6

Consider expanding the arguments of THREE.PlaneGeometry by adding two more parameters.

THREE.PlaneGeometry( width, height, widthSegments, heightSegments )

Refer to the library (observe a function call) and check the documentation for guidance.

Alternatively, you may explore the following resource:

Answer 7

Answer №4

If you're interested in creating a customized plane with unique borders, I suggest directly modifying the position attribute array and updating the geometry points position:

// Define the length of x and the number of divisions
    const x_length = 1 
    const divisions = 10
    
    let geometry = new THREE.PlaneBufferGeometry( x_length, 1, divisions, 1 )
    let material = new THREE.MeshPhongMaterial( { color: 0xecf0f1, wireframe: true } )
    
    let pointPos = geometry.getAttribute("position").array
        
    for (let i = 0; i < divisions + 1; i++) {
      let x = pointPos[3 * i] + x_length/2

      // Assigning y as a function of x^2
      pointPos[3 * i + 1] = Math.pow(x, 2) 
      pointPos[3 * ( divisions + 1 ) + 3 * i + 1] = - pointPos[3 * i  + 1]
      
      console.log(`x = ${pointPos[3 * i]}; y = ${pointPos[3 * ( divisions + 1 ) + 3 * i + 1]}`)

        }
    
    pointPos.needsUpdate = true;
    
    mesh = new THREE.Mesh(geometry, material )

    scene.add(mesh)

For a visual demonstration, check out my example https://codepen.io/ferrari212/pen/bGpgLBd?editors=0010

Answer 8

If you're interested in creating a customized plane with unique borders, I suggest directly modifying the position attribute array and updating the geometry points position:

// Define the length of x and the number of divisions
    const x_length = 1 
    const divisions = 10
    
    let geometry = new THREE.PlaneBufferGeometry( x_length, 1, divisions, 1 )
    let material = new THREE.MeshPhongMaterial( { color: 0xecf0f1, wireframe: true } )
    
    let pointPos = geometry.getAttribute("position").array
        
    for (let i = 0; i < divisions + 1; i++) {
      let x = pointPos[3 * i] + x_length/2

      // Assigning y as a function of x^2
      pointPos[3 * i + 1] = Math.pow(x, 2) 
      pointPos[3 * ( divisions + 1 ) + 3 * i + 1] = - pointPos[3 * i  + 1]
      
      console.log(`x = ${pointPos[3 * i]}; y = ${pointPos[3 * ( divisions + 1 ) + 3 * i + 1]}`)

        }
    
    pointPos.needsUpdate = true;
    
    mesh = new THREE.Mesh(geometry, material )

    scene.add(mesh)

For a visual demonstration, check out my example https://codepen.io/ferrari212/pen/bGpgLBd?editors=0010

What are the steps for creating a unique plane geometry using three.js?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the term used for the objects that res.render passes?

Exploring the Benefits of Using a Try-Catch Block for Creating an Audio Element

Invoke a PHP function located in a separate file using a JavaScript function to fetch data from a database

Is it possible to use AngularJS to show additional information between rows when a table row is clicked in HTML

Massive HTML Table Containing Rows upon Rows

JavaScript - unable to view updated information without refreshing page

AngularJS version is a software update for the Angular

The condition is not being recognized after clicking the third button

Strategies for effectively managing and eliminating spam messages in ReactJs

The mysterious case of the missing currentUserObj in Angular with rxjs Subject

Can Selenium in JavaScript be used to retrieve child elements from a webpage?

Determining the positioning of a tablet with a JavaScript algorithm

Can you show me the steps for linking the next method of an EventEmitter?

Verifying the username's availability through AJAX requests

Can grapesjs be integrated into AngularJS using a controller?

Error message: Invalid input for directive, only numeric values are accepted

What is the best way to ensure that a Mantine burger closes once a link is clicked?

execute a jQuery function within a data list component

Function utilizing variables parsed by Angular directive

Relocating to reveal or conceal item