JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<link type="text/css" rel="stylesheet" href="https://alikim.com/_v1_jsm/css/controls.css">
<canvas id="main_canvas" width="500" height="500"></canvas>
<script type="x-shader/x-vertex" id="vs">

  varying vec2 vuv;
  
  void main() {
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    vuv = uv;
  }
</script>

<script type='x-shader/x-fragment' id='fs'>

 	varying vec2 vuv;
  uniform sampler2D tex;
  uniform vec2 repeat;

  void main() {

  	vec2 uv = vuv;
  	uv = fract(uv * repeat);
  	vec2 smooth_uv = repeat * vuv;
  	vec4 duv = vec4(dFdx(smooth_uv), dFdy(smooth_uv));
  	vec3 txl = textureGrad(tex, uv, duv.xy, duv.zw).rgb;

 		gl_FragColor = vec4(txl, 1.0);
 }
  
</script>

JavaScript

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

import * as CONTROLS from 'https://alikim.com/_v1_jsm/controls.js'

// 3D

const canvas = document.getElementById('main_canvas');
const [w, h] = [canvas.width, canvas.height];
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: canvas,
});
renderer.setSize(w, h);

const [near, far] = [1, 700];
const mid = -0.5 * (near + far);
const camera = new THREE.PerspectiveCamera(45, w / h, near, far);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0, 0, 0.3);

const sz = 100;

const geo = new THREE.BoxGeometry(sz, sz, sz);
const mesh = new THREE.Mesh(
  geo,
  new THREE.ShaderMaterial({
    vertexShader: document.getElementById('vs').textContent,
    fragmentShader: document.getElementById('fs').textContent,
    uniforms: {
  		tex: { value: new THREE.TextureLoader().load(
      'https://alikim.com/_v1_jsm/textures/cube_map.png', render) },
   		repeat: { value: [2, 3] }
		},
  })
);
 
mesh.position.z = mid;
scene.add(mesh);

const hlp = new THREE.AxesHelper(110);
hlp.position.z = mid;
scene.add(hlp);

function render() { renderer.render(scene, camera) }

const createControls = () => {
  CONTROLS.create({
    cont: canvas, 
    cam: camera,
    type: 'Trackball', 
    overlay: true, 
    lookAt: [0, 0, mid],
    callback: render,
    sens: {p: 0.005},
  });
};

createControls();
render();