<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>Painting Viewer</title>
		<style>
      
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
	</body>
</html>
* {
    margin: 0;
    padding: 0;
} 

title {
  margin-top: 0px;
}
var co = 'https://cors-anywhere.herokuapp.com/', 
		url = 'https://cdn.discordapp.com/attachments/559899261098262530/561197668773396490/Manifest500-nowatermark.jpg', 
		src = co + url

let width = 0;
let height = 0;

const textureLoader = new THREE.TextureLoader()
textureLoader.crossOrigin = "anonymous"
const imageTexture = textureLoader.load(src, function ( tex ) {
    width = tex.image.width;
    height = tex.image.height;
  
    var geometry = new THREE.CubeGeometry( width/100, height/100, 0.75 );
    var materials = [
      new THREE.MeshPhongMaterial( { color: 0x654321, shininess: 0 } ),
      new THREE.MeshPhongMaterial( { color: 0x654321, shininess: 0 } ),
      new THREE.MeshPhongMaterial( { color: 0x654321, shininess: 0 } ),
      new THREE.MeshPhongMaterial( { color: 0x654321, shininess: 0 } ),
      new THREE.MeshPhongMaterial( { color: 0xffffff, shininess: 0, map: imageTexture } ),
      new THREE.MeshPhongMaterial( { color: 0x654321, shininess: 0 } )
    ];

    //material.reflectivity = 0;
    var cube = new THREE.Mesh( geometry, materials );
    scene.add( cube );
  
    var shadowGeo = new THREE.CubeGeometry( width/100, height/100, 0.001 );
    var shadowMat = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.0 } );
    shadowMat.transparent = true;

    //material.reflectivity = 0;
    var shadowCube = new THREE.Mesh( shadowGeo, shadowMat );
    shadowCube.position.set(0.5,0.5,-0.5);
    scene.add( shadowCube );
} );
imageTexture.minFilter = THREE.LinearFilter

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xFFFFFF );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.lookAt(0, 0, 0);

var light = new THREE.PointLight( 0xffffff, 1.1, 100 );
light.position.set( 1, 10, 10 );
light.castShadow = true;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 25;
scene.add( light );

ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight)

var controls = new THREE.OrbitControls(camera);
controls.maxAzimuthAngle = Math.PI/2;
controls.minAzimuthAngle = -Math.PI/2;
controls.panSpeed = 0;
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

renderer.shadownMapEnabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild( renderer.domElement );

function animate() {
	requestAnimationFrame( animate );
  controls.update();
  
  //cube.rotation.x += 0.01;
  //cube.rotation.y += 0.01;
  
	renderer.render( scene, camera );
}
animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js
  2. https://threejs.org/examples/js/controls/OrbitControls.js