Texture transition

by Paul West

HTML

<div id="imgLib">

</div>

CSS

body{
  overflow: hidden;
  margin: 0;
}
#imgLib {
  position: absolute;
  display: flex;
  flex-direction: column;
}
img{
  border: 4px solid #aaa;
  border-radius: 10px;
  margin: 4px;
}
img:hover{
  border: 6px solid white;
  cursor: pointer;
  margin: 2px;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";
import {TWEEN} from "https://cdn.skypack.dev/[email protected]/examples/jsm/libs/tween.module.min.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(-0.5, 0.5, 1).setLength(10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
	camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);

let tl = new THREE.TextureLoader();
let changingInProgress = false;
let textures = [
	"https://threejs.org/examples/textures/758px-Canestra_di_frutta_(Caravaggio).jpg",
  "https://threejs.org/examples/textures/uv_grid_opengl.jpg",
  "https://threejs.org/examples/textures/colors.png"
].map((t, idx) => {
	
  let img = new Image();
  img.width = img.height = 100;
  img.src = t;
  img.addEventListener("click", event => { changeTexture(idx);})
  imgLib.appendChild(img);
  
  return tl.load(t, tex => {tex.needsUpdate = true});
});

function changeTexture(idx){

	if (idx === m.userData.prevIdx || changingInProgress === true) return;
  
  m.map = textures[idx];
  m.userData.map0.value = textures[m.userData.prevIdx];
  m.userData.prevIdx = idx;
  
  m.userData.mixVal.value = 0;
  new TWEEN.Tween(m.userData.mixVal)
  	.to({value: 1}, 1000)
		.onStart(() => {changingInProgress = true;})
    .onComplete(() => {changingInProgress = false;})
    .start();
}

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let g = new THREE.BoxGeometry(5, 5, 5);
let m = new...