<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<section class="main"></section>
   <section>
   </section>
body {
  margin: 0;
  padding: 0;
  background: #012345;
  //overflow: hidden;
}

#canvas {
  position: absolute;
}

#testing {
  color: red;
  font-family: arial;
  position: absolute;
  top: 100px;
}
section {
  width: 100%;
  height: 100vh;
  display: grid;
  justify-items: center;
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );




let renderer = new THREE.WebGLRenderer();
scene.background = new THREE.Color(0xdddddd);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xECF0F1);
let doc = document.querySelector('.main');
doc.appendChild( renderer.domElement );


window.addEventListener('resize', function () {
     let width = window.innerWidth;
     let height = window.innerHeight;
     renderer.setSize(width,height);
     camera.aspect = width / height;
     camera.updateProjectionMatrix();
});



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

let quad_vertices =
     [
          -50.0,  70.0, 0.0,
          60.0,  30.0, 0.0,
          30.0, -30.0, -40.0,
          -30.0, -60.0, 0.0
     ];

let quad_uvs =
     [
          0.0, 0.0,
          1.0, 0.0,
          1.0, 1.0,
          0.0, 1.0
     ];

let quad_indices =
     [
          0, 2, 1, 0, 3, 2
     ];

let geometry = new THREE.BufferGeometry();

let vertices = new Float32Array( quad_vertices );
// Each vertex has one uv coordinate for texture mapping
let uvs = new Float32Array( quad_uvs);
// Use the four vertices to draw the two triangles that make up the square.
let indices = new Uint32Array( quad_indices )

// itemSize = 3 because there are 3 values (components) per vertex
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );

// Load the texture asynchronously
let textureLoader = new THREE.TextureLoader();
let sprite = new THREE.TextureLoader().load('https://i.postimg.cc/pXfTYqcG/bricks.jpg');
// sprite.wrapS = THREE.RepeatWrapping;  // x
// sprite.wrapT = THREE.RepeatWrapping; //  y
// sprite.rotation = 3.14;
     let material = new THREE.MeshBasicMaterial( {map: sprite });
     let mesh = new THREE.Mesh( geometry, material );
     mesh.position.z = -100;

     scene.add(mesh);

camera.position.z = 5;

const animate = function () {
     requestAnimationFrame( animate );

     renderer.render( scene, camera );

};

animate();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/dannysgrant/pen/YNLNXp.js