VRMLoader prototype

17803fc5 · Takahiro · bc3aa48e · 17803fc5 · 17803fc5 · 17803fc5
6 changed file
--- a/examples/files.js
+++ b/examples/files.js
@@ -133,6 +133,7 @@ var files = {
 		"webgl_loader_texture_tga",
 		"webgl_loader_ttf",
 		"webgl_loader_utf8",
+		"webgl_loader_vrm",
 		"webgl_loader_vrml",
 		"webgl_loader_vtk",
 		"webgl_loader_x",

--- a/examples/js/loaders/VRMLoader.js
+++ b/examples/js/loaders/VRMLoader.js
+/**
+ * @author Takahiro / https://github.com/takahirox
+ */
+
+// VRM Specification: https://dwango.github.io/vrm/vrm_spec/
+//
+// VRM is based on glTF 2.0 and VRM extension is defined
+// in top-level json.extensions.VRM
+
+THREE.VRMLoader = ( function () {
+
+	function VRMLoader( manager ) {
+
+		if ( THREE.GLTFLoader === undefined ) {
+
+			throw new Error( 'THREE.VRMLoader: Import THREE.GLTFLoader.' );
+
+		}
+
+		this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+		this.gltfLoader = new THREE.GLTFLoader( this.manager );
+
+	}
+
+	VRMLoader.prototype = {
+
+		constructor: VRMLoader,
+
+		crossOrigin: 'Anonymous',
+
+		load: function ( url, onLoad, onProgress, onError ) {
+
+			this.gltfLoader.load( url, onLoad, onProgress, onError );
+
+		},
+
+		setCrossOrigin: function ( value ) {
+
+			this.glTFLoader.setCrossOrigin( value );
+			return this;
+
+		},
+
+		setPath: function ( value ) {
+
+			this.glTFLoader.setPath( value );
+			return this;
+
+		},
+
+		setDRACOLoader: function ( dracoLoader ) {
+
+			this.glTFLoader.setDRACOLoader( dracoLoader );
+			return this;
+
+		}
+
+	};
+
+	return VRMLoader;
+
+} )();
--- a/examples/models/vrm/Alicia/AliciaSolid.vrm
+++ b/examples/models/vrm/Alicia/AliciaSolid.vrm
--- a/examples/models/vrm/Alicia/readme.txt
+++ b/examples/models/vrm/Alicia/readme.txt
+————————————————————————
+ニコニ立体公式キャラクター「ニコニ立体ちゃん」(VRM版)
+http://3d.nicovideo.jp/alicia/
+version 1
+©dwango, inc. All rights reserved.
+————————————————————————
+
+
+この度は、ニコニ立体公式キャラクター「ニコニ立体ちゃん」をダウンロードいただきましてありがとうございます。
+
+◯ 内容物
+1. VRMファイル
+2. ニコニ立体ちゃん壁紙1種
+
+
+◯よくある質問
+* 「ニコニ立体ちゃん」と「アリシア・ソリッド」、正式名称はどちら？
+キャラクターの本名はアリシア・ソリッドですが、クレジット等での表記はニコニ立体ちゃんが正式名称となります。
+作品発表の際には「ニコニ立体ちゃん」タグをご活用ください。
+
+* ニコニ立体ちゃんを用いた、年齢制限のある二次創作物の公開は可能なのか？
+利用規約にある禁止事項に抵触しない限りにおいて可能です。
+
+
+◯ 利用規約抜粋
+必ず利用規約( http://3d.nicovideo.jp/alicia/rule.html )をご確認ください。
+利用規約の改訂などによって下記抜粋と利用規約の内容が異なる場合は利用規約が優先されます。
+
+* 非営利、営利に関わらず個人(同人サークルなど、法人を除く団体を含む)の利用が可能です。
+* 二次創作物について株式会社ドワンゴ(以下、当社)のクレジットを表記する必要はありません。
+* 改変物を配布することができます。
+* niconico内でキャラクターやモーションを利用した作品を投稿する場合は、コンテンツツリーの親作品にキャラクター( http://3d.nicovideo.jp/works/td14712 )を登録するよう努めるものとします。
+
+
+◯禁止事項
+* 第三者の知的財産権その他一切の権利及び名誉を侵害しないこと。
+* 当社（当社が提供するサービス等を含む）及び当社キャラクターの名誉・品位傷つける行為をしないこと。
+* 公序良俗に反する行為や目的、暴力的な表現、反社会的な行為や目的、特定の信条や宗教、政治的発言のため利用しないこと。
+* 当社の公式商品であるかのような誤解を招く利用をしないこと。
+* その他、当社が不適切と判断する行為に利用しないこと。
+
+
+◯ クレジット
+企画: 株式会社ドワンゴ
+キャラクターデザイン: 黒星紅白
+モデリング: 雨刻
\ No newline at end of file
--- a/examples/models/vrm/LICENSE
+++ b/examples/models/vrm/LICENSE
+The files under this directory are NOT under MIT license, but other licenses.
+
+See readme in each directory for the detail.
--- a/examples/webgl_loader_vrm.html
+++ b/examples/webgl_loader_vrm.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - vrm loader</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a {
+				color: #75ddc1;
+				font-weight: bold;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - VRMLoader<br />
+			Alicia by
+			<a href="https://3d.nicovideo.jp/works/td32797" target="_blank" rel="noopener">Dwango</a> /
+			<a href="http://3d.nicovideo.jp/alicia/rule.html">License</a><br />
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+		<script src="js/loaders/VRMLoader.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats, controls;
+			var camera, scene, renderer, light;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+				camera.position.set( 0, 0.8, - 2.2 );
+
+				controls = new THREE.OrbitControls( camera );
+				controls.target.set( 0, 0.8, 0 );
+				controls.update();
+
+				scene = new THREE.Scene();
+
+				light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
+				light.position.set( 0, 1, 0 );
+				scene.add( light );
+
+				// model
+				var loader = new THREE.VRMLoader();
+				loader.load( 'models/vrm/Alicia/AliciaSolid.vrm', function ( vrm ) {
+
+					// VRMLoader doesn't support VRM Unlit extension yet so
+					// converting all materials to MeshBasicMaterial here as workaround so far.
+					vrm.scene.traverse( function ( object ) {
+
+						if ( object.material ) {
+
+							var material = new THREE.MeshBasicMaterial();
+							THREE.Material.prototype.copy.call( material, object.material );
+							material.color.copy( object.material.color );
+							material.map = object.material.map;
+							material.lights = false;
+							object.material = material;
+
+						}
+
+					} );
+
+					scene.add( vrm.scene );
+
+				} );
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.gammaOutput = true;
+				container.appendChild( renderer.domElement );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				// stats
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				renderer.render( scene, camera );
+
+				stats.update();
+
+			}
+
+		</script>
+
+	</body>
+</html>