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);
	// geometry = new THREE.PlaneGeometry(1, 1);
    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,6).name('W').onChange(()=>{updatePlane()})
 ...