JSFiddle - React, Tailwind, and code Playground

by kpghost

HTML

<!DOCTYPE html>
<html>
  <head>
	 <meta charset="utf-8">
	 <title>Tonemapping test</title>
	 <style>
		body { margin: 0; }
    #tab { display: flex; flex-direction: row; align-content: middle; }
		canvas { display: inline-block; width: 300px; height:300px;}
    img { width: 300px; height: 300px; display: inline-block; }
	 </style>
  </head>
  <body>
	 <script src="three.min.js"></script>
	 <script type="module" src="tonemap.js"></script>
   <div id="tab">
   <canvas id="threecanvas"></canvas>
   <img src="https://i.postimg.cc/FRRc5gW6/pattern1.jpg">
   </div>
  </body>
</html>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, 1.0, 0.1, 1000 );
var threecanvas = document.getElementById("threecanvas");
var renderer = new THREE.WebGLRenderer({canvas: threecanvas, physicallyCorrectLights: true });

var r=window.devicePixelRatio;
renderer.setPixelRatio(r);
renderer.toneMapping=THREE.ACESFilmicToneMapping;
renderer.outputEncoding=THREE.sRGBEncoding;

renderer.setSize( 300, 300);

var geometry = new THREE.CubeGeometry();
var material = new THREE.MeshStandardMaterial( {
    roughness: 1.0,
    metalness: 0.0
} );
var cube = new THREE.Mesh( geometry, material );

const light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(0, 10, 20);
light.target.position.set(0,0,0);
scene.add(light);

var textureLoader = new THREE.TextureLoader();

textureLoader.load( "https://i.postimg.cc/FRRc5gW6/pattern1.jpg", function ( map ) {
    map.wrapS = THREE.RepeatWrapping;
    map.wrapT = THREE.RepeatWrapping;
    map.repeat.set(2,2);
    map.encoding = THREE.sRGBEncoding;
    material.map = map;
    material.needsUpdate = true;
} );

scene.add( cube );
camera.position.z = 1.3;

var animate = function() {
	 requestAnimationFrame( animate );
	 cube.rotation.x += 0.002;
	 renderer.render( scene, camera );
};

animate();