Perspective texture mapping distorted on a plane

Questions
,
1

Hi all,
I’m new to THREE and I try to do a (maybe simple?) rendering. I’ve already searched the entries here, but didn’t found exactly what I need…
What I want to do is make a texture projection onto a plane from a freely definable angle - so that I get a distorted representation of my original image on the plane.
An initial setup I found here: Texture perspective projection and I made some simplifyings:

<html>
	<head>
		<title>Texture Projection</title>
		<style>
			body { margin: 0; position: fixed;}
			canvas { width: 100%; height: 100%; display: block;}
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
    
			var texture = new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/uv_grid_opengl.jpg');
			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x696969 );
			var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 100 );
			var controls = new THREE.OrbitControls( camera, renderer.domElement );
			camera.position.set( 0, 0, 4 );
			controls.target.set( 0, 0, 0 );

			var grid = new THREE.GridHelper( 10, 10 );
			var grid2 = new THREE.GridHelper( 10, 10 );
			grid2.rotation.z = Math.PI/2;
			scene.add( grid, grid2 );

			var geometry = new THREE.PlaneGeometry( 2, 2 );
			var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );
			var convex = new THREE.Mesh( geometry, material );
			convex.updateWorldMatrix( true );
			scene.add( convex );

			function animate() {
				requestAnimationFrame( animate );
				controls.update();
				renderer.render( scene, camera );
			};
			animate();
		</script>
	</body>
</html>

Result is fine: I get the plane with the texture on it.
What do I have to change / add to see the projected image distorted on the plane?

Thx in advance for helping :slight_smile:
bluefox67

2

Can you give a bit more detail on how you’d imagine it to be projected? Would the image fill the whole screen and just use plane as a mask? Would it fill the object bounding box and then use the plane as a mask? Would it be contained within the plane bounds (in this case - what about the parts that aren’t covered by the projected texture? (See this for visual explanation.)

In either case - creating a separate camera with a mock textured plane and using it as a texture sounds like a least problematic solution. Otherwise you’d probably need to recalculate UVs or use a custom shader.

3

Regarding the covering: Because it is intended to ba a perspective (not UV) projection, it depends on the projection origin. If the origin is near by the plane, the plane is not covered completely and shows the whole (but distorted) image. If the origin is far away, there is just a part of the texture image on the plane.
It should behave like a video projector, but not centred and not aligned perpendicular to the plane.
Other objects are not involved.

Just to clarify: here is a graphic to explain the intended scene:

perpective_projection
perpective_projection1430×909 68.4 KB