JSFiddle - React, Tailwind, and code Playground

by titansoftime

HTML

<script src="https://www.titansoftime.com/webgl/remote/three133.js"></script>
<script src="https://www.titansoftime.com/webgl/remote/orbit133.js"></script>
<script src="https://www.titansoftime.com/webgl/remote/ddsloader133.js"></script>

CSS

html, body{
  margin:0;
  padding:0;
}

JavaScript

var scene, camera, renderer, ambient, directional, controls, cubetexture, ddsLoader;


init();
animate();

function init() {
    
  clock = new THREE.Clock();

  imageLoader = new THREE.TextureLoader(); 

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000000 );
  camera.position.set(0, 0, -200);

  ambient = new THREE.AmbientLight(0xffffff);    
  scene.add(ambient);

  directional = new THREE.DirectionalLight(0xffffff,1);
  directional.position.set(0,100,0);
  scene.add(directional);       

  renderer = new THREE.WebGLRenderer({antialias:false});
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( 0x87ceeb, 1 ); 
  
  controls = new THREE.OrbitControls( camera, renderer.domElement ); 
  
  ddsLoader = new THREE.DDSLoader();

  document.body.appendChild( renderer.domElement );
  
  loadEnvMap();
  
  loadPlane();
    
}

function loadPlane(){

	var geo = new THREE.PlaneBufferGeometry(100,100);
  
  var diffuse = loadMap('https://www.titansoftime.com/textures/274_1024.dds');
  var normal = loadMap('https://www.titansoftime.com/normals/274_1024.dds');
  var mr = loadMap('https://www.titansoftime.com/metalnessroughness/274_1024.dds');
  
  var mat = new THREE.MeshStandardMaterial({
  	map:diffuse,
    normalMap:normal,    
    metalnessMap:mr,
    roughnessMap:mr,
    metalness: 1.0,
    roughness: 1.0,
    //envMap: cubetexture,
    side:THREE.DoubleSide
  });
  
  var mesh = new THREE.Mesh(geo,mat);  
  
  scene.add(mesh);

}

function loadEnvMap(){

	var urls = ['https://www.titansoftime.com/img/skymaps/25/px.dds', 'https://www.titansoftime.com/img/skymaps/25/nx.dds', 'https://www.titansoftime.com/img/skymaps/25/py.dds', 'https://www.titansoftime.com/img/skymaps/25/ny.dds', 'https://www.titansoftime.com/img/skymaps/25/pz.dds', 'https://www.titansoftime.com/img/skymaps/25/nz.dds'];

  cubetexture = ddsLoader.load(urls,function(texture){

   ...