Three.js r102 .glTF 3D Model Display

Displaying .glTF Type 3D Model by Three.js r102 library

by siouxcitizen

HTML

<!-- three.min.js r102 -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/build/three.min.js"></script>

<!-- GLTFLoader.js -->
<script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/examples/js/loaders/GLTFLoader.js"></script>

<!-- about Three.js
from 20190306_0502
mrdoob/three.js r102  
https://github.com/mrdoob/three.js

https://github.com/mrdoob/three.js/blob/dev/build/three.min.js
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js

CDN by https://raw.githack.com/
-->

<!-- forked from Three.js .glTF 3D Model Display https://codepen.io/siouxcitizen/pen/QroPwJ -->

CSS

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

body {
  background: #000;
}

JavaScript

//■glTFファイルの設定
//
//glTFファイルを置いた GitHub のURL
//https://github.com/siouxcitizen/3DModel/blob/master/yuusha.gltf
//rawgit.com 用に↑上記URLを編集（どこかのサイトでみた手順の実行）
//https://github.com/siouxcitizen/3DModel/master/yuusha.gltf
//
//rawgit.comが使用できなくなったのでかわりにgithack.comを使用してCDN化
//https://rawcdn.githack.com/siouxcitizen/3DModel/a1c2e47550ca20de421f6d779229f66efab07830/yuusha.gltf
//
//
//■glTFファイル読込関連の参考サイト
//GLTFLoader
//https://threejs.org/docs/#examples/loaders/GLTFLoader
//
//MagicaVoxelの3DモデルをBlenderに持っていく 
//http://b00.sakura.ne.jp/main/gamecreate/2015/10/25/post-130/
//
//BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる （1/2）
//https://ryo620.org/blog/2018/02/to-gltf-from-fbx-by-blender/
//
//BlenderでFBX形式をglTF形式に変換してThree.jsでアニメーションさせる （2/2）
//https://ryo620.org/blog/2018/02/threejs-animation/
//

var scene, renderer;
var camera;
var mesh;

var isMouseDown = false;

init();

function init() {
    
    //シーンを作成
    scene = new THREE.Scene(); 
    
    //カメラを作成
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
    camera.position.z = 25; 
    camera.position.y = 15; 
    
    //レンダラーを作成
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize( window.innerWidth, window.innerHeight ); 
    document.body.appendChild( renderer.domElement ); 
    //背景色を設定
    renderer.setClearColor(0x00ffff, 1); 
    renderer.gammaOutput = true;
    
    //光源を作成
    var light = new THREE.DirectionalLight("#c1582d", 1);
    var ambient = new THREE.AmbientLight("#85b2cd");
    light.position.set( 0, -70, 100 ).normalize();
    scene.add(light);
    scene.add(ambient);

    var texture = new THREE.Texture();
    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {};
    var onProgress = function ( xhr ) {};
    var onError = function ( xhr ) {};

    // 3Dモデル用テクスチャ画像の読込
    var loader = new THREE.GLTFLoader();

    // Load a glTF resource
    loader.load(
        // resource URL
       ...