JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

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

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'
import { GLTFLoader } from 'https://alikim.com/_v1_jsm/GLTFLoader.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 path = 'https://raw.githubusercontent.com/alikim-com/blender/main/';
const loader = new GLTFLoader();
loader.load(
	path + 'uv_test.glb', 
  gltf => { 
  	const mesh = gltf.scene.children[0];
    mesh.material = new THREE.MeshBasicMaterial();
    mesh.material.map = new THREE.TextureLoader()
    	.load(path + 'base_Cylinder.png', render);
    //mesh.material.map.flipY = false;  
		scene.add(gltf.scene);
		render();
	}
);

render();

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