JSFiddle - React, Tailwind, and code Playground

by manthrax

HTML

<script src="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.module.min.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/jsm/loaders/GLTFLoader.js"></script>
<div id="webgl"></div>

CSS

#webgl {
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 512px;
  height: 512px;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import {
  GLTFLoader
} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';

let scene, renderer, camera;

await init();   /// THRAX ---- await here because its an async function

async function init() { // Marked as async so we can use await in here...
  function getContainer() {
    return document.getElementById('webgl');
  }

  function getContainerSize() {
    const elem = getContainer();

    return {
      width: elem.clientWidth,
      height: elem.clientHeight,
    };
  }

  const ctr_size = getContainerSize();
  camera = new THREE.PerspectiveCamera(
    75,
    ctr_size.width / ctr_size.height,
    0.01,
    10,
  );

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x66aa66);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    preserveDrawingBuffer: true,
  });

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(ctr_size.width, ctr_size.height);
  getContainer().appendChild(renderer.domElement);

  camera.position.set(0.0, 2.0, -1.25);
  camera.lookAt(new THREE.Vector3(0.0, 1.0, 0.0));

  const loader = new GLTFLoader();
  const material = new THREE.MeshNormalMaterial();

  const total = 50;
  for (let count = 0; count < total; ++count) {
  
    let gltf = await loader.loadAsync( 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/Soldier.glb')


        gltf.scene.rotation.y = Math.random() * Math.PI * 2.0;

        gltf.scene.traverse(function(object) {
          if (object.isMesh) {
            object.material = material;
          }
        });

        scene.add(gltf.scene);

        renderer.render(scene, camera);

        scene.remove(gltf.scene);

        saveCanvasAsWEBP(`img_${String(count).padStart(4, '0')}.webp`);

        console.log('Saving #', count);
  }
}

function saveCanvasAsWEBP(filename) {
  const webgl_div =...