PlayCanvasLoader: Small improvements and example

examples/files.js

@@ -110,6 +110,7 @@ var files = {
 		"webgl_loader_nrrd",
 		"webgl_loader_pcd",
 		"webgl_loader_pdb",
+		"webgl_loader_playcanvas",
 		"webgl_loader_ply",
 		"webgl_loader_prwm",
 		"webgl_loader_ttf",

examples/js/loaders/PlayCanvasLoader.js

@@ -1,5 +1,6 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ * @author Mugen87 / https://github.com/Mugen87
  */
 
 THREE.PlayCanvasLoader = function ( manager ) {
@@ -31,19 +32,37 @@ THREE.PlayCanvasLoader.prototype = {
 
 			var attributes = {};
 
+			// create a buffer attribute for each array that contains vertex information
+
 			for ( var name in data ) {
 
-				var attribute = data[ name ];
+				var array = data[ name ];
+
+				var type = array.type;
+				var size = array.components;
+
+				var attribute;
+
+				switch ( type ) {
 
-				var type = attribute.type;
-				var size = attribute.components;
+					case 'float32':
+						attribute = new THREE.Float32BufferAttribute( array.data, size );
+						break;
 
-				var array;
+					case 'uint8':
+						attribute = new THREE.Uint8BufferAttribute( array.data, size );
+						break;
 
-				if ( type === 'float32' ) array = new Float32Array( attribute.data );
-				if ( array === undefined ) console.log( 'PlayCanvasLoader: TODO', type );
+					case 'uint16':
+						attribute = new THREE.Uint16BufferAttribute( array.data, size );
+						break;
 
-				attributes[ name ] = new THREE.BufferAttribute( array, size );
+					default:
+						console.log( 'THREE.PlayCanvasLoader: Array type "%s" not yet supported.', type );
+
+				}
+
+				attributes[ name ] = attribute;
 
 			}
 
@@ -53,9 +72,11 @@ THREE.PlayCanvasLoader.prototype = {
 
 		function parseMeshes( data ) {
 
+			// create buffer geometry
+
 			var geometry = new THREE.BufferGeometry();
 
-			geometry.setIndex( new THREE.Uint16BufferAttribute( data.indices, 1 ) );
+			geometry.setIndex( data.indices );
 
 			var attributes = model.vertices[ data.vertices ]._attributes;
 
@@ -91,15 +112,16 @@ THREE.PlayCanvasLoader.prototype = {
 		function parseNodes( data ) {
 
 			var object = new THREE.Group();
-			object.name = data.name;
 
-			if ( data._geometries !== undefined ) {
+			var geometries = data._geometries;
+
+			if ( geometries !== undefined ) {
 
 				var material = new THREE.MeshPhongMaterial();
 
-				for ( var i = 0; i < data._geometries.length; i ++ ) {
+				for ( var i = 0, l = geometries.length; i < l; i ++ ) {
 
-					var geometry = data._geometries[ i ];
+					var geometry = geometries[ i ];
 
 					object.add( new THREE.Mesh( geometry, material ) );
 
@@ -107,12 +129,16 @@ THREE.PlayCanvasLoader.prototype = {
 
 			}
 
-			for ( var i = 0; i < data.rotation.length; i ++ ) {
+			for ( var i = 0, l = data.rotation.length; i < l; i ++ ) {
 
 				data.rotation[ i ] *= Math.PI / 180;
 
 			}
 
+			//
+
+			object.name = data.name;
+
 			object.position.fromArray( data.position );
 			object.rotation.fromArray( data.rotation );
 			object.scale.fromArray( data.scale );
@@ -123,35 +149,35 @@ THREE.PlayCanvasLoader.prototype = {
 
 		//
 
-		console.log( json );
-
 		var model = json.model;
 
-		for ( var i = 0; i < model.vertices.length; i ++ ) {
+		for ( var i = 0, l = model.vertices.length; i < l; i ++ ) {
 
 			parseVertices( model.vertices[ i ] );
 
 		}
 
-		for ( var i = 0; i < model.meshes.length; i ++ ) {
+		for ( var i = 0, l = model.meshes.length; i < l; i ++ ) {
 
 			parseMeshes( model.meshes[ i ] );
 
 		}
 
-		for ( var i = 0; i < model.meshInstances.length; i ++ ) {
+		for ( var i = 0, l = model.meshInstances.length; i < l; i ++ ) {
 
 			parseMeshInstances( model.meshInstances[ i ] );
 
 		}
 
-		for ( var i = 0; i < model.nodes.length; i ++ ) {
+		for ( var i = 0, l = model.nodes.length; i < l; i ++ ) {
 
 			parseNodes( model.nodes[ i ] );
 
 		}
 
-		for ( var i = 0; i < model.parents.length; i ++ ) {
+		// setup scene hierarchy
+
+		for ( var i = 0, l = model.parents.length; i < l; i ++ ) {
 
 			var parent = model.parents[ i ];
 

examples/webgl_loader_playcanvas.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - PlayCanvas</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 {
+				background:#777;
+				padding:0;
+				margin:0;
+				overflow:hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px;
+				width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+			}
+
+			a {
+				color: #ffffff;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> PlayCanvas loader
+			| Hand by <a href="https://sketchfab.com/anura" target="_blank" rel="noopener">Anura</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/loaders/PlayCanvasLoader.js"></script>
+		<script src='js/controls/OrbitControls.js'></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var camera, scene, renderer, stats;
+
+			init();
+			animate();
+
+			function init() {
+
+				var container = document.getElementById( 'container' );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera.position.set( - 1, 2, 4 );
+
+				scene = new THREE.Scene();
+
+				//
+
+				var loader = new THREE.PlayCanvasLoader();
+				loader.load( './models/playcanvas/hand.json', function ( model ) {
+
+					scene.add( model );
+
+				} );
+
+				//
+
+				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				scene.add( ambientLight );
+
+				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				camera.add( pointLight );
+				scene.add( camera );
+
+				//
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				//
+
+				var controls = new THREE.OrbitControls( camera );
+
+				//
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>