JSFiddle - React, Tailwind, and code Playground

by siouxcitizen

HTML

<!-- forked from [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１４）（調整中） http://jsdo.it/cx20/0kU1 -->

<script src="https://cdn.rawgit.com/cx20/gltf-test/d390423c636eac83cc24c1cf4c17b336a4ef1564/libs/three.js/r94dev/three.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/d390423c636eac83cc24c1cf4c17b336a4ef1564/libs/three.js/r94dev/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/d390423c636eac83cc24c1cf4c17b336a4ef1564/libs/three.js/r94dev/GLTFLoader.js"></script>

<div id="container"></div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

body {
  background: #000;
  font: 30px sans-serif;
}

JavaScript

// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１３）（調整中）" http://jsdo.it/cx20/Wrcg
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１２）（調整中）" http://jsdo.it/cx20/abdM
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１１）（調整中）" http://jsdo.it/cx20/UqP9
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１０）（調整中）" http://jsdo.it/cx20/mrOD
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その９）（調整中）" http://jsdo.it/cx20/6MMO
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その８）" http://jsdo.it/cx20/qugw
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その７）" http://jsdo.it/cx20/4r5U
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その６）" http://jsdo.it/cx20/SMjx
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その５）" http://jsdo.it/cx20/ahsW
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その４）" http://jsdo.it/cx20/waIx
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その３）（調整中）" http://jsdo.it/cx20/q0cx
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その２）" http://jsdo.it/cx20/K0k6
// forked from cx20's "[WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト" http://jsdo.it/cx20/gMdU
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その１）" http://jsdo.it/cx20/2qm8N
// forked from cx20's "three.js で OBJ 形式のデータを表示してみるテスト（その１）" http://jsdo.it/cx20/wGMY
// forked from cx20's "three.js で Blender のデータを表示してみるテスト" http://jsdo.it/cx20/2CXI
// forked from 【WebGL特集】第4回：Blenderでモデル出力 http://mox-motion.com/blog/webgl04-2/

let gltf = null;
let mixer = null;
let clock = new THREE.Clock();
let controls;
let camera;

init();
animate();
  
function init() {
    width = window.innerWidth;
    height = window.innerHeight;
    
    scene = new THREE.Scene();
    
    let ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );

    const light = new...