<!DOCTYPE html>
<?php
    $bad=array("%","!","?","&","#"," ","+");
    $good=array("%25","%21","%3F","%26","%23","%20","%2B");

    if(isset($_GET['p'])) {
        $path="/".$_GET['p'];

        $path=str_replace($bad,$good,$path);
    }
    $path=str_replace("&amp;","&",$path);
?>
<html lang="en">
	<head>
		<title>three.js webgl - FBX loader</title>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="main.css">
        <style type="text/css">
        .lil-gui.root { display: none !important; }
        </style>
	</head>

	<body>        

    <script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>
		<script type="module">
			import * as THREE from 'three';
			import Stats from 'three/addons/libs/stats.module.js';
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			const manager = new THREE.LoadingManager();
			let camera, scene, renderer, stats, object, loader, guiMorphsFolder;
			let mixer;
			const clock = new THREE.Clock();
			//const params = {
			//	asset: 'Samba Dancing'
			//};
			//const assets = [
			//	'Samba Dancing',
            //	'morph_test'
            var clipdepth = 100000;
            var fogstart=50000;
            var fogend=80000;
            var planesize=100000;
            //
			//];
			init();
			function init() {
				const container = document.createElement( 'div' );
				document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, clipdepth );
                // --- twily note
                // in relevance to gridping.fbx
                // camera position set and controls target set below;
                // vector3 = X,Y,Z = Right,Up,-Forward
                // ---
                camera.position.set( -100, 400, 3500 );
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xa0a0a0 );
				//scene.fog = new THREE.Fog( 0xa0a0a0, fogstart, fogend );
				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 5 );
				hemiLight.position.set( 0, 200, 0 );
				scene.add( hemiLight );
				const dirLight = new THREE.DirectionalLight( 0xffffff, 5 );
				dirLight.position.set( 0, 200, 100 );
				dirLight.castShadow = true;
				dirLight.shadow.camera.top = 180;
				dirLight.shadow.camera.bottom = - 100;
				dirLight.shadow.camera.left = - 120;
				dirLight.shadow.camera.right = 120;
				scene.add( dirLight );
				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
				// ground
				const mesh = new THREE.Mesh( new THREE.PlaneGeometry( planesize, planesize ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
				mesh.rotation.x = - Math.PI / 2;
				mesh.receiveShadow = true;
                scene.add( mesh );
                const sphere = new THREE.Mesh( new THREE.SphereGeometry(10, 32), new THREE.MeshPhongMaterial( { color: 0x990099, depthWrite: true } ) );
                sphere.receiveShadow = false;
                //sphere.material.shininess = .1;
                //sphere.material.reflectivity = .1;
                sphere.material.combine = 1;
                scene.add( sphere );
				const grid = new THREE.GridHelper( planesize, 250, 0x000000, 0x000000 );
				grid.material.opacity = 0.2;
				grid.material.transparent = true;
				scene.add( grid );
			
				loader = new FBXLoader( manager );
                //loadAsset( params.asset );
                loadAsset( "<?php echo $path; ?>" );
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( animate );
				renderer.shadowMap.enabled = true;
				container.appendChild( renderer.domElement );
				const controls = new OrbitControls( camera, renderer.domElement );
                controls.target.set( -100, 400, 500 );
                sphere.position.set( -100, 400, 500 );
                controls.addEventListener('change',function(e) {
                    //alert('test');
                    sphere.position.set( controls.target.x, controls.target.y, controls.target.z );
                });
				controls.update();
				window.addEventListener( 'resize', onWindowResize );
				// stats
				stats = new Stats();
				container.appendChild( stats.dom );
				const gui = new GUI();
				//gui.add( params, 'asset', assets ).onChange( function ( value ) {
				//	loadAsset( value );
				//} );
				//guiMorphsFolder = gui.addFolder( 'Morphs' ).hide();
            }

			function loadAsset( asset ) {
				loader.load( asset, function ( group ) {
					if ( object ) {
						object.traverse( function ( child ) {
							if ( child.material ) {
								const materials = Array.isArray( child.material ) ? child.material : [ child.material ];
								materials.forEach( material => {
									if ( material.map ) material.map.dispose();
									material.dispose();
			
								});
							}
			
							if ( child.geometry ) child.geometry.dispose();
						});
						scene.remove( object );
					}
					//
					object = group;
					if ( object.animations && object.animations.length ) {
						mixer = new THREE.AnimationMixer( object );
						const action = mixer.clipAction( object.animations[ 0 ] );
						action.play();
					} else {
						mixer = null;
					}
					//guiMorphsFolder.children.forEach( ( child ) => child.destroy() );
					//guiMorphsFolder.hide();
					object.traverse( function ( child ) {
						if ( child.isMesh ) {
							child.castShadow = true;
							child.receiveShadow = true;
							//if ( child.morphTargetDictionary ) {
							//	guiMorphsFolder.show();
							//	const meshFolder = guiMorphsFolder.addFolder( child.name || child.uuid );
							//	Object.keys( child.morphTargetDictionary ).forEach( ( key ) => {
			
							//		meshFolder.add( child.morphTargetInfluences, child.morphTargetDictionary[ key ], 0, 1, 0.01 );
			
							//	} );
			
							//}
						}
					} );
					scene.add( object );
				} );
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			//
			function animate() {
				const delta = clock.getDelta();
				if ( mixer ) mixer.update( delta );
				renderer.render( scene, camera );
				stats.update();
			}
		</script>

        </body>
</html>
