UV Texture Fill

by orion_prime

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>

JavaScript

let camera, scene, renderer, stats
let gui = new dat.GUI();

let mesh, geometry, material
let params = {
  width: 2,
  height: 5,
  imgUrl: "https://picsum.photos/200/500"
}

init();
animate();
setupGui()
const gltfExporter = new THREE.GLTFExporter();
async function init() {
  stats = new Stats()
  document.body.appendChild(stats.dom)

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  renderer.outputEncoding = THREE.sRGBEncoding

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 0, 5);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.update()
  //
  scene.background = new THREE.Color('#0f0f00')
  const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
  scene.add(ambientLight);

  const pointLight = new THREE.PointLight(0xffffff, 0.8);
  camera.add(pointLight);
  scene.add(camera);

  //

  scene.add(new THREE.AxesHelper(1));

  //



  material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide
  });
  const texLoader = new THREE.TextureLoader()

  const tex = await texLoader.loadAsync(params.imgUrl)
  tex.encoding = THREE.sRGBEncoding
  material.map = tex

  geometry = new THREE.PlaneGeometry(tex.image.width / 100, tex.image.height / 100);
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh)

}





function animate() {
  stats.update()
  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}


function setupGui() {
  const obj = {
    ran() {},
    export () {},
    exportAsOne() {},
    val: 0.000,
  }

  gui.add(obj, 'export').name('EXPORT').onFinishChange(() => {
    exportGLB(mesh, 'plane')
  })
  gui.add(params, 'width', 0.1, 5).name('W').onChange(() => {
    updatePlane()
  })
 ...