THREE.js PlaneGeometry Converting a triangle drawing to a square

Question

In the link below there is an animation created with triangles. How can I convert triangular areas into squares? A line runs through the middle when using "PlaneGeometry". When this line is deleted, the triangles turn into squares.

https://codepen.io/UIUXLab/pen/pBRzRZ

I want it like in the picture.

( function( $ ) {
"use strict";
  
    $( function() {
        

        
        var $window                   = $( window ),
            windowWidth               = window.innerWidth,
            windowHeight              = window.innerHeight,
            rendererCanvasID          = '3D-background-three-canvas5';
        
    
        
        // Generate one plane geometries mesh to scene
        //------------------------------------- 
        var camera,
            scene,
            material,
            group,
            lights = [],
            renderer,
            shaderSprite,
            clock = new THREE.Clock();
        

        var geometry, plane, simplex;
        
        var factor = 300,
            speed = 0.0005, // terrain size
            cycle = 0, //move speed
            scale = 30; // smoothness
            
   

        init();
        render();

        function init() {
            //camera
            camera = new THREE.PerspectiveCamera( 60, windowWidth / windowHeight, 1, 10000 );
            camera.position.set( 0, 0, 100 );

        
            //Scene
            scene = new THREE.Scene();

            //HemisphereLight
            lights[ 0 ] = new THREE.PointLight( 0xff0000, 1, 0 );
            lights[ 1 ] = new THREE.PointLight( 0x0000ff, 1, 0 );
            lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

            lights[ 0 ].position.set( 0, 200, 0 );
            lights[ 1 ].position.set( 100, 200, 100 );
            lights[ 2 ].position.set( - 100, - 200, - 100 );

            scene.add( lights[ 0 ] );
            scene.add( lights[ 1 ] );
            scene.add( lights[ 2 ] );

            

            //WebGL Renderer        
            renderer = new THREE.WebGLRenderer( { 
                                    canvas   : document.getElementById( rendererCanvasID ), //canvas
                                    alpha    : true, 
                                    antialias: true 
                                } );
            renderer.setSize( windowWidth, windowHeight );

        
            // Immediately use the texture for material creation
            group = new THREE.Object3D();
            group.position.set(0,-300,-1000);
            group.rotation.set(29.8,0,0);

            
            
            geometry = new THREE.PlaneGeometry(4000, 2000, 128, 64);
            material = new THREE.MeshLambertMaterial({
                color: 0xffffff,
                opacity: 1,
                blending: THREE.NoBlending,
                side: THREE.FrontSide,
                transparent: false,
                depthTest: false,
                wireframe: true
            });
            plane = new THREE.Mesh(geometry, material);
            plane.position.set(0, 0, 0);
            
            simplex = new SimplexNoise();
            moveNoise();
            
            
            group.add(plane);
            scene.add(group);
            
            

            // Fires when the window changes
            window.addEventListener( 'resize', onWindowResize, false );
            
            
        }

        function render() {
            requestAnimationFrame( render );
            
            var delta     = clock.getDelta();

            //To set a background color.
            renderer.setClearColor( 0x000000 ); 
            
        
            //change noise values over time
            moveNoise();
            
            //update sprite
            cycle -= delta * 0.5;
            
            

            renderer.render( scene, camera );
            
            

            
        }


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



        function moveNoise() {
            var _iteratorNormalCompletion2 = true;
            var _didIteratorError2 = false;
            var _iteratorError2 = undefined;

            try {
                for (var _iterator2 = geometry.vertices[Symbol.iterator](), _step2; ! (_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
                    var vertex = _step2.value;
                    var xoff = vertex.x / factor;
                    var yoff = vertex.y / factor + cycle;
                    var rand = simplex.noise2D(xoff, yoff) * scale;
                    vertex.z = rand;
                }
            } catch(err) {
                _didIteratorError2 = true;
                _iteratorError2 = err;
            } finally {
                try {
                    if (!_iteratorNormalCompletion2 && _iterator2.
                    return != null) {
                        _iterator2.
                        return ();
                    }
                } finally {
                    if (_didIteratorError2) {
                        throw _iteratorError2;
                    }
                }
            }

            geometry.verticesNeedUpdate = true;
            cycle += speed;
        }
        
        

    
    } );
  
    
} ) ( jQuery );

The middle line should disappear. https://threejs.org/docs/#api/en/geometries/PlaneGeometry

Answer 1

You can change index of a plane geometry, and then use the geometry with LineSegments.

See this forum topic: Wireframe of quads

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";
import { ImprovedNoise } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/math/ImprovedNoise.js';

let perlin = new ImprovedNoise()

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);

let g = new THREE.PlaneGeometry(20, 20, 50, 50);
let pos = g.attributes.position;
let uvs = g.attributes.uv;
let uv = new THREE.Vector2();
for(let i = 0; i < pos.count; i++){pos
  uv.fromBufferAttribute(uvs, i);
  uv.multiplyScalar(5);
  let z = perlin.noise(uv.x, uv.y, 0) * 3;
  pos.setZ(i, z);
}
g.rotateX(-Math.PI * 0.5);

ToQuads(g); // change the index

let m = new THREE.LineBasicMaterial({color: "magenta"});
let o = new THREE.LineSegments(g, m);
scene.add(o);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

function ToQuads(g) {
  let p = g.parameters;
  let segmentsX = (g.type == "TorusBufferGeometry" ? p.tubularSegments : p.radialSegments) || p.widthSegments || p.thetaSegments || (p.points.length - 1) || 1;
  let segmentsY = (g.type == "TorusBufferGeometry" ? p.radialSegments : p.tubularSegments) || p.heightSegments || p.phiSegments || p.segments || 1;
  let indices = [];
  for (let i = 0; i < segmentsY + 1; i++) {
    let index11 = 0;
    let index12 = 0;
    for (let j = 0; j < segmentsX; j++) {
      index11 = (segmentsX + 1) * i + j;
      index12 = index11 + 1;
      let index21 = index11;
      let index22 = index11 + (segmentsX + 1);
      indices.push(index11, index12);
      if (index22 < ((segmentsX + 1) * (segmentsY + 1) - 1)) {
        indices.push(index21, index22);
      }
    }
    if ((index12 + segmentsX + 1) <= ((segmentsX + 1) * (segmentsY + 1) - 1)) {
      indices.push(index12, index12 + segmentsX + 1);
    }
  }
  g.setIndex(indices);
}
</script>