Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
              
            
!

JS

              
                const vertexShader = `

    attribute float opacity;
    varying float vOpacity;
    varying vec3 vColor;
    
    void main() {
        
        vOpacity = opacity;
        vColor = color;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    }`

;

const fragmentShader = `

    varying float vOpacity;
    varying vec3 vColor;

    void main() {

        gl_FragColor = vec4( vColor, vOpacity );

    }`

;

document.addEventListener('DOMContentLoaded', main);

const width = screen.width;
const height = screen.height;
const cameraDistance = 150;
const matrixIntensity = 2;

var camera, scene, renderer;
var colors, vertexPositions, planeMeshes, geometry, opacity;

function initMatrix() {
    
    var AvertexPositions = [ ];
    var ApointsPositions = [ ];
    
    // Push vertices in respective arrays
    var x = ( width / - 2 ) - 80;
    var y = ( height / - 2 ) - 60;
    const deltaX = 80;
    const deltaY = 60;
    var Switch = 0;
    
    while( y <= ( height / 2 ) ) {
        
        if( !Switch ) {
          
          while( x <= ( width / 2 ) ) {

              for( var j = 0; j < matrixIntensity; j++ ) {

                  // First triangle of a plane 
                  AvertexPositions.push( x,        y,      0 ); // Bottom-left corner
                  AvertexPositions.push( x,        y + 60, 0 ); // Top-left corner
                  AvertexPositions.push( x + 80,   y,      0 ); // Bottom-right corner      - clockwise 

                  // Second triangle of a plane
                  AvertexPositions.push( x,        y + 60, 0 ); // Top-left corner
                  AvertexPositions.push( x + 80,   y,      0 ); // Bottom-right corner 
                  AvertexPositions.push( x + 80,   y + 60, 0 ); // Top-right corner         - clockwise
                  
                  ApointsPositions.push( x,        y,      0 ); // "Wireframe" of a plane on the second array
                  ApointsPositions.push( x + 80,   y,      0 ); //
                  ApointsPositions.push( x + 80,   y,      0 ); //
                  ApointsPositions.push( x + 80,   y + 60, 0 ); //
                  ApointsPositions.push( x + 80,   y + 60, 0 ); //
                  ApointsPositions.push( x,        y + 60, 0 ); //
                  ApointsPositions.push( x,        y + 60, 0 ); //
                  ApointsPositions.push( x,        y,      0 ); //

              }

              x += deltaX;

          }
          
          Switch = 1;
          x -= 80;
          y += deltaY;
          
        } else {
        
          while( x >= ( ( width / - 2 ) - 80 ) ) {

              for( var j = 0; j < matrixIntensity; j++ ) {
                  
                  // First triangle of a plane
                  AvertexPositions.push( x + 80,   y + 60, 0 ); // Top-right corner
                  AvertexPositions.push( x + 80,   y,      0 ); // Bottom-right corner
                  AvertexPositions.push( x,        y + 60, 0 ); // Top-left corner          - clockwise
                
                  // Second triangle of a plane
                  AvertexPositions.push( x + 80,   y,      0 ); // Bottom-right corner
                  AvertexPositions.push( x,        y + 60, 0 ); // Top-left corner         
                  AvertexPositions.push( x,        y,      0 ); // Bottom-left corner       - clockwise
                
                  ApointsPositions.push( x,        y,      0 ); // "Wireframe" of a plane on the second array
                  ApointsPositions.push( x + 80,   y,      0 ); //
                  ApointsPositions.push( x + 80,   y,      0 ); //
                  ApointsPositions.push( x + 80,   y + 60, 0 ); //
                  ApointsPositions.push( x + 80,   y + 60, 0 ); //
                  ApointsPositions.push( x,        y + 60, 0 ); //
                  ApointsPositions.push( x,        y + 60, 0 ); //
                  ApointsPositions.push( x,        y,      0 ); //

              }

              x -= deltaX;

          }
          
          Switch = 0;
          x = ( width / -2 ) - 80;
          y += deltaY;
          
        }
      
    }
    
    const verticesN  = AvertexPositions.length / 3;           // Number of vertices created on the screen
    
    colors           = new Float32Array( verticesN * 3 );     // Vertices color array
    opacity          = new Float32Array( verticesN );         // Vertices opacity array
    vertexPositions  = new Float32Array( AvertexPositions );  // Vertices positions array
    
    // Initialize arrays
    for( var i = 0; i < verticesN; i++ ) {        
        
        opacity[ i ] = 0.3;         // Opacity array
        colors[ i * 3 ] = colors[ i * 3 + 1 ] = colors[ i * 3 + 2 ] = 0.2; // Colors array just to try
        
    }
    
    // Initialize geometry
    geometry = new THREE.BufferGeometry();
    
    geometry.addAttribute( 'position',  new THREE.BufferAttribute( vertexPositions, 3 ).setDynamic( true ) );
    geometry.addAttribute( 'color',     new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
    geometry.addAttribute( 'opacity',   new THREE.BufferAttribute( opacity, 1 ).setDynamic( true ) );
    
    // Initialize material
    var material = new THREE.ShaderMaterial( { vertexColors: THREE.VertexColors, transparent: true, vertexShader: vertexShader, fragmentShader: fragmentShader } ); // Custom material
   // material.shadowSide = THREE.BackSide;
   // material.side = THREE.FrontSide;
  
    material.side = THREE.FrontSide;
    
    //  "Wireframe" geometry and lines
    var Pgeometry = new THREE.BufferGeometry();
    Pgeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ApointsPositions ), 3 ).setDynamic( true ) );
    var lines = new THREE.LineSegments( Pgeometry, new THREE.PointsMaterial( { color: 0x353535 } ) );
    scene.add( lines );
    
    // Create line segments and add to scene
    planeMeshes = new THREE.Mesh( geometry, material );
    planeMeshes.setDrawMode( THREE.TriangleStripDrawMode );
    scene.add( planeMeshes );
    
}

function init() {
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 0, 0, cameraDistance );
    camera.lookAt( 0, 0, 0 );
    
    // Create matrix
    initMatrix();
    
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
}

function main() {
            
    init();
    animate();
    
}

function animate() {

    requestAnimationFrame( animate );
    
    render();
    
}

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

window.addEventListener( 'resize', function() { 
    var wWidth = window.innerWidth;
    var wHeight = window.innerHeight;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
} );
              
            
!
999px

Console