| 
8 | 8 | 		<style>  | 
9 | 9 | 			#loader {  | 
10 | 10 | 				border: 5px solid #f3f3f3; /* Light grey */  | 
11 |  | -                border-top: 5px solid #3d3d3d; /* Grey */  | 
12 |  | -                border-radius: 50%;  | 
13 |  | -                width: 40px;  | 
14 |  | -                height: 40px;  | 
15 |  | -                animation: spin 1s linear infinite;  | 
16 |  | -                position: absolute;  | 
17 |  | -                top: 50%;  | 
18 |  | -                left: 50%;  | 
19 |  | -                z-index: 2;  | 
20 |  | -            }  | 
21 |  | -			  | 
 | 11 | +				border-top: 5px solid #3d3d3d; /* Grey */  | 
 | 12 | +				border-radius: 50%;  | 
 | 13 | +				width: 40px;  | 
 | 14 | +				height: 40px;  | 
 | 15 | +				animation: spin 1s linear infinite;  | 
 | 16 | +				position: absolute;  | 
 | 17 | +				top: 50%;  | 
 | 18 | +				left: 50%;  | 
 | 19 | +				z-index: 2;  | 
 | 20 | +			}  | 
 | 21 | + | 
22 | 22 | 			@keyframes spin {  | 
23 |  | -                0% { transform: rotate(0deg); }  | 
24 |  | -                100% { transform: rotate(360deg); }  | 
25 |  | -            }  | 
 | 23 | +				0% { transform: rotate(0deg); }  | 
 | 24 | +				100% { transform: rotate(360deg); }  | 
 | 25 | +			}  | 
26 | 26 | 		</style>  | 
27 | 27 | 	</head>  | 
28 | 28 | 
 
  | 
 | 
41 | 41 | 
 
  | 
42 | 42 | 			import { GUI } from './jsm/libs/dat.gui.module.js';  | 
43 | 43 | 
 
  | 
44 |  | -			let container, controls;  | 
45 | 44 | 			let camera, scene, renderer;  | 
46 |  | -			let gui;  | 
 | 45 | +			let controls, gui;  | 
47 | 46 | 
 
  | 
48 | 47 | 			init();  | 
49 | 48 | 			animate();  | 
50 | 49 | 
 
  | 
51 | 50 | 			function init() {  | 
52 | 51 | 
 
  | 
53 | 52 | 				THREE.Object3D.DefaultUp = new THREE.Vector3( 0, 0, 1 );  | 
54 |  | -				container = document.createElement( 'div' );  | 
55 |  | -				document.body.appendChild( container );  | 
 | 53 | + | 
 | 54 | +				renderer = new THREE.WebGLRenderer( { antialias: true } );  | 
 | 55 | +				renderer.setPixelRatio( window.devicePixelRatio );  | 
 | 56 | +				renderer.setSize( window.innerWidth, window.innerHeight );  | 
 | 57 | +				renderer.outputEncoding = THREE.sRGBEncoding;  | 
 | 58 | +				document.body.appendChild( renderer.domElement );  | 
56 | 59 | 
 
  | 
57 | 60 | 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );  | 
58 | 61 | 				camera.position.set( 26, - 40, 5 );  | 
59 | 62 | 
 
  | 
60 | 63 | 				scene = new THREE.Scene();  | 
61 | 64 | 
 
  | 
62 |  | -				const directionalLight = new THREE.DirectionalLight( 0xffffff );  | 
 | 65 | +				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );  | 
63 | 66 | 				directionalLight.position.set( 0, 0, 2 );  | 
64 |  | -				directionalLight.castShadow = true;  | 
65 |  | -				directionalLight.intensity = 2;  | 
66 | 67 | 				scene.add( directionalLight );  | 
67 | 68 | 
 
  | 
68 | 69 | 				const loader = new Rhino3dmLoader();  | 
69 | 70 | 				loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' );  | 
70 |  | - | 
71 | 71 | 				loader.load( 'models/3dm/Rhino_Logo.3dm', function ( object ) {  | 
72 | 72 | 
 
  | 
73 | 73 | 					scene.add( object );  | 
 | 
78 | 78 | 
 
  | 
79 | 79 | 				} );  | 
80 | 80 | 
 
  | 
81 |  | -				const width = window.innerWidth;  | 
82 |  | -				const height = window.innerHeight;  | 
83 |  | - | 
84 |  | -				renderer = new THREE.WebGLRenderer( { antialias: true } );  | 
85 |  | -				renderer.setPixelRatio( window.devicePixelRatio );  | 
86 |  | -				renderer.setSize( width, height );  | 
87 |  | -				container.appendChild( renderer.domElement );  | 
88 |  | - | 
89 |  | -				controls = new OrbitControls( camera, container );  | 
 | 81 | +				controls = new OrbitControls( camera, renderer.domElement );  | 
90 | 82 | 
 
  | 
91 | 83 | 				window.addEventListener( 'resize', resize );  | 
92 | 84 | 
 
  | 
 | 
116 | 108 | 			function initGUI( layers ) {  | 
117 | 109 | 
 
  | 
118 | 110 | 				gui = new GUI( { width: 300 } );  | 
 | 111 | + | 
119 | 112 | 				const layersControl = gui.addFolder( 'layers' );  | 
120 | 113 | 				layersControl.open();  | 
121 | 114 | 
 
  | 
 | 
0 commit comments