JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<link type="text/css" rel="stylesheet" href="https://alikim.com/_v1_jsm/css/controls.css">
<button id="scaleY">click</button>

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'https://alikim.com/_v1_jsm/three.module.js';
import * as CONTROLS from 'https://alikim.com/_v1_jsm/controls.js'

const cont = document.documentElement;
const [w, h] = [cont.clientWidth - 20, cont.clientHeight - 20];

const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
camera.position.set(10, 10, 10);

const hlp = new THREE.AxesHelper(3);
scene.add(hlp);

const render = () => {
  renderer.render(scene, camera);
};

const mesh = new THREE.Mesh(
	new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial(),
);
mesh.material.map = new THREE.TextureLoader()
    	.load(
      'https://alikim.com/_v1_jsm/textures/uv.png',
      render,
      );
mesh.material.map.wrapS = THREE.RepeatWrapping;
mesh.material.map.wrapT = THREE.RepeatWrapping;
scene.add(mesh);

CONTROLS.create({
  cont: renderer.domElement,
  cam: camera,
  type: 'Orbital',
  overlay: true,
  lookAt: [0, 0, 0],
  callback: render,
});

const main = mesh => {
  const model = mesh;
  const texture2 = mesh.material.map;
  const modelReady = 1;
  let [x, y, z] = [1, 1, 1];
  let [_scaleFirst, _scaleSec] = [1, 1];
  document.getElementById("scaleY").addEventListener("click", function() {
    if (modelReady) {
      y += 0.1;
      model.scale.set(x, y, z);
      const scaleSec = _scaleSec * y;
      texture2.repeat.set(_scaleFirst, scaleSec);
      texture2.needsUpdate = true;
      render();
    }
  });
};

main(mesh);