//https://threejs.org/examples/#webgl_loader_3dm
//https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_3dm.html




//load css
            AB.loadCSS ( '/uploads/threeport/main.css' ); 
            AB.newDiv ('container');

            import * as THREE from '/api/threemodule/libs/three.module.js';

          import Stats from '/uploads/threeport/stats.module.js';
            import { GUI } from '/uploads/threejs/dat.gui.module.js';
			import { OrbitControls } from '/uploads/threejs/OrbitControls.js';
			import { Rhino3dmLoader } from '/uploads/threejs/3DMLoader.js';



			let camera, scene, renderer;
			let controls, gui;

			init();
			animate();

			function init() {

				THREE.Object3D.DefaultUp = new THREE.Vector3( 0, 0, 1 );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.outputEncoding = THREE.sRGBEncoding;
				document.body.appendChild( renderer.domElement );

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 26, - 40, 5 );

				scene = new THREE.Scene();

				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
				directionalLight.position.set( 0, 0, 2 );
				scene.add( directionalLight );

				const loader = new Rhino3dmLoader();
				loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/' );
				loader.load( 'models/3dm/Rhino_Logo.3dm', function ( object ) {

					scene.add( object );
					initGUI( object.userData.layers );

					// hide spinner
					document.getElementById( 'loader' ).style.display = 'none';

				} );

				controls = new OrbitControls( camera, renderer.domElement );

				window.addEventListener( 'resize', resize );

			}

			function resize() {

				const width = window.innerWidth;
				const height = window.innerHeight;

				camera.aspect = width / height;
				camera.updateProjectionMatrix();

				renderer.setSize( width, height );

			}

			function animate() {

				controls.update();
				renderer.render( scene, camera );

				requestAnimationFrame( animate );

			}

			function initGUI( layers ) {

				gui = new GUI( { width: 300 } );

				const layersControl = gui.addFolder( 'layers' );
				layersControl.open();

				for ( let i = 0; i < layers.length; i ++ ) {

					const layer = layers[ i ];
					layersControl.add( layer, 'visible' ).name( layer.name ).onChange( function ( val ) {

						const name = this.object.name;

						scene.traverse( function ( child ) {

							if ( child.userData.hasOwnProperty( 'attributes' ) ) {

								if ( 'layerIndex' in child.userData.attributes ) {

									const layerName = layers[ child.userData.attributes.layerIndex ].name;

									if ( layerName === name ) {

										child.visible = val;
										layer.visible = val;

									}

								}

							}

						} );

					} );

				}

			}