<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);

const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
     -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,

     1.0,  1.0,  1.0,
     -1.0,  1.0,  1.0,
     -1.0, -1.0,  1.0
] );
//
// // itemSize = 3 because there are 3 values (components) per vertex
let sprite = new THREE.TextureLoader().load('https://i.postimg.cc/1zJXDKsN/new-2.jpg')
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
let uvAttribute = geometry.attributes.position;

let min = Infinity, max = 0
//find min max
for (let i = 0; i < uvAttribute.count; i++) {
     let u = uvAttribute.getX(i);
     let v = uvAttribute.getY(i);
     min = Math.min(min, u, v)
     max = Math.max(max, u, v)
}

//map min map to 1 to 1 range
for (let i = 0; i < uvAttribute.count; i++) {
     let u = uvAttribute.getX(i);
     let v = uvAttribute.getY(i);

     // do something with uv
     u = THREE.MathUtils.mapLinear(u, min, max, 0, 1)
     v = THREE.MathUtils.mapLinear(v, min, max, 0, 1)

     // write values back to attribute
     uvAttribute.setXY(i, u, v);

}
const material = new THREE.MeshBasicMaterial( {
     color: 0xff0000,
     side: THREE.DoubleSide,
     map:sprite,

} );

const mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);


camera.position.z = 5;

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

     renderer.render( scene, camera );

};

animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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