JSFiddle - React, Tailwind, and code Playground

by siouxcitizen

HTML

<!-- forked from three.js で glTF 形式のデータを表示してみるテスト（その１５）（調整中） http://jsdo.it/cx20/Ykb3 -->
<!-- three.js -->
<!--
<script src="https://cdn.rawgit.com/mrdoob/three.js/91e3dcbcb2b20c9107f95d7202bf9facc73c9f6a/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/91e3dcbcb2b20c9107f95d7202bf9facc73c9f6a/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/91e3dcbcb2b20c9107f95d7202bf9facc73c9f6a/examples/js/loaders/GLTFLoader.js"></script>
-->
<script src="https://cdn.rawgit.com/mrdoob/three.js/r96/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r96/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r96/examples/js/loaders/deprecated/LegacyGLTFLoader.js"></script>

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

CSS

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

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

#container {
    position: absolute;
    top: 0px;
    width:100%;
    height:100%;
    z-index: -1;
}

#rendercontainer {
    position: absolute;
    top: 0px;
    width:100%;
    height:100%;
    z-index: -1;
    background-color:Red;
}

JavaScript

// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その１４）（調整中）" http://jsdo.it/cx20/kaJW
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その１３）（調整中）" http://jsdo.it/cx20/kdrJ
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その１２）（調整中）" http://jsdo.it/cx20/8TvA
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その１１）（調整中）" http://jsdo.it/cx20/27ll
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その１０）" http://jsdo.it/cx20/cXI1
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その９）" http://jsdo.it/cx20/0q6t
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その８）（失敗）" http://jsdo.it/cx20/mZld
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その７）（調整中）" http://jsdo.it/cx20/coRj
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その６）" http://jsdo.it/cx20/qTTy
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その５）" http://jsdo.it/cx20/2Tiv
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その４）（失敗）" http://jsdo.it/cx20/wA9Y
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その３）（失敗）" http://jsdo.it/cx20/mEpD
// forked from cx20's "three.js で glTF 形式のデータを表示してみるテスト（その２）" http://jsdo.it/cx20/cpkp
// 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;

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 );

    camera = new THREE.PerspectiveCamera( 75, width / height, 1, 2000 );
   ...