JSFiddle - React, Tailwind, and code Playground

by siouxcitizen

HTML

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

<!--
<script src="https://cdn.rawgit.com/cx20/gltf-test/32feb00dd8a778ee7f32eab36c5759a7017bd392/libs/three.js/r88dev/three.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/32feb00dd8a778ee7f32eab36c5759a7017bd392/libs/three.js/r88dev/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/32feb00dd8a778ee7f32eab36c5759a7017bd392/libs/three.js/r88dev/GLTFLoader.js"></script>
-->
<!--
<script src="https://cdn.rawgit.com/cx20/gltf-test/56402cc74517215df53d5495897eb94c87b9d60f/libs/three.js/r89dev/three.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/56402cc74517215df53d5495897eb94c87b9d60f/libs/three.js/r89dev/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/56402cc74517215df53d5495897eb94c87b9d60f/libs/three.js/r89dev/GLTFLoader.js"></script>
-->
<script src="https://cdn.rawgit.com/cx20/gltf-test/dae8b79b/libs/three.js/r93dev/three.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/dae8b79b/libs/three.js/r93dev/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/cx20/gltf-test/dae8b79b/libs/three.js/r93dev/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/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/

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

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

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );

    var directionalLight2 = new THREE.DirectionalLight( 0xffeedd );
    directionalLight2.position.set( 0, 5, -5 );
    scene.add( directionalLight2 );
    
    camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 10000 );
    //camera.position.set(2, 2, 3);
    camera.position.set(1, 0.5, 1);

    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };

    var loader = new...