body {
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new OrbitControls(camera, renderer.domElement);
var geometry = new THREE.BoxBufferGeometry(10, 5, 1);
var uvs = geometry.getAttribute("uv");
// Setting UV coordinates for different faces
uvs.setXY(0, 1, 1); // +x
uvs.setXY(1, 0.9, 1);
uvs.setXY(2, 1, 0);
uvs.setXY(3, 0.9, 0);
uvs.setXY(4, 0.1, 1); // -x
uvs.setXY(5, 0, 1);
uvs.setXY(6, 0.1, 0);
uvs.setXY(7, 0, 0);
uvs.setXY(8, 0, 0.8); // +y
uvs.setXY(9, 1, 0.8);
uvs.setXY(10, 0, 1);
uvs.setXY(11, 1, 1);
uvs.setXY(12, 0, 0); // -y
uvs.setXY(13, 1, 0);
uvs.setXY(14, 0, 0.2);
uvs.setXY(15, 1, 0.2);
uvs.setXY(20, 0, 0); // -z ("back")
uvs.setXY(21, 0, 0);
uvs.setXY(22, 0, 0);
uvs.setXY(23, 0, 0);
var material = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg")});
var object = new THREE.Mesh(geometry, material);
scene.add(object);
renderer.setAnimationLoop(()=>{
renderer.render(scene, camera);
});
</script>